React 组件的生命周期

React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。这一节我们学习了 React.js 控制组件在页面上挂载和删除过程里面几个方法：
componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。
componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。

现在我们应该知道一件事情, 有了 组件 和 props, 我们就可以把一个页面拆成一个个小组件.

有了 内部状态, 我们就可以让组件在某些时候做出一些变化.

我们的页面就是通过一个个小的组件, 组合成一个大的组件, 一份份小的 jsx, 组合成一份大的 jsx.

最后交给 ReactDOM.render(), 通过 DOM 操作, 把 Virtual DOM 渲染成浏览器真实的 DOM.

理解生命周期

挂载阶段
组件也是有生命的, 如果一个组件被渲染到了页面, 那么这个组件的生命便开始了.

也就是 Virtual DOM 变成真实 DOM的这个过程. 组件生命的开始也叫组件的挂载.

上代码:

import React from 'react';
import ReactDOM from 'react-dom';

class A extends React.Component {

  render(){
    return (
      <div>
        <p> 数字: 999 </p>
        <button>click once</button>
      </div>
    )
  }
}

ReactDOM.render(
  <div>
    <A/>
  </div>
  , document.getElementById('root'));

<A/> 开始的时候还只是一份虚拟dom, 可一旦把它渲染到浏览器, 我们便说这个组件被挂载了.

更新阶段
说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程，这是一个组件的变化过程。

一个被挂载的组件, 某些时候可能会变化, 也就是被更新:

class A extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      num: Math.random().toString().slice(2, 8)
    };
  }

  changeNum=()=>{
    this.setState({
      num: Math.random().toString().slice(2, 8)
    });
  }

  render(){

    let {num} = this.state;

    return (
      <div>
        <p> 数字: {num} </p>
        <button
          onClick={this.changeNum}
        >click once</button>
      </div>
    )
  }
}

我们改造下 A 组件. 每次点击按钮, 数字就会改变. 也就是这个组件会变化, 这个时候, 我们就说这个组件被更新了.

卸载阶段 当一个已经被挂载的组件从页面删除掉, 那么这个组件实例的生命就结束了. 我们就说这个组件被卸载了.

我们改一下上面的代码:

class B extends React.Component{

  render(){
    return (
      <div>我是组件 B</div>
    )
  }
}

class A extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      isShowB: true
    };
  }

  changeNum=()=>{
    this.setState({
      isShowB: !this.state.isShowB
    });
  }

  render(){

    let {isShowB} = this.state;

    return (
      <div>
        {
          isShowB ? (
            <B/>
          ) : (
            <p>我不是B</p>
          )
        }
        <button
          onClick={this.changeNum}
        >click once</button>
      </div>
    )
  }
}

在第一次点击按钮之前, 有一个 B 组件的实例被挂载到页面, 而点击按钮之后, 这个 B 组件实例就会被卸载掉.

重复的点击按钮, 就会不断有新的 B 组件实例被挂载, 然后被卸载.

生命周期函数

无论是组件挂载, 更新, 还是卸载. 都是一个瞬间的事情. 但是在这个瞬间执行之前和之后, React 会调用一些函数, 我们把这些函数叫做生命周期函数.

Mounting(挂载) 阶段

• • 组件挂载时首先执行
  • 在这里可以:
    • 初始化 state
    • 给事件函数绑定 this
• componentWillMount()
  • 组件将要挂载时执行
• render()
  • 返回此刻组件的 JSX 结构
• componentDidMount()
  • 组件挂载完成后执行
  • 在这里可以:
    • 开启定时器
    • 发起请求
    • 访问真实的 DOM 元素

这些函数是组件挂载阶段执行的函数.

因为一个组件实例只能被出生一次, 也就是一生只能被挂载一次, 所以这些函数在这个组件实例的生命周期中只会执行一次.

当然, render() 函数是个例外. 在挂载阶段它需要返回 JSX 结构, 在更新阶段, 它也需要返回新的 JSX 结构. 所以 render()可能会执行多次.

Updateing(更新) 阶段

• componentWillReceiveProps( nextProps )
  • 父组件更新的时候执行
• shouldComponentUpdate( nextProps, nextState )
  • 返回 bool 值, 默认返回 true
  • 如果返回 false, 当前组件不会更新, 之后的生命周期函数不执行
  • 性能优化的主要手段之一

 // 更新前执行的，所以在没有更新之前
    shouldComponentUpdate(nP,nS){
        return !this.props.content === nP.content
    }

• componentWillUpdate( nextProps, nextState )
  • 组件将要更新时执行
• render()
• componentDidUpdate( prevProps, prevState )
  • 组件更新之后执行

Unmounting(卸载) 阶段

• componentWillUnmount()
  • 组件将要卸载的时候执行
    • 可以在这里:
      • 移除事件绑定
      • 清空定时器
      • 取消请求

很长一段时间, 组件的生命周期就是 挂载, 更新, 卸载三个阶段.

在更新到了 16.0.0 之后, 新增了一个 错误处理的阶段.

新增了一个函数:

• componentDidCatch( error, info )

当子组件的生命周期函数(包括 render(), constructor()和其他生命周期函数)里面抛出了错误, 那么这个函数就会执行.

注意, 在此组件之下的子组件发生错误的时候才会执行, 组件自身的生命周期函数发生错误不会捕获到.

关于生命周期函数

在上面我们初步了解了组件的生命周期函数, 并且我在每个生命周期函数的下面做了简单的说明.

现在我们只要知道生命周期函数会在什么之后执行就可以了.

有些生命周期会频繁使用, 而有些则会很少用到.

关于如何生命周期函数在什么时候用这种问题, 这需要随着时间, 随着你解决各种业务需求之后, 会慢慢越来越有体会.

image.png

屏幕快照 2018-06-25 上午3.04.28.png