组件的生命周期:
-
装载过程(Mount):也就是把组件第一次在DOM树中渲染的过程。
-
更新过程(Update):当组件被重新渲染的过程
-
卸载过程(Unmount):组件从DOM中删除的过程
一、装载过程(Mount)
当组件第一次渲染时,依次调用的过程:
1、constructor【*】
(1)不是所有组件均会定义该函数
(2)定义该函数的目的:
- 初始化state
this.state={}
- 绑定当前组件的成员函数的this指向
例如,已有成员函数clickBtn,绑定this指向的方式可以是this.clickBtn=this.clickBtn.bind(this)
。
2、getInitalState
已经过时的方法,不再推荐使用。
- 取而代之的方式是: 在es6语法定义中,在constructor中初始化state。
3、getDefaultPropTyes
已经过时的方法,不再推荐使用。
- 取而代之的方式是: 在es6语法定义中,通过给当前 组件类 属性(不是类的实例对象属性)defaultProps赋值指定props的初始值。
例如,组件类名是Carouse ,那么指定props初始值的方式是Carouse.defaultProps={}
4、componentWillMount
(1)通常不用定义,因为此时还没有渲染出来任何东西,即使修改状态也不会引发重新绘制,可将这里需要定义的事情,都提前到constructor中。
(2)既可在浏览器端使用,又可在服务器端使用
5、render【* * * *】
- 该函数决定了该渲染什么。
- React生命周期函数中要求有返回结果的函数之一,**返回值:**用于构造DOM对象。
(1)render是一个纯函数,完全根据this.state和this.props来决定返回的结果,而不要产生任何副作用。
【render函数中去调用this.setState无疑是错误的,因为一个纯函数不应该引起状态的改变】
(2)render函数并不做实际的渲染动作,它只返回一个jsx描述的结构,最终由React来操作渲染过程。
(3)当某些组件的作用不是渲染界面,或者组件的某些情况下选择没有东西可画,那就让render函数返回一个null或者false。
6、componentDidMount【* * *】
(1)该函数的执行并不是在render函数被调用完之后立刻调用,而是在整个组件被装载到了DOM树上之后才执行,即 React利用全部的render返回的jsx描述的结构进行了渲染之后 才执行。
(2)只能在浏览器端使用
(3)常用场景:
- 通过ajax获取数据来填充组件的内容
- 可以执行jQuery代码,这里只处理了装载过程的jquery代码,要完全和jQuery结合,要考虑React的更新过程中的componentDidUpdate。
7、整个装载过程举例:
import React,{Component} from 'react';
export default class Mount extends Component{
// 1.1 constructor【*】
constructor (props){
super(props);
// 绑定成员函数的this环境
this.fn1=this.fn1.bind(this);
// 初始化state
this.state={
}
}
// 1.2 getInitialState
// 注意:ES6方法定义的react组件是用不到的,等同于this.state
getInitialState(){
}
// 1.3 getDefaultProps
// 注意:ES6方法定义的react组件是用不到的,等同于给类属性defaultProps设置props初始值,Mount.defaultProps
getDefaultProps(){
}
// 1.4 componentWillMount
componentWillMount(){
}
// 1.5 render【**】
render(){
return (
<div></div>
)
}
// 1.6 componentDidMount【***】
componentDidMount(){
}
// 其他:
// 成员函数fn1
fn1(){
}
}
// 通过给组件Mount 类 属性defaultProps设置,用于props设置初始值
Mount.defaultProps={
};
二、更新过程(Update)
为了提供更好的交互体验,要使该组件随着用户的操作改变展现的内容。
- 即 当props或者state被修改的时候,就会引发组件的更新过程。
- 并不是所有的更新过程都会执行全部的生命周期函数。
依次调用的生命周期函数:
1、componentWillReceiveProps(nextProps)
(1)何时调用该函数?
只要是父组件的render函数被调用,在render函数里面被渲染的子组件就会经历更新的过程;
不管父组件传给子组件的props有没有改变,都会触发子组件的componentWillReceiveProps函数。
- **注意:**通过this.setState方法触发的 更新过程 不会调用这个函数。
每个react组件都可以通过forceUpdate函数强行引发依次重绘。
(2)形参nextProps代表:这一次渲染传入的props值,是一个对象。
(3)常用场景:
将参数nextProps和this.props做必要对比,只有两者有变化时,才有必要调用this.setState更新内部状态。
2、shouldComponentUpdate(nextProps,nextState) 【* * * *】
- 该函数决定了一个组件什么时候不需要渲染。
- React生命周期函数中要求有返回结果的函数之一,**返回值:**布尔值,告知React库这个组件在本次更新过程中是否要继续。
(1) 在更新过程中,React首先调用该函数,返回值是true,继续更新过程;返回值是false,立刻停止更新过程,也就不会引发后续的渲染了。
(2)形参nextProps,nextState代表:最新的props和state值。
(3)通过形参和this.props,this.state互相对比结果,返回布尔值,决定是否要继续更新过程。(默认是返回true,无论是否一样,都会继续更新过程)从而优化性能。
(4)通过this.setState函数引发的更新过程,并不是立刻更新组件的state值,在执行到函数shouldComponentUpdate的时候,this.state依然是this.setState函数执行之前的值。
3、componentWillUpdate
4、render
同 装载过程 中的render。
5、componentDidUpdate
(1)既可在浏览器端,又可在服务器端。不同于装载过程中的componentDidMount。
但是,基本上不会在服务器端调用该函数,如果调用了, 说明程序有错误,需改进。
(2)组件被更新时,在该函数中可执行其他UI库代码,如jQuery代码。
三、卸载过程(Unmount)
当React组件要从DOM树上删除掉之前,该函数调用。
1、componentWillUnmount
该函数中的工作通常和componentDidMount有关。
**注意:**当componentDidMount中用非React方法创造了一些DOM元素,就需要在该函数中把这些创造的DOM元素清理掉。