阅读 614

【连载】浅析React生命周期之一:挂载阶段

学习React有一个很重要的概念需要弄清楚,那就是React组件的生命周期,以及它跟 setState 所引起的 React生命周期钩子的调起情况。React 生命周期分为挂载阶段、更新阶段和卸载阶段。下面我将使用 create-react-app 做一个简单的分析,React版本是16.8.1

一、挂载阶段

1.1 组件初次挂载,依序执行以下方法。除了 render,其他3个函数只会执行一次。

  • constructor
  • componentWillMount
  • render
  • componentDidMount

核心代码如下,简单输出各生命周期钩子的日志信息:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count:0
    };
    console.log('constructor')
  }
  componentWillMount(){
    console.log('componentWillMount')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
  componentWillUpdate(nextProps, nextState) {
    console.log('componentWillUpdate')
  }
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps')
  }

  render() {
    console.log('render', this.state)
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <button onClick={this.handleClick}>click me</button>
        </header>
      </div>
    );
  }
}

export default App;
复制代码

浏览器输出日志如下,结果很简单明了:

1.2 接下来,要稍微搞一下事情了,在componentWillMount中setState更新状态会怎么样呢?

componentWillMount(){
    console.log('componentWillMount')
    this.setState({foo: 'bar'});
}
复制代码

浏览器输出日志如下,可以看到在componentWillMount中更新状态不会触发更新过程,但新的状态会及时在 render 中体现:

在这里,我们需要注意到 setState 是异步的操作:

componentWillMount(){
   console.log('componentWillMount')
   console.log('componentWillMount before setState',this.state)
   this.setState({foo: 'bar'});
   console.log('componentWillMount after setState',this.state)
}
复制代码

浏览器输出日志如下,可以看到执行setState操作后,state 对象没有立即生效,而是到了 render 函数中才生效。

1.3 利用 setState 的回调,可以获知渲染完毕后的新的 state 内容,代码和日志信息如下:

componentWillMount(){
    console.log('componentWillMount')
    console.log('componentWillMount before setState',this.state)
    this.setState({foo: 'bar'},() => {
      console.log('componentWillMount after setState',this.state)
    });
}
复制代码

1.4 如果连续多次 setState,react 内部做了优化,不会触发多次更新。代码和日志信息如下:

componentWillMount(){
    console.log('componentWillMount')
    this.setState({foo: 'bar'});
    this.setState({foo: 'bar2'});
}
复制代码

1.5 如果需要获知当前最新的 state 内容,以计算下一个 state 内容,则需要使用函数传参形式的 setState,见下图。

可以在此看处 setState后于console.log('do some calculate or other operation...')执行,再次反映了 setState的异步执行机制。这里,透露了一个最佳实践建议,即:

在 setState 之前做好计算,最后再一次性 setState。这样,代码顺序就和执行顺序一致,出问题时才不会一脸懵逼。

1.6 然后是还没怎么提到的componentDidMount

组件挂载完成后执行,可以在这里拉取服务器数据(当然,也可以在上面提到的componentWillMount中拉取远程数据)。也可以在这里添加对dom 的监听及其他对dom 的操作,还可以创建定时器。(相应的,需要在componentDidMount中销毁 dom 的监听和 timer,以免造成内存泄漏。如果代码更严谨一点,可同时在 componentWillMount 和 componentDidMount 中销毁 dom 的监听和 timer,以免某些情况下 componentDidMount 没有执行。)

关注下面的标签,发现更多相似文章
评论