码迷,mamicode.com
首页 > 其他好文 > 详细

react 生命周期函数

时间:2018-09-26 17:15:52      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:方案   .com   const   代码   工作   第一个   实现   页面   启动   

1.constructor():构造函数

  • 执行时间:组件被加载前最先调用,并且仅调用一次
  • 作用:定义状态机变量
  • 注意:第一个语句必须是super(props),正确定义状态机代码如下
  1.  
    constructor(props) {
  2.  
    super(props);
  3.  
    this.state = {
  4.  
    content:null,
  5.  
    }
  6.  
    }
  • 如果第一句不使用super(),错误代码及报错如下
  1.  
    constructor(props) {
  2.  
    this.state = {
  3.  
    content:null,
  4.  
    }
  5.  
    }
技术分享图片

2.componentWillMount()

  • 执行时间:组件初始渲染(render()被调用前)前调用,并且仅调用一次
  • 作用:如果在这个函数中调用setState改变某些状态机,react会等待setState完成后再渲染组件
  • 注意:子组件也有componentWillMount函数,在父组件的该函数调用后再被调用

3.render()

  • 执行时间:componentWillMount之后,componentDidMount之前,
  • 作用:渲染挂载组件
  • 触发条件:(1)初始化加载页面(2)状态机改变setState ( 3 ) 接收到新的props(父组件更新)
  • 注意:组件所必不可少的核心函数;不能在该函数中修改状态机state

4.componentDidMount()

  • 执行时间:render之后被调用,并且仅调用一次
  • 作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)
  • 注意:子组件也有该函数,在父组件的该函数调用前被调用;如果在该函数中修改某些状态机state,会重新渲染render组件,所以有些组件为减少渲染次数,可以将某些修改状态机的操作放在componentWillMount函数中;如果需要再程序启动显示初始化页面后从网路获取数据,可以将网络请求代码放在该函数中

5.componentWillReceiveProps(nextProps)

  • 执行时间:组件渲染后,当组件接收到新的props时被调用;这个函数接收一个object参数(新的props);props是父组件传递给子组件的。父组件发生render的时候子组件就会调用
  • 作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)
  • 注意:react初次渲染时,该函数并不会被触发,因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数,首次使用了解的可以先打印结果(console.log(nextProps))

6.shouldComponentUpdate(nextProps, nextState)

 
  • 执行时间:组件挂载后(即执行完render),接收到新的state或props时被调用,即每次执行setstate都会执行该函数,来判断是否重新render组件,默认返回true;接收两个参数:第一个是心的props,第二个是新的state。
  • 作用:如果有些变化不需要重新render组件,可以在该函数中阻拦
  • 注意:该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会

7.componentWillUpdate()

  • 执行时间:在接收到新的props 或者 state,重新渲染 之前立刻调用,在初始化渲染的时候该方法不会被调用
  • 作用:为即将发生的重新渲染做一些准备工作
  • 注意:不能再该函数中通过this.setstate再次改变状态机,如果需要,则在componentWillReceiveProps函数中改变

8.componentDidUpdate()

  • 执行时间:重新渲染后调用,在初始化渲染的时候该方法不会被调用
  • 作用:使用该方法可以在组件更新之后操作DOM 元素

9.componentWillUnmount()

  • 执行时间:组件被卸载前调用,
  • 作用:在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

10.特别注意

  • 当一个页面中存在子父组件时,要注意componentWillMount和componentDidMount的使用,如果需要先加载父组件(获取网路数据),父组件传值给子组件,再加载子组件(获取网路数据),那么不能同时在子父组件中使用componentDidMount获取网路数据,因为会先执行子组件的componentDidMount,会由于未得到父组件的传值而报错;解决方案:(1)父组件:componentWillMount,子组件:componentDidMount;(2)父组件:componentWillMount,子组件:componentWillMount;
  • 当一个页面中如要实现左右联动效果,(比如:a页面中包含b1(左)和b2(右)页面,单击b1中的知识点,b2页面内容对应变化,b1向b2通过redux传参,b2首次通过 componentDidMount接收,后来通过componentWillReceiveProps接收)

--------------------- 本文来自 只如初见0706 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/zrcj0706/article/details/78608740?utm_source=copy 

react 生命周期函数

标签:方案   .com   const   代码   工作   第一个   实现   页面   启动   

原文地址:https://www.cnblogs.com/boonook/p/9707679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!