react-10-钩子函数-生命周期

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

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 不更新
        //  深入的时候 哪些需要更新 哪些不需要  优化
        shouldComponentUpdate(newProps, newState) {
            console.log("1 should Component Update-----应该更新",newState);
            if(newState.n%2 === 0) return true
          return false;
        }
        // 更新函数
        // 其实我们点击的时候已经set了 但是其实this.state还没有变
        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,取消网络请求


6. 更多的用法  等你去 探索





相关文章
|
11天前
|
前端开发 JavaScript API
react挂载后函数
react挂载后函数
7 1
|
17天前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
21 3
|
17天前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
17 1
|
18天前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
24 1
|
18天前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
24 1
|
30天前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
30天前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
30天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
30天前
|
JavaScript 前端开发 API
vue中nextTick函数和react类似实现
vue中nextTick函数和react类似实现
77 0
|
30天前
|
存储 前端开发 JavaScript
探索React中的类组件和函数组件
探索React中的类组件和函数组件