React Class组件生命周期钩子

• 什么是生命周期

类比如下代码：

let div = document.createElement("div")
//这是div的create/construct过程
div.innerText = "hi"
//这是初始化state
document.body.appendChild(div)
//这是div的mount过程
div.textContent = "hello"
//这是div的update过程
div.remove（）
//这是div的unmount过程

同理，React组件也有这些过程，我们称为生命周期

• 生命周期钩子（常用）

钩子函数列表

construtor()//在这里初始化
shouldComponentUpdated//return false阻止更新
render() //创建虚拟DOM
componentDidMount //组件已出现在页面
componnetDidUpdate //组件已更新
componentWillUnmount //组件将要消亡

constructor（）

用途：

1. 初始化props
2. 初始化state,但此时不能调用setState
3. 用来写bind this

shouldComponentUpadate（）

用途：

1. 返回ture表示不阻止UI更新
2. 返回false表示阻止UI更新

允许我们手动判断是否要进行组件更新，我们可以根据应用场景灵活的设置返回值，以避免不必要的更新。

示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      n: 1
    };
  }
  onClick = () => {
    this.setState(state => ({ n: state.n + 1 }));
    this.setState(state => ({ n: state.n - 1 }));
  };
//判断新的n与旧的n 是否相等，相等就不更新
  shouldComponentUpdate(newProps, newState) {
    if (newState.n=== this.state.n) {
      return false;
    } else {
      return true;
    }
  }
  render() {
    console.log("render执行了");
    return (
      <div>
        {this.state.n}
        <button onClick={this.onClick}>+1 -1</button>
      </div>
    );
  }
}

其实React内置了此功能，这个功能叫做React.PureComponent来代替React.Component

render（）

用途：

1. 展示视图 return (<div>...</div>)
2. 只能有一个根元素
3. 如果有两个根元素，就要用<React.Fragment>包起
4. <React.Fragment/>可以缩写<></>

componentDidmount（）

用途：

1. 在元素插入页面后执行代码，这些代码依赖DOM
2. 此处可以发起加载数据的AJAX请求
3. 首次渲染会执行此钩子

componentDidUpdate()

用途：

1. 在视图更新后执行代码
2. 此处也可以发起AJAX请求，用于更新数据
3. 首次渲染不会执行此钩子
4. 在此处setState可能会引起无限循环，除非放在if里
5. 若shouldComponentUpdate返回false,则不会触发此钩子

componentWillUnmount()

用途：

1. 组件将要被移除页面然后被销毁时执行代码
2. unmount过的组件不会再次mount

当我们在组件中使用了 setInterval，那我们就需要在这个方法中调用 clearInterval。如果手动使用了 addEventListener 绑定了事件，也需要解绑事件。

钩子执行顺序

注：函数组件没有生命周期，可以用Hooks API来解决。