一、组件
(1) 函数组件
如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value} </button>
);
}
(2) React.Component
shouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变,那么这个组件不会更新
class CounterButton extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
}
(3) PureComponent
如果你的组件更复杂一些,你可以使用类似“浅比较”的模式来检查 props 和 state 中所有的字段,以此来决定是否组件需要更新。React 已经提供了一位好帮手来帮你实现这种常见的模式 - 你只要继承 React.PureComponent 就行了。
class CounterButton extends React.PureComponent {}
大部分情况下,你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较 (例如:1 == 1或者ture==true,数组和对象引用是否相同),所以当 props 或者 state 某种程度是可变的话,浅比较会有遗漏,那你就不能使用它了。
不要在props和state中改变对象和数组,如果你在你的父组件中改变对象,你的PureComponent将不会更新。虽然值已经被改变,但是子组件比较的是之前