React生命周期函数详解和注意事项 - 蓝蓝设计_UI设计公司

React生命周期函数详解和注意事项

2018-7-10 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

React生命周期函数

生命周期函数是指在某一个周期自动执行的函数。 

React中的生命周期执行过程

以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行

初始化过程(Initialization)

  • consructor()里面初始化PropsState属性。

挂载过程(Mounting)

  1. componentWillMount():在组件即将被挂载到页面的时刻自动执行。
  2. render():将组件挂载到页面。
  3. componentDidMount():组件被挂载到页面之后立即执行。

更新过程(Updating)

  1. componentWillReceiveProps():一个组件要从父组件接收参数, 只要父组件的render()函数非首次(如果这个组件第一次存在与父组件中不会执行,如果已经存在于父组件中才会执行)执行了,子组件的这个生命周期函数就会被执行。如果组件没有Props属性则直接跳过
  2. shouldComponentUpdate():组件更行之前检查是否需要更新,注意这个函数要有一个布尔类型返回值,如果返回false,这一部分的生周期 函数将不会继续执行,即无论如何组件都不会更新。利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能
  3. componentWillUpdate():组件更新之前。自动执行。但要在shouldComponentUpdate()执行并返回true之后执行。
  4. render():将组件更新到页面。
  5. componentDidUpdate():组件更新完成之后立即执行。

移除过程(Unmounting)

  • componentWillMount():当组件即将被页面剔除时执行。

注意事项



标签: React生命周期函数详解和注意事项


Powered by emlog 京ICP备12006971号-1 sitemap