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

IT技术 reactjs
2021-05-08 23:35:34

我是新来的react。我正在阅读他们的文档以了解 react 的工作原理。所以提到当 state/props/setState() 改变/调用时,react 会重新渲染整个组件。

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

我对此是否正确?还是我的理解有误?

4个回答

你是对的,当 props 或 state 发生变化时,react 会重新渲染组件。话虽如此,当子组件收到新的 props 时,react 不会检查在您使用时 props 是否已更改React.Component,即使您再次传递相同的 props,它也会重新渲染。

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

我读到 React 元素是不可变的,只有在发生变化时才会呈现它们。

说 React 元素不可变是不正确的,你需要它们视为不可变的,尤其是组件的state 和 props

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

默认行为是在父级通过调用重新渲染渲染所有子树setState(这会触发组件子树上的协调)。

所以说它会在“数据更改”时渲染组件是不正确的,默认情况下它们会重新渲染,即使“数据”没有改变。

在说“数据已更改”时,我们指的是props更改(默认情况下是浅比较,使用记忆来更改它)。

我们可以使用keyprop来帮助协调过程。

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

React 组件在且仅在以下情况时重新渲染:

  1. 他们的状态改变(通过setState()useState()
  2. 他们传递了新的props;
  3. 它们的父组件重新渲染。

注意事项:

  • 您必须正确更新组件才能重新渲染,即通过setState()useState()如果 state 通过其他“非法”的方式改变,比如直接访问 state,React 不会注意到,也不会重新渲染组件。

  • React props 是只读的,所以当我们说“当一个组件的 props 改变时”,我们真正的意思是当组件传递具有改变值的 props 时。props 不应在组件内发生突变。

  • 如果你使用useMemo()React.memo(),那么子组件只会在父组件重新渲染时重新渲染,如果它接收到的props发生了变化。

  • 区分重新渲染虚拟 DOM 和更新实际 DOM 很重要。仅仅因为组件重新渲染并不意味着它更新了 DOM。当一个组件重新渲染时,React 会将新版本与之前的版本进行比较,并且只有在12发生变化时才会更新实际的 DOM

没有什么比A. Sidorenko 的这份备忘单更清楚地说明了这一点

编辑:基本上是的,任何状态更改都会触发重新渲染。这包括启动状态更改的组件及其所有子组件。例如,如果您的作文是:

A > B > C

如果 A 的状态更新,则 A、B 和 C 将重新渲染。有一些方法可以防止重新渲染子组件(例如 memo、useMemo),因此我向您指出上面提到的备忘单以获得完整的详细信息。