《React+Redux前端开发实战》—2.4 组件的生命周期

2.4  组件的生命周期

　　生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to- Grave）的整个过程。在React组件的整个生命周期中，props和state的变化伴随着对应的DOM展示。每个组件提供了生命周期钩子函数去响应组件在不同时刻应该做和可以做的事情：创建时、存在时、销毁时。

　　本节将从React组件的“诞生”到“消亡”来介绍React的生命周期。由于React 16版本中对生命周期有所修改，所以本节只介绍最新版本的内容，React 15版本的生命周期不推荐使用，如需了解请读者自行查阅。这里以React 16.4以上版本为例讲解。

2.4.1  组件的挂载

　　React将组件渲染→构造DOM元素→展示到页面的过程称为组件的挂载。一个组件的挂载会经历下面几个过程：

•  constructor()；

•  static getDerivedStateFromProps()；

•  render()；

•  componentDidMount()。

　　组件的挂载示例：

　　（源码地址为https://jsfiddle.net/allan91/n5u2wwjg/225709/）

　　class App extends React.Component {

　　  constructor(props) {

　　   super(props);

　　   console.log("constructor")

　　  }

　　  static getDerivedStateFromProps(){

　　   console.log("getDerivedStateFromProps")

　　    return null;

　　  }

　　  // React 17中将会移除componentWillMount()

　　  // componentWillMount() {

　　  //  console.log("componentWillMount")

　　  //}

　　  render() {

　　    console.log("render")

　　    return 'Test'

　　  }

　　  // render()之后构造DOM元素插入页面

　　  componentDidMount() {

　　    console.log("componentDidMount")

　　  }

　　}

　　ReactDOM.render(

　　<App/>,

　　document.querySelector("#app")

　　)

　　打开控制台，上述代码执行后将依次打印：

　　constructor

　　getDerivedStateFromProps

　　render

　　componentDidMount

　　constructor()是ES 6中类的默认方法，通过new命令生成对象实例时自动调用该方法。其中的super()是class方法中的继承，它是使用extends关键字来实现的。子类必须在constructor()中调用super()方法，否则新建实例会报错。如果没有用到constructor()，React会默认添加一个空的constructor()。

　　getDerivedStateFromProps()在组件装载时，以及每当props更改时被触发，用于在props（属性）更改时更新组件的状态，返回的对象将会与当前的状态合并。

　　componentDidMount()在组件挂载完成以后，也就是DOM元素已经插入页面后调用。而且这个生命周期在组件挂载过程中只会执行一次，通常会将页面初始数据的请求在此生命周期内执行。

注意：其中被注释的componentWillMount()是React旧版本中的生命周期，官方不建议使用这个方法，以后会被移除，因此这里不做介绍。