shouldComponentUpdate机制

本文主要是介绍shouldComponentUpdate机制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

shouldComponentUpdate机制
- 机制
- 使用

ReactNative系列-文章

shouldComponentUpdate机制

机制

在react开发中，经常需要对数据state状态进行改变，但是这种方式每当setState的时候都会将所有的组件重新渲染一遍，这样就会有重复渲染render的问题。

如下图组件树：

默认情况下，当执行setState()方法时，react 会重新渲染整个组件树，这造成不必要的性能开销。
黄色的节点表示我们修改了数据的节点，我们希望只重新渲染这个部分，而其它蓝色的节点是我们不希望重复渲染的。

这时候，实现shouldComponentUpdate()函数可以用来指明在什么样的确切条件下，这个组件得到重绘。当然，对于界面完全由 props 和 state 所决定的组件，你可以利用PureComponent (详情可以去看 -> Component和PureComponent的区别)来为你做这个工作。

下面先回顾react的生命周期：(图片来自网络，侵删)

可以看到在shouldComponentUpdate()函数返回true时，才会触发render钩子。

shouldComponentUpdate()函数默认返回true，可以对其进行自定义的实现：

shouldComponentUpdate(nextProps, nextState) {return nextState.someData !== this.state.someData
}

nextProps: 表示下一个props。
nextState: 表示下一个state的值。

使用

以一个自定义Title组件来分析：

class Title extends React.Component {constructor() {this.state = {name: '标题',};}render() {return (<View className="Title"><Text>{this.state.name}</Text></View>);}
}class Content extends React.Component {constructor() {this.state = {content: '内容',};}componentDidMount() {this.setState({content: '新的内容',});}render() {return (<View className="Content"><Title></Title><Text>{this.state.content}</Text></View>);}
}

当我在Content组件调用setState方法时，Content组件包括其所有的子组件（Title）都会重新render，但是Title组件里并没有state的改变，我不希望它重写render。这时候可以将Title组件改为这样：

class Title extends React.Component {constructor() {this.state = {name: '标题',};}shouldComponentUpdate(nextProps, nextState) {return nextState.name !== this.state.name;}render() {return (<View className="Title"><Text>{this.state.name}</Text></View>);}
}