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

Question

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

Answer 1

类组成

setState调用后无条件重新渲染组件。状态是否为相同的值（即通过===比较的值）无关紧要：

this.setState(state => state); // re-render

或通过浅对象比较的相同状态：

this.setState(state => ({...state})); // re-render

为了避免不必要的重新渲染，应使用PureComponent或阻止组件更新shouldComponentUpdate：

React.PureComponent与React.Component类似。它们之间的区别在于React.Component并未实现shouldComponentUpdate（），但是React.PureComponent却通过浅层的属性和状态比较来实现它。

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

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

功能组成

useState功能组件中的钩子提供了有状态类组件的替代方法。主要区别之一是，如果组件具有相同的值（即，通过===比较的值），则不会重新渲染该组件：

const [state, setState] = useState({});
...
setState(state => state); // no-op

否则，将重新渲染组件：

setState(state => ({...state})); // re-render