0
点赞
收藏
分享

微信扫一扫

React - 07 类组件的渲染逻辑

1.ES6 类的知识

React - 07 类组件的渲染逻辑_react

ES6类的继承

React - 07 类组件的渲染逻辑_react_02

2.创建类组件

创建类组件
  创建一个构造函数(类)
    + 要求必须继承React.Component/PureComponent这个类
    + 我们习惯于使用ES6中的class创建类「因为方便」
    + 必须给当前类设置一个render的方法「放在其原型上」:在render方法中,返回需要渲染的视图

  从调用类组件「new Vote({...})」开始,类组件内部发生的事情:
    1. 初始化属性 && 规则校验
      先规则校验,校验完毕后,再处理属性的其他操作!!
      方案一:
      constructor(props) {
        super(props); //会把传递进来的属性挂载到this实例上
        console.log(this.props); //获取到传递的属性
      }
      方案二:即便我们自己不再constructor中处理「或者constructor都没写」,在constructor处理完毕后,React内部也会把传递的props挂载到实例上;所以在其他的函数中,只要保证this是实例,就可以基于this.props获取传递的属性!
        + 同样this.props获取的属性对象也是被冻结的{只读的}  Object.isFrozen(this.props)->true

属性规则校验

React - 07 类组件的渲染逻辑_react_03

2. 初始化状态
      状态:后期修改状态,可以触发视图的更新
      需要手动初始化,如果我们没有去做相关的处理,则默认会往实例上挂载一个state,初始值是null => this.state=null
      手动处理:
      state = {
        ...
      };
      ---------修改状态,控制视图更新
      this.state.xxx=xxx :这种操作仅仅是修改了状态值,但是无法让视图更新
      想让视图更新,我们需要基于React.Component.prototype提供的方法操作:
        @1 this.setState(partialState) 既可以修改状态,也可以让视图更新 「推荐」
          + partialState:部分状态
          this.setState({
            xxx:xxx
          });
        @2 this.forceUpdate() 强制更新 -- 不推荐

setState

React - 07 类组件的渲染逻辑_react_04

强制更新

React - 07 类组件的渲染逻辑_react_05

react严格模式

3. 触发 componentWillMount 周期函数(钩子函数):组件第一次渲染之前
      钩子函数:在程序运行到某个阶段,我们可以基于提供一个处理函数,让开发者在这个阶段做一些自定义的事情
      + 此周期函数,目前是不安全的「虽然可以用,但是未来可能要被移除了,所以不建议使用」
        + 控制会抛出黄色警告「为了不抛出警告,我们可以暂时用 UNSAFE_componentWillMount」
      + 如果开启了React.StrictMode「React的严格模式」,则我们使用 UNSAFE_componentWillMount 这样的周期函数,控制台会直接抛出红色警告错误!!
        React.StrictMode VS "use strict"
        + "use strict":JS的严格模式
        + React.StrictMode:React的严格模式,它会去检查React中一些不规范的语法、或者是一些不建议使用的API等!!

React - 07 类组件的渲染逻辑_react_06

3.渲染逻辑

类组件第一次渲染的逻辑

创建一个构造函数(类)
    + 要求必须继承React.Component/PureComponent这个类
    + 我们习惯于使用ES6中的class创建类「因为方便」
    + 必须给当前类设置一个render的方法「放在其原型上」:在render方法中,返回需要渲染的视图

  从调用类组件「new Vote({...})」开始,类组件内部发生的事情:
    1. 初始化属性 && 规则校验
      先规则校验,校验完毕后,再处理属性的其他操作!!
      方案一:
      constructor(props) {
        super(props); //会把传递进来的属性挂载到this实例上
        console.log(this.props); //获取到传递的属性
      }
      方案二:即便我们自己不再constructor中处理「或者constructor都没写」,在constructor处理完毕后,React内部也会把传递的props挂载到实例上;所以在其他的函数中,只要保证this是实例,就可以基于this.props获取传递的属性!
        + 同样this.props获取的属性对象也是被冻结的{只读的}  Object.isFrozen(this.props)->true

    2. 初始化状态
      状态:后期修改状态,可以触发视图的更新
      需要手动初始化,如果我们没有去做相关的处理,则默认会往实例上挂载一个state,初始值是null => this.state=null
      手动处理:
      state = {
        ...
      };
      ---------修改状态,控制视图更新
      this.state.xxx=xxx :这种操作仅仅是修改了状态值,但是无法让视图更新
      想让视图更新,我们需要基于React.Component.prototype提供的方法操作:
        @1 this.setState(partialState) 既可以修改状态,也可以让视图更新 「推荐」
          + partialState:部分状态
          this.setState({
            xxx:xxx
          });
        @2 this.forceUpdate() 强制更新 -- 不推荐

    3. 触发 componentWillMount 周期函数(钩子函数):组件第一次渲染之前
      钩子函数:在程序运行到某个阶段,我们可以基于提供一个处理函数,让开发者在这个阶段做一些自定义的事情
      + 此周期函数,目前是不安全的「虽然可以用,但是未来可能要被移除了,所以不建议使用」
        + 控制会抛出黄色警告「为了不抛出警告,我们可以暂时用 UNSAFE_componentWillMount」
      + 如果开启了React.StrictMode「React的严格模式」,则我们使用 UNSAFE_componentWillMount 这样的周期函数,控制台会直接抛出红色警告错误!!
        React.StrictMode VS "use strict"
        + "use strict":JS的严格模式
        + React.StrictMode:React的严格模式,它会去检查React中一些不规范的语法、或者是一些不建议使用的API等!!

    4. 触发 render 周期函数:渲染
    5. 触发 componentDidMount 周期函数:第一次渲染完毕
      + 已经把virtualDOM变为真实DOM了「所以我们可以获取真实DOM了」
      + ...

