react 生命周期

Posted 逃学威龙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 生命周期相关的知识,希望对你有一定的参考价值。

1、void constructor函数,构造函数,后面的博文会仔细研究该函数。

2、void componentWillMount();

组件初始化会执行这个函数,字面意思是组件将要挂载了,这个函数只在组件挂载前执行,在以后的更新渲染过程中并不参与,重要的是在这个函数内进行ajax请求后台的数据,然后调用setState进行渲染并不会去调用更新函数,这里的好处是不会因为setState而影响初始化的过程。

3、render

 react的核心的函数,通过return进行界面渲染,千万不要在此处调用setState或者其他重新渲染的函数,否则。。死循环。

4、void componentDidMount();

也是组件初始化会调用该函数,但是和 componentWillMount不同的是此处执行setState会调用更新函数,所有界面数据请求还是写在componentWillMount中效率高。

5、void componentDidUnmout();

组件卸载函数,说是卸载,但是如果刷新浏览器或者关闭浏览器都不会执行该函数,初步研究是在组件被替换后执行。

6、void componentWillReceiveProps(props);

在这里把拥有这些函数的组件称为子组件而把这个组件被引用的组件称为父组件,该子组件被引用是可以有些属性的,这些组件是父子间对话的通道,父组件可以向子组件传值,子组件可以调用父组件的方法来到达子向父传值。当父组件的render函数重新执行时会调用子组件的 componentWillReceiveProps的这个方法,这里注意父组件初始化时并不会调用这个方法,当父组件更新时才会调,还有个需要注意的是只有该子组件是静态加载时才会有调这个方法的可能,静态的意思是在父组件的render函数中而不是通过父组件的setState去加载。

7、void componentShouldUpdate(props,state); 

在任何更新前都会执行这个函数,作用是判断是否执行更新,做法是通过返回true来执行更新false阻止更新,目前还没有用到过阻止更新的。。。但愿也用不到。

8、void  componentWillUpdate();

字面意思是组件将更新,在 componentShouldUpdate 返回true后会执行该函数。

9、void componentDidUpdate();

 组件更新完后会执行该函数。


 

以上是关于react 生命周期的主要内容,如果未能解决你的问题,请参考以下文章

react 生命周期

React生命周期详解

React组件的生命周期函数

react新的生命周期函数getDerivedStateFromProps

react生命周期详解

react native 生命周期详解