react小记 组件的生命周期

react组件的生命周期,分为三个过程:

1,装载过程(mount),也就是把组件第一次在DOM中渲染的过程,

2,更新过程(update),当组件被重新渲染的过程,

3,卸载过程(unMount),组件从DOM中删除的过程。

三种不同的过程,React库会依次调用组件的一些成员函数,这些函数称为生命周期函数。所以要定制一个React组件,实际就是定制这些生命周期函数。


装载过程,当组件第一次被渲染的时候,依次调用的函数如下:

constructor,getInitialState,getDEfaultProps,componentWillMount,render,componentDidMount


优化:在render函数中调用this.setState毫无疑问是错误的,因为一个纯函数不应该引起状态的改变。


装载过程:

componentWillMount和componentDidMount这对兄弟函数还有一个区别,就是coponentWillMount可以在服务器端被调用,也可以在浏览器端被调用。而componentDidMount只能在浏览器端被调用,在服务器端使用React的时候不会被调用。

更新过程:

更新过程会依次调用下面的生命周期函数,其中render函数和装载过程一样,没有差别。

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

1,componentWillReceiveProps,只要是父组件的render函数被调用,在render函数里面被渲染的子组件就会经历更新过程,不管父组件传给自组件的props有没有改变,都会触发子组件的componentWillReceiveProps函数。

通过this.setState方法触发的更新过程不会调用这个函数,这是因为这个函数适合根据新的props值来计算出是不是要更新内部状态state。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 生命周期流程图简单如下: 组件让你把用户界面分成独立的,可重复使用的部分,并且将每个部分分开考虑。React.Co...
    Simple_Learn阅读 1,094评论 0 0
  • React 组件的一生,是光荣的一生,是革命的一生,在它的一生中会经历这样几个阶段: 装载阶段 更新阶段 销毁阶段...
    柏丘君阅读 1,013评论 0 0
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,849评论 0 1
  • 感恩万能的朋友圈刚才在朋友圈看到,一位朋友发的文字:只要你具足菩提心,人生所有美好的东西都会像雨露一样降临到你身上...
    武丹yoyo阅读 315评论 0 2