组件更新的逻辑

组件更新的逻辑「第一种:组件内部的状态被修改,组件会更新」
    1. 触发 shouldComponentUpdate 周期函数:是否允许更新
       shouldComponentUpdate(nextProps, nextState) {
         // nextState:存储要修改的最新状态
         // this.state:存储的还是修改前的状态「此时状态还没有改变」
         console.log(this.state, nextState);

         // 此周期函数需要返回true/false
         //   返回true:允许更新,会继续执行下一个操作
         //   返回false:不允许更新,接下来啥都不处理
         return true;
       }
    2. 触发 componentWillUpdate 周期函数:更新之前
      + 此周期函数也是不安全的
      + 在这个阶段,状态/属性还没有被修改
    3. 修改状态值/属性值「让this.state.xxx改为最新的值」
    4. 触发 render 周期函数:组件更新
      + 按照最新的状态/属性,把返回的JSX编译为virtualDOM
      + 和上一次渲染出来的virtualDOM进行对比「DOM-DIFF」
      + 把差异的部分进行渲染「渲染为真实的DOM」
    5. 触发 componentDidUpdate 周期函数:组件更新完毕
    特殊说明:如果我们是基于 this.forceUpdate() 强制更新视图,会跳过 shouldComponentUpdate 周期函数的校验,直接从 WillUpdate 开始进行更新「也就是:视图一定会触发更新」!

React - 07 类组件的渲染逻辑_react_07

组件更新的逻辑「第二种:父组件更新,触发的子组件更新」
    1. 触发 componentWillReceiveProps 周期函数:接收最新属性之前
      + 周期函数是不安全的
      UNSAFE_componentWillReceiveProps(nextProps) {
        // this.props:存储之前的属性
        // nextProps:传递进来的最新属性值
        console.log('componentWillReceiveProps:', this.props, nextProps);
      }
    2. 触发 shouldComponentUpdate 周期函数
    ......

  组件卸载的逻辑
    1. 触发 componentWillUnmount 周期函数:组件销毁之前
    2. 销毁

  父子组件嵌套,处理机制上遵循深度优先原则:父组件在操作中,遇到子组件,一定是把子组件处理完,父组件才能继续处理
    + 父组件第一次渲染
      父 willMount -> 父 render「子 willMount -> 子 render -> 子didMount」 -> 父didMount 
    + 父组件更新:
      父 shouldUpdate -> 父willUpdate -> 父 render 「子willReceiveProps -> 子 shouldUpdate -> 子willUpdate -> 子 render -> 子 didUpdate」-> 父 didUpdate
    + 父组件销毁:
      父 willUnmount -> 处理中「子willUnmount -> 子销毁」-> 父销毁

4.函数组件与类组件

函数组件是“静态组件”:
   + 组件第一次渲染完毕后,无法基于“内部的某些操作”让组件更新「无法实现“自更新”」;但是,如果调用它的父组件更新了,那么相关的子组件也一定会更新「可能传递最新的属性值进来」;
   + 函数组件具备:属性...「其他状态等内容几乎没有」
   + 优势:比类组件处理的机制简单,这样导致函数组件渲染速度更快!!
 类组件是“动态组件”:
   + 组件在第一渲染完毕后,除了父组件更新可以触发其更新外,我们还可以通过:this.setState修改状态 或者 this.forceUpdate 等方式,让组件实现“自更新”!!
   + 类组件具备:属性、状态、周期函数、ref...「几乎组件应该有的东西它都具备」
   + 优势:功能强大!!

 ===>Hooks组件「推荐」:具备了函数组件和类组件的各自优势,在函数组件的基础上,基于hooks函数,让函数组件也可以拥有状态、周期函数等,让函数组件也可以实现自更新「动态化」!!

举报

相关推荐

0 条评论