React.js如何重新渲染组件？

Question

我是新来的人。我正在浏览他们的文档，以了解React如何工作。因此提到了当state / props / setState（）更改/调用时，react将重新渲染整个组件。

此外，我读到react元素是不可变的，并且仅在发生更改时才呈现它们。因此，当react尝试渲染组件时，它实际上会遍历所有元素以检查差异，并仅渲染其数据已更改的那些元素。它不会简单地重新渲染整个组件。

我对此是否正确？还是我的理解错误？

Answer 1

您是对的，在属性或状态更改时，请重新渲染组件。 话虽如此，当子组件收到新的道具时，react不会检查使用React.Component时道具是否已更改，即使您再次传递相同的道具，它也会重新渲染。

为了使组件仅在它们接收到不同的道具时才呈现，您可以在类组件的情况下使用React.PureComponent，在功能组件的情况下可以使用React.memo()包装组件。

Answer 2

我读到React元素是不可变的，并且只有在发生更改时才呈现它们。

说React元素是不可变的不是真的，您需要处理它们是不可变的，尤其是组件的state and props。

因此，当React尝试渲染组件时，它实际上会遍历所有元素以检查差异，并仅渲染其数据已更改的那些元素。

默认行为是，当父级通过调用setState进行渲染时，会渲染所有子树（这会触发组件子树上的对帐）。

因此，说它将在“数据更改”时渲染组件是不正确的，即使“数据”没有更改，它们仍将默认重新渲染。

说“数据已更改”是指道具更改（默认情况下为浅表比较，请使用备注进行更改）。

我们可以使用key prop来协助对帐流程。

Answer 3

我相信总结React组件何时重新渲染的更清晰方法是：

仅在以下情况下重新渲染反应组件：

1. 状态更改（通过setState()或useState()）
2. 他们通过了新的道具；
3. 其父组件重新呈现。

注意事项：

• 您必须正确更新状态才能重新渲染组件，即通过setState()或useState()。如果状态通过其他方式更改，则“非法”是指，例如直接访问状态，React不会注意到，也不会重新呈现组件。

• 反应道具是只读的，因此当我们说“组件的道具发生变化时”时，我们的意思是当组件通过值更改的通过道具时。道具不应该在组件内变异。

• 如果您使用useMemo()或React.memo()，则子组件仅在父组件重新渲染时（如果接收的道具已更改）才重新渲染。

• 重要的是要区分重新渲染虚拟DOM和更新实际DOM。仅仅因为组件重新渲染并不意味着它已经更新了DOM。重新发布组件时，React会将新版本与以前的版本进行比较，并且仅在1，2发生更改时才更新实际的DOM。