React的生命周期

中文文档：State&生命周期-React
英文文档：StateandLifecycle–React

简单来说，一个组件的生命周期可以分为四个部分：

1. 创造 - 生
2. 挂载到页面
3. 更新
4. 毁灭 - 死

用js来写个简单的例子

let app = document.getElementById('app');

//create div
let div = document.createElement('div');
div.style.border = '1px solid red';

let state = 0;
div.innerHTML = `
    <p>${state}</p>
    <button>+1</button>
    <button>die</button>
`;

//mount div
app.appendChild(div);

div.querySelector('button').onClick = () => {
    state += 1;
    //update div
    div.querySelector('p').innerText = state;
};

div.querySelectorAll('button')[1].onClick = () => {
    //清理事件监听
    div.querySelector('button').onClick = null;
    div.querySelectorAll('button')[1].onClick = null;
    div.remove();
    //destroy div
    div = null;  
};

再来看看React的生命周期

值得注意的是，函数是没有生命周期的，只有class组件有

来看看React的生命周期里有哪些钩子

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

let div = document.createElement("div");
document.body.appendChild(div);
console.log = function(content) {
  div.innerHTML += `${content}<br>`;
};

class Baba extends React.Component {
  constructor() {
    super();
    this.state = {
      hasChild: true
    };
  }
  onClick() {
    this.setState({
      hasChild: false
    });
  }
  callSon() {
    this.setState({
      word: "你还好吧"
    });
  }
  render() {
    return (
      <div>
        我是你爸爸
        <button onClick={() => this.onClick()}>kill son</button>
        <button onClick={() => this.callSon()}>call son</button>
        {this.state.hasChild ? <App word={this.state.word} /> : null}
      </div>
    );
  }
}

class App extends React.Component {
  onClick() {
    console.log("用户点击了");
    this.setState({
      n: this.state.n + 1
    });
  }
  updateX() {
    this.setState({
      x: this.state.x + "!"
    });
  }
  constructor() {
    super();
    this.state = {
      n: 0,
      x: "不展示"
    };
  }
  componentWillMount() {
    console.log("将要 mount App");
  }
  render() {
    // update
    console.log("填充/更新 App 的内容");
    return (
      <div className="App">
        {this.state.n}
        <br />
        我爸说 {this.props.word}
        <br />
        <button onClick={() => this.onClick()}>+1</button>
        <button onClick={() => this.updateX()}>update x</button>
      </div>
    );
  }
  componentDidMount() {
    console.log("mount App 完毕");
  }
  componentWillUpdate() {
    console.log("update App 之前");
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("要不要更新呢？");
    if (this.state.n === nextState.n) {
      console.log('不更新')
      return false;
    } else {
      console.log('更新')
      return true;
    }
  }
  //update is render
  componentDidUpdate() {
    console.log("update App 之后");
  }
  componentWillUnmount() {
    console.log("App 快要死了，记得喂狗");
  }
  componentWillReceiveProps() {
    console.log("我爸说话了");
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Baba />, rootElement);

关于React生命周期的几道面试题

生命周期的哪个阶段异步请求数据？

componentDidMount
最主要的原因是：

1. 在componentWillUnMount中无法确保在执行render前已经获得了异步请求的数据，componentDidMount不存在这个问题；
2. 为了性能的需要，React下一代tiao'he
3. 无法保证ajax请求在组件的更新阶段里成功返回数据，有可能当我们进行setState处理的时候，组件已经被销毁了。

请说出所有的生命周期钩子

1. constructor()
2. componentWillMount() // 将要Mount
3. render() // 填充/更新
4. componentDidMount() // Mount 完毕
5. componentWillUpdate // 更新之前
6. componentDidUpdate // 更新之后
7. componentWillUnmount() // 组件被销毁之前，只能由父组件销毁子组件
8. componentWillReceiveProps() // 父组件向子组件传值了
9. shouldComponentUpdate() //是否要更新