码迷，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）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！