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

Question

我一直在阅读React文档并遇到过shouldComponentUpdate().我的理解是,每次setState()调用时,都会更新该组件的重新渲染.

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

Answer 1

官方的React文档说明:

默认行为是在每次状态更改时重新呈现...

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

这意味着默认情况下,render()如果任何组件state或props值发生更改,将执行此操作.

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

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

注意:此示例完全忽略props.因此,任何更改props都不会触发render().

Answer 2

在@Jyothi 关于实现shouldComponentUpdate()跳过不必要的重新渲染的答案中添加了更多内容，React 15.3他们引入了一个新概念PureComponent。来自reactjs 文档

它们之间的区别在于 React.Component 没有实现 shouldComponentUpdate()，而是 React.PureComponent 通过一个浅层的 prop 和 state 比较来实现它。

这允许render通过仅实现PureComponent而不是通常的Component. 但是有一些警告PureComponent，来自关于React.PureComponent's的文档shouldComponentUpdate()：

... 仅对对象进行浅层比较。如果这些包含复杂的数据结构，则可能会对更深层次的差异产生假阴性。

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

PureComponent在某些情况下使用can 可以提高应用程序的性能。此外，它强制你保持state和props对象尽可能的简单，甚至更好的，一成不变的，这可能有助于简化应用程序的结构，使其更清洁。

Answer 3

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

正如 Jyothi 在他的回答中提到的，无论设置状态函数中传递的值如何，都会调用 render 方法，但重新渲染将取决于此 render 方法返回的内容。