React性能优化之非必要的渲染问题解决.docx

第

React性能优化之非必要的渲染问题解决

目录1.非必要组件渲染2.解决方案之shouldComponentUpdate3.解决方案之PureComponent4.解决方案之React.memo5.useMemo和useCallback

1.非必要组件渲染

在React工程中，在改变React状态时，我们希望对整个页面的影响越小越好。然而实际情况是更改掉某些属性之后，除了会导致组件本身的重新渲染，也可能会导致其相关的组件也发生重新渲染。请看下面的例子：

新建一对父子组件

//父组件：

importReact,{Component}fromreact

importChildfrom./Child

classParentextendsComponent{

constructor(props){

super(props)

this.state={

parentInfo:parent,

sonInfo:son

this.changeParentInfo=this.changeParentInfo.bind(this)

changeParentInfo(){

this.setState({parentInfo:`改变了父组件state：${Date.now()}`})

render(){

console.log(ParentComponentrender)

return(

div

p{this.state.parentInfo}/p

buttonthis.changeParentInfo}改变父组件state/buttonbr/

Childson={this.state.sonInfo}/Child

/div

exportdefaultParent

//子组件：

importReact,{Component}fromreact

classChildextendsComponent{

constructor(props){

super(props)

this.state={}

render(){

console.log(ChildComponentrender)

return(

div

这里是child子组件：

p{this.props.son}/p

/div

exportdefaultChild

打开控制台，我们可以观察到，在点击按钮的时候控制台会输出ParentComponentrender和ChildComponentrender。这表明了子组件和父组件同时被重新渲染。

在这个例子中，点击按钮，仅仅改变了父组件相关的状态，而子组件的状态不变。因此，最理想的情况是只重新渲染父组件，而子组件则不会被重新渲染。

为了提高其性能，我们需要通过某种手段来抑制状态未发生改变的组件的渲染。

2.解决方案之shouldComponentUpdate

shouldComponentUpdate是React生命周期的一个环节，具体的执行位置是react在发生更新之后，render之前。该生命周期方法接收两个参数，nextProps和nextState，返回一个Boolean值来决定该组件是否需要重新渲染。因此，在这个生命周期方法中，我们可以完成将下一个时刻的状态和当前的状态进行对比，并且决定是否重新渲染。这样，就减少了非必要的渲染，达到了我们的目的。

3.解决方案之PureComponent

PureComponent类是一个高阶组件，主要是对于类组件的封装。它实现了将之前的状态和改变之后的状态进行浅比较的功能，通过比较的结果决定当前组件是否需要重新渲染。

浅比较：首先比较两个对象的key长度是否一致，然后检测每一个key是否两者都有，并且是否是一个引用。

使用方法和普通的组件差不多，只是在类组件创建的时候将扩展的Component类变成PureComponent类即可：

importReact,{PureComponent}fromreact

exportdefaultclassmyComponentextendsPureComponent{

//...

render(){

//...