文章 标签 分类

「译」如何使用React生命周期方法

 收录于  类别 React
     约 1844 字  预计阅读 4 分钟 

原文链接：How to use React Lifecycle Methods

大体上分三类

  • Mount
  • Update
  • Unmount
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
  • componentWillReceiveProps() / static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • componentWillUpdate() / getSnapshotBeforeUpdate()
  • render()
  • componentDidUpdate()
  • componentWillUnmount()
1

componentWillMount()

当 React 渲染一个组件的是你，首先进入该方法。

Note：componentWillMount()是唯一一个在render()之前调用的生命周期方法。因此是在服务端渲染中唯一被调用的方法。

因为componentWillMount()将被删除，所以官方推荐使用constructor()替代该方法

**Update：**该方法应该在新的代码中避免使用

可以在该方法中使用this.setState()但是不一定触发重新渲染。

1

componentDidMount()

当该方法被调用时候，React 已经渲染了组件并且将组件插入 DOM。因此如有有任何依赖于 DOM 的初始化，应该放在这里。

该方法中可以使用this.setState()方法，它将触发重新渲染。

  • fetch data
  • 依赖 DOM 初始化
  • 添加事件监听
1

componentWillReceiveProps(nextProps)

当组件接收到新的props，该方法会首先被调用，但是需要注意一点，即使props并没有发生改变，该方法也会被调用，所以使用该方法的时候要确保比较this.props和nextProps，避免不必要的渲染。

Update：componentWillReceiveProps将被移除，使用新的static getDerivedStateFromProps代替。

1

static getDerivedStateFromProps(props, state)

每次render都会调用该方法——即使props没有发生变化。所以要谨慎使用。

1

shouldComponentUpdate(nextState, nextProps)

有些时候需要避免不必要的渲染，可以使用该方法。返回false意味着 React 不执行componentWillUpdate()，render()，componentDidUpdate()。

该方法在初始化时候不执行。

**Note：**根据 React 文档，React 可能将shouldComponentUpdate视做提示而不是严格的根据它的返回结果决定是否执行，也就是说可能出现shouldComponentUpdate返回false，但是还是发生重新渲染。

在该方法中不可以设置setState。

如前所述，该方法可能有有问题。React 官方提供了另一个解决办法，所以如果发现某个组件慢，可以使用React.PureComponent替代React.component，它将对props和state提供一个浅层对照。

1

componentWillUpdate(nextProps, nextState)

该方法在被渲染前调用。shouldComponentUpdate在新的props进入组件或者state改变的时候调用。

该方法在初始渲染时候不被调用。

Update：shouldComponentUpdate即将被移除。

在该方法中不能调用setState。

shouldComponentUpdate方法在render()前会被准确调用，所以在该方法中做任何跟 DOM 相关的操作是不合适的，因为很快会过期。

常见的用例有：

  • 根据state的变化设置变量
  • 派发事件
  • 开始动画
1

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 React 16.3 被添加并且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的所有用例。

getSnapshotBeforeUpdate在元素被渲染并写入 DOM 之前调用，这样，你在 DOM 更新前捕获 DOM 信息（例如：滚动位置）。

应该返回一个snapshot值或null，无论返回什么，shouldComponentUpdate都可以接收到snapshot参数。

如果想要获得一个 list 或者一个聊天窗口中的滚动位置，可以在getSnapshotBeforeUpdate中取到这些信息。然后将滚动信息作为snapshot值返回。这允许在shouldComponentUpdate中是设置正确的滚动位置在 DOM 更新后。

1

componentDidUpdate(prevProps, prevState, snapshot)

React 更新组件后，调用componentDidUpdate。该方法在初始渲染时候不会被调用。

如果组件更新后需要操作 DOM，可以使用该方法。

1

componentWillUnmount()

在卸载，销毁组件之前调用该方法。

在卸载组件时候不能设置 State

使用该方法清理 actions。

  • 删除在componentDidMount或其他地方添加的事件监听
  • 断开网络请求
  • 清空计时器
  • 清理在componentDidMount中创建的 DOM 元素
更新于 2018-07-28
 React
返回 | 主页