React组件的生命周期

91 阅读2分钟

React组件的生命周期分为三大部分

  • 挂载 (Mount):组件第一次在DOM树中渲染
  • 更新(Update) :更新组件更新,即重渲染
  • 卸载 (Unmount)把组件从DOM树中删除

React中生命周期函数

生命周期函数 (7个,废掉了3个还剩4个)

  • componentWillMount : 组件将要被染,还没染,没东西(17废掉,但可以使用)
  • componentDidMount:组件渲染完成(组件进入运行状态)[重点: 网络请求,绑定事件]
  • shouldComponentUpdate: 是否允许组件更新(这个函数中必须有返回值,如果返回true,表示允许更新;如果返回false,表示不允许更新;默认允许)[问询函数]
  • componentWillUpdate:组件将要开始更新 (17废掉,但可以使用)
  • componentDidUpdate: 组件更新完成(重新进入运行状态)
  • componentWillReceiveProps: 组件接收props更新 (17废掉,但可以使用)
  • componentWilUnmount: 组件将要卸载,还可以访问this,this.setState()只执行一次[重点: 收尾工作,清空定时器]

组件的挂载

但件衣创建后进行第-的渲染挂载期。挂载期有的一些方法会被依次触发,列举如下:

  • constructor(构造函数,数据初始化)
  • componentWillMount(首次渲染前技行)
  • render(渲染组件)
  • componentDidMount(render渲染之后执行的操作!

组件的更新

  • componentWillReceiveProps :当父组件更新子组件state时,该方法会被调用。
  • shouldComponentUpdate : 该方法决定组件state或props的改变是否需要重新渲染
  • componentWillUpdate:在组件接受新的state或者props时,即将进行重新渲染前调用该方法
  • componentDidUpdate:在组件重新染后调用该方法

组件的卸载

生命周期的最后一个过程为组件卸载期,也称为组件销毁期。该过程主要涉及一个 方法。 componentWillUnmount,当组件从DOM树删除的时候调用该方法