1. 前言

前文state的文章已经用到了 生命周期函数,但是还没有详细讲解,这节课,详细的分析下
理清楚他们什么时候调用,也就清楚这些钩子有什么用了

---

2. 计数器 demo

通过计数器demo来 分析 钩子

1. 定义state 用来计数
2. render 布局
3. 点击 事件 this 修改方式 箭头函数用法
4. setState()的回调函数用法
5. 构造函数 和 渲染函数里面 有 打印 ,用来标记 执行顺序

class Numbers extends React.Component {
        state = { n: 0 };
        constructor(){
            super();
            console.log("1  constructor");
        }
        render() {
            console.log("3 render");
          return (
            <div>
              <p>{this.state.n}</p>
              <button
                onClick={() => {
                  this.setState(oldState => {
                    return {
                      n: oldState.n + 1
                    };
                  });
                }}
              >
                点击累加
              </button>
            </div>
          );
        }
      }

      ReactDOM.render(<Numbers />, box);

---

3. 钩子核心

这个需要 自己 写一遍 ,看看打印 ,大概了解顺序 ,在看具体的解析

 // 不在这里发请求   布局还没好太早了 
        // render都没走,肯定获取不到DOM
        componentWillMount() {
          console.log("2 Component WILL MOUNT!----- DOM没有创建完");
        }
        componentDidMount() {
          console.log("4 Component DID MOUNT!----DOM创建完了, 可以发请求");
        }
// 接收的属性变化的时候调用
        componentWillReceiveProps(newProps) {
          console.log("5 Component WILL RECEIVE PROPS!");
        }
        // 状态修改了, 组件是否要更新数据?/render走不走
        //  true  更新  false 不更新
        //   哪些需要更新 哪些不需要  权限公开了
//参数1: 变化后的 props
//参数2: 变化后的 state
        shouldComponentUpdate(newProps, newState) {
            console.log("1 should Component Update-----应该更新",newState);
            if(newState.n%2 === 0) return true
          return false;
        }
        // 更新函数
        // 我们点击的时候已经set了 但是其实this.state还没有变,因为没有走 render
        componentWillUpdate(nextProps, nextState) {
          console.log("2 Component WILL UPDATE!----将要更新",nextState,this.state);
          // this.state还没有变
        //   3  render
        }
        componentDidUpdate(prevProps, prevState) {
          console.log("4 Component DID UPDATE!------已经更新");
        }
// 清空定时器 等操作
        componentWillUnmount() {
          console.log("Component WILL UNMOUNT!----将要卸载");
        }
     

---

4. 总结 执行顺序

这个还是建议 自己跑一遭 ,印象更深

4.1 首次加载

1. constructor
2. Component Will Mount
3. render
4. Component did Mount

---

4.2 状态更新 比如点击了 按钮计数器增加

1. shouldComponentUpdate
2. componentWillUpdate
3. render
4. componentDidUpdate

---

5. 钩子功能介绍

5.0 constructor:

组件的构造函数，组件更新到界面上之前会先调用
1.用于初始化内部状态,很少使用
2.唯一可以直接修改 state 的地方

5.1 componentWillMount

组件will将要 加载 ,那就是还没加载 所以 还没有走render,自然没有DOM

---

5.2 componentDidMount

组件已经加载 ,DOM已经存在 ,通常在这里发请求
1.UI 渲染完成后调用
2.只执行一次
3.典型场景:获取外部资源

---

5.3 shouldComponentUpdate(nextProps, nextState)

告诉组件是否需要重新渲染，用于性能优化，比如判定指定 props 发生改变，组件才进行重新渲染
should 应该更新吗???
返回 true代表可以更新 ,false代表不更新
例如上边代码中的例子 偶数更新,奇数不更新

---

1.决定虚拟 DOM是否需要重绘
2.一般可以由 PureComponent自动实现
3.典型场景:性能优化

也就是说,你想优化渲染效率,可以在这里面进行操作,当然一般情况下是用不到的,用到了就不是一般情况

---

5.4 componentWillUpdate

这个wil是将要更新 ,也就是还没有更新,
虽然说你点击的时候 已经走了 setState()方法,但这个和 vue一样是不会立刻更新DOM的

---

5.5 componentDidUpdate(prevProps, prevState)

1.每次 UI 更新时被调用
2.典型场景:页面需要根据 props 变化重新获取数据

5.6 componentWillUnmount

做些资源释放，卸载副作用的事情
删除组件或者 切换界面 的时候调用
清理操作，例如，清除 timer，取消网络请求

---

5.7 componentWillReceiveProps

1.组件将要接收属性的时候 ,初次加载相当于初始化props,所以初次嘉爱不调用,

2. 只有在props变化的时候调用
3. 参数是 props对象

---

6. 钩子的更新

1. react18之后不支持旧钩子的写法了换成新的写法了
2. UNSAFE_componentWillMount
3. UNSAFE_componentWillReceiveProps
4. UNSAFE_componentWillUpdate

---

7. 图示

1. 钩子
   2. 生命周期

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