reactjs - React PureComponent 中的 shouldComponentUpdate 实现

Question

我正在使用PureComponent为了在我的 React 应用程序中获得更好的性能，它有 props但我不希望它在 props 时运行渲染方法改变了。我知道我们不能使用shouldComponentUpdate在React.PureComponent但我的问题是:

有什么办法可以避免更新React.PureComponent ？

我希望这个组件根本不更新/渲染。

编辑:我在使用 shouldComponentUpdate 时收到此警告在纯组件中:

Warning: GameObjectFall has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

Answer 1

PureComponent 更改了生命周期方法 shouldComponentUpdate 并添加了一些逻辑来自动检查组件是否需要重新渲染。这使得 PureComponent 仅在检测到状态或 props 发生变化时才调用方法 render，因此，人们可以更改许多组件中的状态，而无需编写额外的检查。

但是，您还可以使用经过验证的方法 shouldComponentUpdate 来手动确定新的重新渲染的必要性。

它不会覆盖 PureComponent 逻辑，但会添加您在 shouldComponentUpdate 的自定义实现中添加的任何其他内容

从 v16.9.0 开始，React 抛出以下警告

Warning: shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

查看说明这一点的片段

class App extends React.Component {
  state = {
    count1: 0,
    count2: 0,
    count3: 0
  }
  
  increment = (key) => {
     this.setState(prevState => ({[key]: prevState[key] + 1}))
  }
  
  render() {
    console.log('render parent');
    return (
      <div>
         {this.state.count1}
         <Child count={this.state.count1} countNew={this.state.count3}/>
         <button onClick={() => this.increment('count1')}>IncrementOne</button>
         <button onClick={() => this.increment('count2')}>IncrementTwo</button>
      </div>
    )
  }
}

class Child extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
      console.log('scu');
      if (nextProps.count !== this.props.count) {
        return false;
      }
   }
   render() {
       console.log('render child');
      return (
        <div>Child: {this.props.count}</div>
      )
   }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>