大家好，小信来为大家解答以上问题。react生命周期总结，react生命周期很多人还不知道，现在让我们一起来看看吧！
1、 我们先来看一张图，关于react中每个周期的进程。
2、 从这个图中，我们知道在组件的生命周期中有十种方法。
3、 1.首先，getDefaultProps()方法设置默认的组件属性(this.props)，
4、 2.方法，然后getInitialState()方法设置默认状态(this.state)，
5、 3.一旦设置了组件的属性和状态，就该准备呈现组件了，也就是componentWillMount()方法。
6、 4.准备工作完成后，就是正式的渲染组件，也就是render()方法。
7、 5.方法，ok。渲染后组件完全变成DOM节点，这就是组件渲染完成方法componentDidMount()。
8、 6.当组件渲染完成时，可能会出现这些情况。
9、 情况一：物业变动。
10、 7.一旦属性被更改，组件将接收属性更改，即componentWillReceiveProps()方法，
11、 8.方法。当然react这个时候还是会给你反悔的机会，就是会执行shouldComponentUpdate方法。如果不想让他更新，就返回false。如果没有返回false，那么他将调用componentWillUpdate()方法来被组件更新。
12、 9.方法，然后执行render()方法来更新呈现组件。最后，呈现更新完成componentDidUpdate()，然后返回运行状态。当然，如果您阻止组件更新并传入false，那么组件将直接忽略此更改。
13、 属性，而不更改运行状态。
14、 情况二：状态变化。
15、 一旦运行组件的状态发生变化，接收组件属性变化的componentWillReceiveProps()方法自然不会被触发，如果要阻止组件的更新，它会直接跳转到下一步，执行shouldComponentUpdate()方法。那么接下来的过程也是一样的。
16、 案例3:从DOM节点中移除组件
17、 方法10，属性或状态不变，但是呈现的组件直接从DOM节点中移除，这将触发方法componentWillUnmount()
18、 这样，组件的生命周期就直接结束了。除非您下次创建该组件。
19、 好了，10种方式就这么多了。
20、 -
21、 这些方法的特点如下所述。
22、 1.对象getDefaultProps()。返回属性集合对象。
23、 首先，它是第一个getDefaultProps()方法。该方法在创建组件时执行，然后可以在创建组件后创建其实例对象。然后，在此方法中设置的默认属性将在所有实例之间共享。
24、 它类似于面向对象编程的静态变量和方法。
25、 2.object getInitialState()返回状态集合对象
26、 让我们谈谈getInitialState方法，它作用于组件的实例。它在创建实例时调用一次(在组件的生命周期中只调用一次)，用于初始化每个实例的状态。此时，可以访问this.props。
27、 3.voidcomponentWillMount()返回一个空对象。
28、 然后，组件将由componentWillMount()方法呈现，该方法在初始化呈现之前执行一次。如果在这个方法中调用了setState，render()就知道状态发生了变化，只会执行一次，不会陷入死循环。
29、 4.reactElement render()方法返回一个React组件。
30、 调用render()方法时，首先检查this.props和this.state是否返回子元素，子元素可以是DOM组件或其他自定义复合控件的虚拟实现。如果不想渲染，可以返回null或false。在这种情况下，react呈现一个noscript标记。当返回null或false时，ReactDOM.findDOMNode(this)返回的nullrender()方法是非常纯的，这意味着组件的状态不应该在这个方法中初始化，它每次执行都会返回相同的值。它不会读写DOM，也不会与服务器交互。如果必须在componentDidMount()方法或其他生命周期方法(如服务器交互)中实现，保持render()方法的纯粹性会使服务器更精确，组件更简单。
31、 5.VoidcomponentIdmount()，返回值为null。
32、 初始化渲染后，只执行一次，也就是初始化的时候。(在非初始化时间，组件渲染完成后，执行组件变化完成方法componentDidUpdate()。)在这种方法中，可以访问任何组件。如果组件是嵌套的，将首先执行最内层组件的componentIDMOUNT()方法，最后执行最外层组件的componentIDMOUNT()方法。通过这个函数，您可以与其他js框架进行交互，比如设置定时器setTimeout或setInterval，或者发起网络请求。
33、 6.booleanshouldComponentUpdate()，返回true或false。
34、 boolean shouldcomponentdupdate(object next props，object nextState)
35、 这个方法在渲染初始化的时候不会执行，但是在道具或者状态改变的时候会执行，当新的道具或者状态不需要更新组件的时候会在渲染之前返回false。
36、 shouldComponentUpdate:function(nextProps，nextState) { return nextProps.id！==this . props . id；}
37、 当shouldComponentUpdate方法返回false时，不会执行render()方法，也不会调用componentWillUpdate和componentDidUpdate方法。
38、 默认情况下，shouldComponentUpdate方法返回true，以防止在状态快速变化时出现问题。但如果状态不变，props为只读，可以直接重写shouldComponentUpdate方法，比较props和状态的变化，决定UI是否更新。当组件较多时，这种方法可以有效地提高应用程序的性能。
39、 7.VoidcomponentTwillUpdate()，返回值为空。
40、 void component will update(object next props，object nextState)
41、 当道具和状态改变时，它们在render方法之前执行。当然，这个方法在渲染初始化的时候是不会执行的。需要注意的是，不能用this.setState来修改这个函数中的状态。调用此函数后，nextProps和nextState将分别设置为this.props和this.state。在这个函数之后，将立即调用render()来更新界面。
42、 8.voidcomponentDidUpdate()，没有返回值
43、 void componentDidUpdate(object prev props，object prevState)
44、 它在组件更新后执行，但不在渲染初始化时执行。
45、 9.voidcomponentWillReceiveProps()，无返回值
46、 void componentWillReceiveProps(object next props)
47、 它在props更改时执行，而不是在渲染初始化时执行。在这个回调函数中，您可以根据属性更改通过调用this.setState()来更新组件状态。旧属性仍然可以通过这个获得。props在这里调用更新状态是安全的，它不会触发额外的呈现调用。
48、 componentWillReceiveProps:function(nextProps){ this . setstate({ likes increasing:nextProps . like count this . props . like count })；}10、void componentWillUnmount()，无返回值。
49、 10、void componentWillUnmount()
50、 当一个组件要从接口中移除时，componentWillUnmount()将被调用。在此功能中，您可以执行一些与组件相关的清理工作，如取消定时器、网络请求等。
51、 通过代码观察运行状态。
52、 超文本标记语言
53、 头
54、 meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /
55、 /头
56、 身体
57、 script src='js/react.js'/script
58、 script src=' js/react-DOM . js '/script
59、 div id='life'/div
60、 脚本
61、 //-自定义组件MyComponent
62、 -
63、 var my component=react . create class({
64、 Change:function(e){//值更改时的onChange方法
65、 this.setState({
66、 状态1:e .目标值，
67、 });
68、 ReactDOM.render(
69、 React.dom.div ({ID:'何姿'，}，react . createelement(my component，{pro1:'我是属性666'}))，//通过重新渲染改变属性。
70、 document.getElementById('life ')
71、 );
72、 //ReactDOM.render(
73、 //react.dom.div (null，' hello ')，//通过从新渲染的方式中移除组件，componentWillUnmount()；
74、 //document . getelementbyid(' life ')
75、 //);
76、 },
77、 //依次测试组件的10个生命周期方法
78、 GetDefaultProps:function(){ //设置默认属性值。
79、 console . log(' my component-getDefaultProps '，arguments)；
80、 返回{
81、 1:‘我是1’，
82、 2:‘我是2’，
83、 Pro3:“我3岁”
84、 };
85、 },
86、 GetInitialState:function(){ //初始化状态值
87、 console . log(' my component-getInitialState '，arguments)；
88、 返回{
89、 状态1:“我是状态1”，
90、 状态2:“我是状态2”
91、 };
92、 },
93、 componentWillMount:function(){//组件将要渲染
94、 控制台。log('我的组件-组件将挂载'，参数)；
95、 },
96、 //-
97、 render:function(){ //组件正式渲染
98、 控制台。日志('我的组件-呈现'，参数);
99、 返回做出反应.DOM.input({
100、 值：这个。道具。pro 1这个。道具。pro 2这个。状态。状态1，
101、 onChange:这个。改变，
102、 样式：{//样式写成对象的形式
103、 宽度："400像素",
104、 颜色：'红色，
105、 }
106、 });
107、 },
108、 //-
109、 componentDidMount:function(){//组件渲染完成
110、 控制台。log('我的组件-组件安装'，参数)；
111、 },
112、 //-
113、 componentWillReceiveProps:function(){//在运行状态中更改了属性触发的方法
114、 控制台。日志('我的组件-componentWillReceiveProps '，参数);
115、 控制台。日志(这个。道具。pro1)；//验证在拿取旧的小道具值
116、 },
117、 //-
118、 shouldComponentUpdate:function(){//给你一次打断更新的机会的方法
119、 控制台。log('我的组件-shouldComponentUpdate '，arguments)；
120、 返回真实的
121、 //返回错误的
122、 },
123、 //-
124、 componentWillUpdate:function(){//组件将要更新，如果上一个方法没有阻断的话，就会执行到这个方法里来
125、 控制台。log('我的组件-组件更新'，参数)；
126、 },
127、 //-
128、 componentDidUpdate:function(old props，oldState){ //组件更新渲染完成，在第一次渲染时不执行
129、 控制台。log('我的组件-componentDidUpdate '，参数)；
130、 //if(this.state.state1！='我是状态1')
131、 //这个。替换状态(旧状态)；//替换组件
132、 },
133、 //-
134、 componentWillUnmount:function(){//组件将从数字正射影像图中卸载
135、 控制台。日志('我的组件-组件将被卸载'，参数);
136、 },
137、 //-
138、 });
139、 //- 开始渲染组件-
140、 ReactDOM.render(
141、 做出反应. DOM.div({id:'何姿，}，反应过来。createelement(我的组件，{pro1:'我是属性1'})),
142、 document.getElementById('life ')
143、 );
144、 /脚本
145、 /body
146、 /html
147、 查看运行结果，当程序运行后，会经历生命周期方法：
148、 1.初始化属性getDefaultProps，
149、 2.初始化状态getInitialState，
150、 3.组件将要渲染组件将安装，
151、 4.组件开始渲染渲染，
152、 5.渲染完成componentDidMount，
153、 渲染完成后有三种情况，如下：
本文到此结束，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！