类组件
在React类组件中,告诉我们setState 始终* 会导致重新渲染,无论状态是否实际更改为新值。实际上,当状态更新为之前的 相同 值时,组件 将 重新渲染。 *
setState
Docs(setState API参考):
除非shouldComponentUpdate()返回false,否则setState()将始终导致重新渲染。
挂钩(功能组件)
但是,使用挂钩时,文档将更新状态指定为与先前状态相同的值, 不会 导致(子组件)重新呈现:
Docs(useState API参考):
摆脱状态更新 如果您将State Hook更新为与当前状态相同的值,React将在不渲染子级或激发效果的情况下纾困。(React使用Object.is比较算法。)
摆脱状态更新
如果您将State Hook更新为与当前状态相同的值,React将在不渲染子级或激发效果的情况下纾困。(React使用Object.is比较算法。)
密切相关的问题
this.setState
state
useState
this.setState``render
render
即使新状态值与以前的状态值相同,类组件中的this.setState总是导致重新渲染是否正确?
如果您在setState内设置了一个有效值,而不是返回null,则除非组件是PureComponent或实现了shouldComponentUpdate,否则始终会通过在类组件中进行反应来触发重新渲染
在带有钩子的函数组件中,仅当状态值与先前值不同时,useState中的setState才会导致重新渲染吗?
对于使用useState挂钩的功能组件,如果以相同状态调用设置器,则不会触发重新渲染。但是,在偶尔的情况下,如果立即调用setter,则会导致两次渲染而不是一次渲染
在类组件的render方法中使用this.setState设置状态是否与带有钩子的函数组件的功能体内的设置状态相同?
从技术上讲是可以的,如果在类组件导致无限循环的情况下,直接在render方法中设置状态将导致函数触发重新渲染(如果状态值不同,则对于功能组件而言)。无论如何,它仍然会引起问题,因为由于功能组件直接调用状态更新,任何其他状态更新都将被还原
在类组件中,如果我们在render方法中设置状态,则会发生无限循环。这是因为类组件不在乎新状态是否与先前状态相同。它只是在每个this.setState上保持重新渲染。
是的,因此建议不要在render中直接调用setState
但是,在具有钩子的函数组件中,在函数主体内设置状态(类似于类组件中的render方法,它在重新渲染时运行)不会有问题,因为当看到该功能组件时,它只是摆脱了重新渲染该状态与先前的状态相同。
不是100%正确,因为您可以使用先前的值触发状态更新,以使先前的值和当前值不相同。
setCount(count => count + 1);
在这种情况下,您的组件仍然会陷入无限循环