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

IT技术 reactjs
2021-05-06 11:23:20

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

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

3个回答

React 官方文档指出:

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

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

这意味着默认情况下,render()如果任何组件stateprops值发生更改将执行

您可以使用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 可以提高应用程序的性能。此外,它强制你保持stateprops对象尽可能的简单,甚至更好的,一成不变的,这可能有助于简化应用程序的结构,使其更清洁。

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

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