React.js 组件生命周期 - 更新阶段

更新生命周期可以由两个事件触发：

• 父组件更新 props
• 本地状态发生变化

父组件更新 props

• componentWillReceiveProps(nextProps) −
  • 这是在 props 发生变化时调用的第一个方法。它包含一个参数 nextProps，表示新更改的 props。
  • 在这里，如果需要，我们可以将本地状态与 props 同步。
  • 如果状态不需要与 props 同步，则可能不需要实现此方法。
  • 应避免在此处引发副作用。因为如果在此处使用副作用，可能会导致重新渲染或性能问题。

现在，componentWillReceiveProps 已被弃用，并由静态方法 getDerivedStateFromProps(props,state) 替换。顾名思义，该方法清楚地表明了其用途。

每当我们想要从新的 props 中计算或派生状态时，都应该使用上述方法。

• shouldComponentUpdate(nextProps, nextState) −
  • 此方法返回一个布尔值 true 或 false。根据返回值，React 执行 render 方法，该方法更新实际的 DOM。
  • 如果需要，我们可以在此方法中添加自定义逻辑，例如比较一些变量以决定更新过程。
  • 应避免副作用。
• ComponentWillUpdate(nextProps, nextState) −
  • 当 shouldComponentUpdate 返回 true 时，此方法执行一次。
  • 这可能是将状态与 props 同步的更好位置，因为它肯定即将渲染。

  • 在此处也应避免副作用。

    现在，componentWillUpdate 已被弃用。最新的方法是 getSnapshotBeforeUpdate，它可以在极少数情况下使用。例如，识别元素的滚动位置。此方法在实际更新 DOM 之前执行。

• Render −
  • render 方法的执行决定了在与虚拟 DOM 比较后需要更新实际 DOM 的哪些更改。
  • 像往常一样，它将根据更新条件准备 jsx 代码。
  • 它还将处理子组件的更新。
  • 我们可以从 render 方法中返回几乎任何东西，例如布尔值、null、字符串、数组、div、片段等。
• componentDidUpdate
  • 在这里，我们可以执行副作用。
  • 但是使用 setState 更新状态应该谨慎操作。它应该仅在有条件的情况下更新，以避免无限的 API 调用循环。
  • 因为 componentDidUpdate 在每次 render 方法调用后的每次更新时都会被调用。

由内部更改触发的更新

• 如果使用 setState 更改了 state 对象，则会调用此更新周期。此周期从 shouldComponentUpdate 直接开始，因为我们在上面显示的其他方法处理 props，而这里我们没有更改 props。
• shouldComponentUpdate 之后的调用层次结构将保持不变。

• shouldComponentUpdate=>componentWillUpdate=>render=>更新子组件=>componentDidUpdate

  可以使用浏览器开发者工具检查实际 DOM 上元素的更新，以查看影响或性能问题。

  如果我们使用 F12 或检查元素，并点击该检查窗口右侧的三个垂直点，我们可以看到以下选项。

点击更多工具=>渲染

点击复选框“绘制闪烁”。每当页面上的元素更新时，它都会突出显示。

使用此工具是为了检查哪些元素正在更新，并查找任何性能问题。我们可以使用此工具避免不必要地更新某些元素。

Shyam Hande

更新于：2019年9月4日

287 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习