react生命周期笔记

组件的生命周期分成三个状态

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

Mounting(装载)

  • getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
  • componentWillMount():服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。不会触发再次渲染。
  • componentDidMount():在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用),可以设置state,会触发再次渲染,组件内部可以通过

Updating (更新)

  • componentWillReceiveProps(nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。通常可以调用this.setState方法来比较this.props和nextProps的执行状态,完成对state的修改。在该函数中调用 this.setState() 将不会引起第二次渲染。
  • shouldComponentUpdate(nextProps,nextState): 在接收到新的 props 或者 state,将要渲染之前调用。该方法用来拦截新的props或state,然后判断是否更新组件

该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

  • componentWillUpdate(nextProps, nextState):在接收到新的 props 或者 state 之前立刻调用,即更新之前调用

在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。

注意:你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps。

  • componentDidUpdate(prevProps, prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。

该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

Unmounting(移除)

  • componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理,收尾工作,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

image

参考文章:

  • React-Native之React速学教程-(中)
  • react生命周期

你可能感兴趣的:(react生命周期笔记)