Question

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

有没有办法避免更新React.PureComponent？

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

编辑：我在pureComponent中使用shouldComponentUpdate时收到此警告：

警告：GameObjectFall有一个名为shouldComponentUpdate（）的方法。扩展React.PureComponent时不应使用shouldComponentUpdate。如果使用了shouldComponentUpdate，请扩展React.Component。

Answer 1

PureComponent更改生命周期方法shouldComponentUpdate并添加一些逻辑以自动检查组件是否需要重新渲染。这允许PureComponent仅在检测到状态或道具的更改时调用方法呈现，因此，可以在不必编写额外检查的情况下更改许多组件中的状态。

但是，您还可以使用经过验证的方法shouldComponentUpdate来手动确定重新渲染的必要性。它不会覆盖PureComponent逻辑，但会添加您在shouldComponentUpdate的自定义实现中添加的任何其他内容

查看说明此内容的摘录

＆＃13;

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'));

＆＃13;

<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"/>

＆＃13;

Answer 2

根据PureComponent Documentation，它只在shouldComponentUpdate()进行浅层比较。因此，如果所有道具都包裹在一个对象中，并且如果改变该对象中的属性，则组件将不会重新渲染，因为浅层比较将始终为true。

作为一个假设propContainer = {name: "John", age: "20"}和this.props.container = propContainer的示例， propContainer 对象中的变异（更改名称，年龄值）将不会重新呈现该组件。

Answer 3

使用PureComponent时，方法shouldComponentUpdate的实现仅进行浅层比较。当你的道具是布尔，字符串或任何其他原始类型时，你应该使用它。

您可以将实施实施到shouldComponentUpdate，这将覆盖默认的浅层比较。

当我说浅层比较时，我的意思是如果你在对象/数组之间进行比较，你会得到错误的比较。例如：

const first = { key: 'value' };
const second = { key: 'value' };
if (first === second) {
    // You won't get here
}

React PureComponent中的shouldComponentUpdate实现

3 个答案: