React组件生命周期详细解析 – ReactJS实战教程 react生命周期|React

上一章ReactJS实战教程请查看：React组件API用法全解
在ReactJS中，每个组件创建过程都涉及各种生命周期方法，这些生命周期方法被称为组件的生命周期。这些生命周期方法不是很复杂，并且在组件生命周期的不同时间点调用。组件的生命周期分为四个阶段。它们是:

初始阶段
安装阶段
更新阶段
卸载阶段

每个阶段都包含一些特定于特定阶段的生命周期方法，让我们逐一讨论这些阶段。
1. 初始阶段它是ReactJS组件生命周期的起始阶段。在这里，组件开始了它通往DOM的旅程。在此阶段，组件包含默认的道具和初始状态，这些默认属性是在组件的构造函数中完成的。初始阶段只出现一次，由以下方法组成。

getDefaultProps()：它用于指定this.props的默认值，它是在创建组件或将来自父组件的任何道具传递到组件之前调用的。
getInitialState()：它用于指定this.state的默认值，它是在组件创建之前调用的。

2. 安装阶段在此阶段，将创建组件的实例并将其插入到DOM中。它由以下方法组成。

componentWillMount()：这是在将组件呈现到DOM之前立即调用的。在这种情况下，当你在这个方法中调用setState()时，组件将不会重新呈现。
componentDidMount()：在呈现组件并将其放置在DOM上之后立即调用。现在，你可以执行任何DOM查询操作。
render()：每个组件都定义了此方法，它负责返回一个根HTML节点元素。如果不希望呈现任何内容，可以返回null或false值。

3. 更新阶段它是react组件生命周期的下一个阶段，在这里，我们得到了新的props并改变了状态。此阶段还允许处理用户交互并提供与组件层次结构的通信。此阶段的主要目的是确保组件显示其自身的最新版本。与初始或卸载阶段不同，这个阶段不断重复。此阶段包括以下方法。

componentWillRecieveProps()：当组件接收到新道具时调用它，如果你想更新状态以响应props更改，你应该比较这一点，使用this.setState()方法执行状态转换。
shouldComponentUpdate()：当组件决定对DOM的任何更改/更新时，将调用它。它允许你控制组件更新自身的行为。如果此方法返回true，则组件将更新。否则，组件将跳过更新。
componentWillUpdate()：它是在组件更新之前调用的。在这里，你不能通过调用this.setState()方法来更改组件状态。如果shouldComponentUpdate()返回false，则不会调用它。
render()：调用它来检查this.state和this.props并返回以下类型之一：React元素、数组和片段fragment、布尔值或null、字符串和数字。如果shouldComponentUpdate()返回false，将再次调用render()中的代码，以确保组件正确地显示自己。
componentDidUpdate()：在组件更新发生后立即调用它。在此方法中，你可以将任何代码放入其中，以便在更新发生时执行。初始呈现不调用此方法。

4. 卸载阶段它是react组件生命周期的最后一个阶段，在从DOM中销毁和卸载组件实例时调用它。这个阶段只包含一个方法，如下所示。

componentWillUnmount()：此方法在组件被永久销毁和卸载之前立即调用。它执行任何必要的清理相关任务，如使计时器失效、事件监听器、取消网络请求或清理DOM元素。如果组件实例被卸载，则无法再次挂载它。

【React组件生命周期详细解析 – ReactJS实战教程】例子

import React, { Component } from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {hello: "srcmini"}; this.changeState = this.changeState.bind(this) } render() { return ( < div> < h1>ReactJS组件生命周期< /h1> < h3>Hello {this.state.hello}< /h3> < button onClick = {this.changeState}>点击< /button> < /div> ); } componentWillMount() { console.log('组件将挂载!') } componentDidMount() { console.log('组件已经挂载!') } changeState(){ this.setState({hello:"这是reactjs实战教程."}); } componentWillReceiveProps(newProps) { console.log('组件将收到Props!') } shouldComponentUpdate(newProps, newState) { return true; } componentWillUpdate(nextProps, nextState) { console.log('组件将更新!'); } componentDidUpdate(prevProps, prevState) { console.log('组件已经更新!') } componentWillUnmount() { console.log('组件将卸载!') } } export default App;