组件挂载阶段

以下钩子函数会依次被调用

constructor

初始化数据（props和state）（只执行一次）

constructor(props){//形参props表示当前组件接受的外部属性
  super();
  //初始化state
  this.state = {
  name:"张三",
  }
}

componentWillMount

会运行在 render() 之前，它是渲染之前的回调函数。（只执行一次）

render

根据props和state渲染界面

展示视图
- return (<div>...</div>)
- 把括号里面的东西变成一个对象,这个对象就是虚拟 DOM
只能有一个根元素
- 如果有两个根元素,就要用< React.Fragment >包起
- 可以缩写为 <> </>
```
render(){
const {msg} = this.props;
const {name} = this.state;
return(
<div>
当前组件的外部数据 ：{msg}
当前组件的内部状态 ：{name}
</div>
)
}
```
  componentDidMount
  界面渲染完毕（DOM挂载完毕）的一个通知，类似于vue组件中的created,我们可以在这个生命周期做很多事情

获取DOM节点
发送请求获取后台数据
设置定时器、延时器等等
绑定全局事件，例如document的点击事件等等

组件运行阶段
每当组件的props或者state变化之后，都会导致组件的更新

render
根据新的props或state渲染界面

componentDidUpdate
componentDidUpdate(prevProps, prevState)
界面渲染完毕的一个通知，类似于vue组件中的updated,在这里我们可以：
获取DOM节点
发送请求等

注意：该钩子函数可能会频繁执行，所以这个钩子函数里面的操作一般都要加上一定的条件判断，条件满足之后，才能执行
若 shouldComponentUpdate 返回 false,则不触发此钩子

shouldComponentUpdate
返回true
- 表示不阻止UI更新
返回 false
- 表示阻止UI更新，后续的render和componentDidUpdate都不会执行
提问
- shouldComponentUpdate有什么用?
  - 它允许我们手动判断是否要进行组件更新,
  - 我们可以根据应用场景灵活地设置返回值,
  - 以避免不必要的更新
此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate() ```javascript import React from “react”; 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})); };

//直接使用他进行判断 shouldComponentUpdate(nextProps, nextState) { if (nextState.n === this.state.n) { //新更新的值nextState 旧的值this.state是否相同 return false; //相同为false 阻止UI更新 } else { return true; //不同为true 不阻止UI更新 } }

render() { console.log(“render 了一次”); return (

{this.state.n}

); }

}

export default App;

<a name="T7wTu"></a>
## PureComponent 
- 用React.PureComponent 代替 shouldComponentUpdate
   - React.PureComponent 会在 render 之前对比新 state 和旧 state 的每一个 key，以及新 props 和旧 props 的每一个 key。
   - 如果所有 key 的值全都一样，就不会 render；如果有任何一个 key 的值不同，就会 render。
```javascript
import React from "react";
class App extends React.PureComponent {  // 直接使用PureComponent
  constructor(props) {
    super(props);
    this.state = {
      n: 1
    };
  }
  onClick = () => {
    this.setState((state) => ({n: state.n + 1}));
    this.setState((state) => ({n: state.n - 1}));
  };
  render() {
    console.log("render 了一次");  // 就会自动判断 UI 的属性是否相等,看要不要更新
    return (
      <div>
        <div>{this.state.n}</div>
        <button onClick={this.onClick}>+1</button>
      </div>
    );
  }
}
export default App;

组件卸载阶段

当React使用完一个组件，这个组件就必须从DOM中卸载随后被销毁。此时，仅有的一个钩子函数会做出响应，完成所有的清理和销毀工作，这很必要。

componentWillUnmount

我们一般在这里做一些性能优化的工作，比如清除定时器，延时器、解绑事件等等

componentDidMount(){
  this.timer = setInterval(()=>{
    console.log(1)
    },1000);
  }
  componentWillUnmount(){
  clearInterval(this.timer)
}

生命周期

组件挂载阶段

constructor

componentWillMount

render

componentDidMount

组件运行阶段

render

componentDidUpdate

shouldComponentUpdate

组件卸载阶段

componentWillUnmount