提到react生命周期总结_react生命周期大家在熟悉不过了，那你是否知道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、渲染完成后有三种情况，如下：

本文到此结束，希望对大家有所帮助。