1,constructor()函数
*执行的时间:组件被加载前最先调用,并且仅调用一次
*作用:定义状态机变量
*注意:第一个语句必须是super(props),正确定义状态机代码如下:
constructor(props){
super(props),
this.state={
content:null
}
}
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参数,首次使用了解的可以先打印结果(nextProps);
6.shouldComponentUpdate(nextProps,nextState)
*执行时间:组件挂载后(即执行完render),接受到新的props和state时被调用,即每次执行setState都会执行该函数,来判断是否重新render组件,默认返回true;接受两个函数,第一个是新的props,第二个是新的state,
*作用:如果有些变化不需要重新render组件,可以在该函数中阻拦。
*注意:该方法在初始化渲染的时候不会调用,在使用forceUpdate方法的时候也不会。
7.componentWillUpdate()
*执行时间:在接受到新的props或者state,重新渲染之前立刻调用,在初始化渲染的时候不会被调用,
*作用:为即将发生的重新渲染做一些准备工作
*注意:不能在该函数中通过this.setState再次改变状态机,如果需要,则在componentWillReceiveProps函数中改变
8:componentDidUpdate()
*执行时间:重新渲染后调用,在初始化渲染时该方法不会被调用,
*作用:使用该方法可以在组件更新之后操作DOM元素
9.componentWillUnmount()
*执行时间:组件被卸载前调用
*作用:在该方法中执行任何必要的清理,比如无效的定时器,或者清除在componentDidMount中创建的DOM元素。
注意:*当一个页面中存在子父组件时,要注意componentWillMount和componentDidMount的使用,如果需要先加载父组件(获取网路数据),父组件传值给子组件,再加载子组件(获取网路数据),那么不能同时在子父组件中使用componentDidMount获取网路数据,因为会先执行子组件的componetDidMount,会由于未得到父组件的传值而报错。解决方案:(1)父组件componentWillMount,子组件:componentDidMount,(2)父组件:componentWillMount,子组件:componentDidMount
*当一个页面中如果要实现左右联动的效果,(比如a页面中包含b1(左)和b2(右)页面,单击b1中的知识点,b2页面内容对应变化,b1向b2通过redux传参,b2首次通过componentDidMount接收,后来通过componentWillReceiveProps接收)
参考来源:https://blog.csdn.net/zrcj0706/article/details/78608740