React js教程：React 中的片段和纯组件（12）

render(){   
     return(  
          <Fragment>  
               This is my React Application  
               <h2>Include Introduction</h2>  
               Now moving towards  
               <h2>The Complex chapters </h2>  
               And provide practical session  
           </Fragment>  
       );  
}  

纯组件

在 React 中，只有当组件为相同的 state 和 props 呈现相同的输出并且其返回值对于相同的输入值始终相同时，才被声明为纯组件。Component extends React.PureComponent 基类被视为纯组件。

Pure Component 包括一些性能改进和渲染优化，因为 React 实现了 shouldComponentUpdate() 方法来对 props 和 state 进行浅层比较。

纯组件的 shouldComponentUpdate() 方法只是浅层比较对象。在使用复杂数据结构的情况下，它可以为更深层次的差异生成假阴性。当您拥有简单的道具和状态或使用 forceUpdate() 时，您可以使用这种方法，或者您可以使用不可变对象，以防进行深入的数据比较。

当 PureComponent 使用 shouldComponentUpdate() 方法时，它会跳过整个组件子树的 props 更新。因此，在使用它时，请确保所有孩子都是纯洁的。

例如，在 React.Component 的情况下

import React from 'react';  
  
class Calculation extends React.Component{  
        constructor(props){  
                super(props);  
                this.state={  
                        firstName : "",  
                        fullName:""  
                }  
                this.handleFirstName = this.handleFirstName.bind(this);   
                this.handleClick = this.handleClick.bind(this);  
        }  
  
        handleFirstName(e){  
                this.setState({  
                        firstName : e.target.value  
                });   
        }  
  
        handleClick(e){  
                this.setState({  
                        fullName : this.state.firstName  
                });  
        }  
  
        render(){  
                console.log('rendered' + this.state.fullName);  
                return(  
                        <div>  
                                <input type="text" value={this.state.firstName} placeholder="First Name" onChange={this.handleFirstName}></input>   
                                <button onClick={this.handleClick}>Click Me!</button>  
                                <p> {this.state.fullName}</p>  
                        </div>  
                )  
        }  
}  
  
export default Calculation;  

输出将显示如下。

每次单击按钮时，控制台中的上述输出都会调用 render 方法，即使文本框中没有进行任何更改。

现在，将 React.Component 更新为 React.PureComponent

import React from 'react';  
  
class Calculation extends React.PureComponent{  
       constructor(props){  
              super(props);  
              this.state={  
                     firstName : "",  
                     fullName:""  
              }  
              this.handleFirstName = this.handleFirstName.bind(this);   
              this.handleClick = this.handleClick.bind(this);  
       }  
  
       handleFirstName(e){  
              this.setState({  
                     firstName : e.target.value  
              });   
       }  
  
       handleClick(e){  
              this.setState({  
                     fullName : this.state.firstName  
              });  
       }  
  
       render(){  
              console.log('rendered' + this.state.fullName);  
              return(  
                     <div>  
                            <input type="text" value={this.state.firstName} placeholder="First Name" onChange={this.handleFirstName}></input>   
                            <button onClick={this.handleClick}>Click Me!</button>  
                            <p> {this.state.fullName}</p>  
                     </div>  
              )  
       }  
}  
  
export default Calculation; 

现在，观察下面的输出。

现在查看控制台，如果文本框中没有更改，则不会每次都调用按钮渲染方法。

浅比较

在使用纯组件时，术语浅比较很重要。浅比较是指 2 种原始类型，原始类型和复杂类型，

原始类型

例如，在原始类型中，我们有 2 个值，a 和 b 任何类型，如字符串、布尔值或数字。如果两者属于相同类型且具有相同值，则浅比较 b 返回 true

例子，

let a = “Test”;  
let b = “Test”;  
console.log(a===b); // return true;  

复杂类型

在像数组和对象这样的复杂类型中，如果两者具有相同的对象，则浅比较 b 返回 true

例子，

let a = {1,2,3}  
let b = {1,2,3}  
let c = a  
console.log(a===b); // return false; point to different object  
console.log(a===c); // return true, as it points to the same object 

使用纯组件时要记住的要点：

• 如果父类扩展 PureComponent，那么我们必须确保子类也是纯的，以避免意外行为。
• 永远记住永远不要改变状态，状态总是返回一个反映新状态的新对象。
• 如果 props 和 state 没有变化，Pure Component 将不会被重新渲染。
• 纯组件应该用于小型应用程序。

概括

在本文中，我们了解了 Fragment 和 Pure Component 及其在 React 中的使用。此外，我们回顾了浅比较的概念。在下一篇文章中，我们将了解 memo 是一个功能组件，以及它与纯组件的区别。以及 React 中 Refs 的概念。

本系列的下一个 >>React 中的门户和错误边界