如果组件在状态中收到相同的值，则会做出反应以重新渲染组件

Question

  

我正在尝试检查是否将与先前相同的值设置为state，是否重新渲染该组件，或者如果发现该值相同，那么它将避免重新渲染。

Answer 1

在React Documentation - shouldComponentUpdate In Action中，他们作为优化性能主题的一部分详细讨论了该问题，并给出了示例。这是示例：

Answer 2

当组件收到相同的值（即，通过===比较的值）时，将重新渲染该组件：

this.setState(state => state);

如果组件状态是一个对象，并且该对象具有通过浅层比较的相同属性进行更新，则它也将被重新渲染：

this.setState(state => ({...state}));

为了避免不必要的重新渲染，组件应为PureComponent：

  

React.PureComponent与React.Component类似。区别   他们之间是React.Component没有实现   shouldComponentUpdate（），但是React.PureComponent用一个   浅层支撑和状态比较。

     

如果您的React组件的render（）函数呈现相同的结果   给定相同的道具和状态，您可以将React.PureComponent用于   在某些情况下可以提高性能。

请注意，由于在React中使用了虚拟DOM，因此重新渲染不一定会导致DOM重新渲染，并且可能具有可接受的性能。