我一直在阅读 React 文档并遇到了shouldComponentUpdate()
. 我的理解是每次setState()
调用时,都会更新该组件的重新渲染。
我的问题是,如果要更新的值与当前状态值相同,是否会触发重新渲染事件?或者我必须手动检查当前值和要更新的值shouldComponentUpdate()
我一直在阅读 React 文档并遇到了shouldComponentUpdate()
. 我的理解是每次setState()
调用时,都会更新该组件的重新渲染。
我的问题是,如果要更新的值与当前状态值相同,是否会触发重新渲染事件?或者我必须手动检查当前值和要更新的值shouldComponentUpdate()
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()
.
在@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
对象尽可能的简单,甚至更好的,一成不变的,这可能有助于简化应用程序的结构,使其更清洁。
我不知道我是否正确理解了您的问题,但只有在虚拟 dom 和真实 dom 之间存在差异时才会重新渲染。
正如 Jyothi 在他的回答中提到的,无论在 set state 函数中传递的值如何,都会调用 render 方法,但重新渲染将取决于此 render 方法返回的内容。