ReactJS，使用相同的参数调用setState

Question

我一直在阅读React文档并碰到shouldComponentUpdate()。我的理解是每次调用setState()时，该组件的重新渲染都将被更新。

我的问题是，如果要更新的值是SAME作为当前状态值，是否会触发重新呈现事件？或我必须手动检查当前值和值将在shouldComponentUpdate()

Answer 1

官方更新阵营文档状态：

的默认行为是对每一个状态变化重新渲染...

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

这意味着通过默认，render()将被执行，如果任何一个组件的state或的210值发生变化。

您可以使用shouldComponentUpdate()覆盖此默认行为。这是一个仅在状态值更改时才更新的示例。

shouldComponentUpdate(nextProps, nextState) { 
    return this.state.someValue !== nextState.someValue; 
} 

注意：此示例完全忽略了props。所以，对props的任何更改都不会触发render()。

Answer 2

我不知道我是否正确理解你的问题，但只有在虚拟dom和真实dom之间存在差异时才会重新呈现。

而且，Jyothi在他的回答中提到，render方法将被调用，而不管集合状态函数中传递的值是什么，但是渲染将取决于render方法返回的内容。

Answer 3

在@ Jyothi的回答中增加了更多关于执行shouldComponentUpdate()以跳过不必要的重新渲染，React 15.3他们引入了一个新概念PureComponent。从reactjs docs

它们之间的区别是，React.Component没有实现 shouldComponentUpdate（），但React.PureComponent与 浅道具和状态对比实现它。

这使得仅通过实施PureComponent而不是通常的Component跳过的类组件render不必要的调用。有与PureComponent几个注意事项虽然，约React.PureComponent的shouldComponentUpdate()文档：

...只有比较浅的 对象。如果这些数据结构包含复杂的数据结构，则可能会产生 误差更大的差异。

...跳过整个组件子树的prop更新。确保所有 儿童组件都是“纯”的。

使用PureComponent可以在某些情况下提高应用程序的性能。此外，它还会强制您将对象保持为尽可能简单，甚至更好，不可变，这可能有助于简化应用程序结构并使其更加简洁。