1.前言
1、生命周期总共分为三部分:实例化-存在期-销毁时
2、整个生命周期中,不管props或state发生变化,其DOM都会发生重渲染;
3、每个组件都是一个状态机,有自己的生命周期;
4、相同的组件引用,生命周期一般不会出现互相影响的情况;
2.第一部分:实例化
初始化props;初始化state;虚拟DOM储存在内存;第一次DOM挂载成功;
(以下方法是依次调用的)
1、getDefaultProps:获取默认props传值
对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops 将不会再被调用,其返回的对象 可以用于设置默认的 props 值,而 props 值为只读,不可进行setProps设定。
2、getInitialState:初始化状态参数state
对于组件的每个实例来说,这个方法的调用有且只有一次,用来初始化每个实例的 state,在这个方法里,可以访问组件的 props。每一个React组件都有自己的 state,其与 props 的区别在于 state只存在组件的内部,props 在所有实例中共享,值得一说的是:组件内部的state是允许通过 this.setSate() 进行修改的,每次修改每次重新渲染。
3、componentWillMount:首次渲染前
该方法在首次渲染之前调用,也是在 render 方法调用之前修改 state 的最后一次机会。
4、render:创建虚拟DOM
该方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。
补充:
1. this.props 和 this.state 在这可直接访问,但是不可以set;
2.return的内容包括:null;false;有根的HTML元素;React组件;
3.不能修改DOM的输出;
5、componentDidMount:首次渲染后
该方法被调用时,已经渲染出真实的 DOM,可以再该方法中通过 this.getDOMNode()
访问到真实的 DOM。
补充:
1.由于组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。
2.获取真实DOM节点,我们可以使用 ref 属性,需要注意的是,由于
this.refs.[refName]
属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。var One= React.createClass({ render: function(){ this.getDOMNode(); //render调用时,只会常见xuniDOM,组件未挂载,这里将报错 return <canvas ref='mainCanvas'> }, componentDidMount: function(){ var canvas = this.refs.mainCanvas.getDOMNode(); //挂载成功,可以访问到 Canvas 节点 } })
3.第二部分:存在期(更新)
(应用状态state变化,以下方法是依次调用的)
1、componentWillReceiveProps:更新 state来触发 render重新渲染
组件的 props 属性可以通过父组件来更改,这时,componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。
2、shouldComponentUpdate:应不应该去重新渲染
如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回 false
来阻止组件的重新渲染,返回 `false 则不会执行 render 以及后面的 componentWillUpdate,componentDidUpdate 方法。该方法是非必须的,并且大多数情况下没有在开发中使用。
3、componentWillUpdate:重新渲染前
这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者 state 即将进行重新渲染前,componentWillUpdate() 会被调用,注意不要在此方面里再去更新 props 或者 state。
4、componentDidUpdate:重新渲染后
这个方法和 componentDidMount 类似,在组件重新被渲染之后,componentDidUpdate() 会被调用。可以在这里访问并修改 DOM。
4.第三部分:销毁时
(再次装载组件时,以下方法会被依次调用,详情请看第一部分:实例化)
1、componentWillUnmount:组件从 DOM 中移除之前立刻被调用
2、getInitialState:初始化状态参数state
3、componentWillMount:首次渲染前
4、render:创建虚拟DOM
5、componentDidMount:首次渲染后