13. React中为什么使用setState

1.2. 为什么使用setState

• 1.2.1. Vue和React的数据管理和渲染流程原理对比

  • 1. 在React中使用setState来更新数据
  • 2. Vue中render函数执性原理的解释
    • 2.0. Vue响应式数据更新流程：在Vue中数据更新是不需要setState这个东西的，如果是在data中定义数据(optionsAPI)，定义一个message数据，可以直接对message数据进行修改的，修改完后，界面上一旦发现这个数据发生更新了，它就会根据最新的数据来重新渲染。这里的本质也是重新调用整个组件的render函数，在Vue中也是直接调用render函数，只不过看不到这个render函
    • 2.1. 编译过程: template转成render函数的这个过程叫做编译，编译的时候会对很多东西进行转化，例如把v-for/v-if/v-mode -> 做一个解析转成 -> render
    • 2.2. 界面渲染流程: template ->(转成)render -> (在render函数中转成)h函数(div -> h('div', {} ,children)) -> 虚拟DOM -> (转成)真实DOM
    • 2.3. Vue中的render函数什么时候重新执行呢？
      • render函数的执行对于我们来说是隐藏的，当数据发生改变时，是对数据做一个劫持的，在set里面数据发生变化进行劫持，然后调用render函数
    • 2.3. Vue框架的设计理念：
      • 1. 高度封装：Vue把很多东西都封装好了，甚至告诉你这个东西你不需要关系。
      • 2. 简化开发体验：只需要修改数据就可以了，这里有没有重新执行render函数，不关你的事情。
      • 3. 想要了解原理的话，数据劫持，template编译过程，想了解的也可以去了解，不想了解也可以不了解，按照固定模式开发代码就可以了，但是对于底层的东西对于我们来说是不可见的
  • 3. React执行render函数的原理的解释
    • 3.0. 数据更新流程：React中是没有做数据劫持的，需要调用setState通知React数据发生更新了，然后调用render函数，重新渲染
    • 3.1. Vue的界面渲染界面和React中是一致的，只不过React中是没有template
    • 3.2. React的界面渲染流程: render -> (在render函数中转成)JSX -> div -> React.createElement('div', {} , children) ->(转成)ReactElement -> (转成)DOM
    • 3.3. render函数什么时候重新执行？
      • 总结：只有调用了setState的时候就会重新执行
      • 原因；在React中是没有数据劫持的，那我们怎么知道数据发生变化了，定义一个state，在state里面定义我们自己的数据，当state里面的数据要发生变化时，要求调用setState，通知React数据发生更新了，发生更新后重新调用render函数
      • 只要调用了setState, render函数都会执行，不管原来的数据和当前设置的数据是一样的，都会执行render函数，如果还会执行，性能是不会是有点差
        • 伪代码如下：
          
    • 3.4. state数据都是一样调用了setState()还是会执行render函数，可以使用shouldComponentUpdate生命周期进行性能优化，当数据没有实质性变化时，可以阻止组件重新渲染
      • 示例代码如下：

        shouldComponentUpdate (){if(prevSate.message === this.state.message) return falsereturn true}// 后面可以使用PureComponent进行性能优化`PureComponent -> 会处理性能相关问题 -> 包括处理上面的问题`
      

    • 3.6. React的核心工作机制：
      • render函数：React把很多东西是交给我们处理的，render函数可见，负责界面渲染， 可见性强；
      • JSX编译： jsx交给babel编译；
      • 数据流：state交给我们自己来管理，setState就会重新执行render函数；
      • 可预测性：整个流程是可见的，整个数据的流向的，数据的改变，界面的数据都是可见的，摸得着
    • 3.7. Vue和React数据管理和渲染流程对比图：
      
  • 4. 总结简单回答：React中为什么使用setState，因为它没有做数据劫持，没有做数据劫持对于React来说，它就不知道数据要发生改变了，必须通过一个明确的方法叫setState来告诉它，当前组件我要重新设置值值了，它在知道重新设置数据了，就会重新执行render函数，在render函数里面根据最新的数据重新渲染界面

• 1.2.2. 开发中我们并不能直接通过修改state的值来让界面发生更新；

  • 1. 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改 React并不知道数据发生了变化；
  • 2. React并没有实现类似于Vue2中的object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
  • 3. 我们必须通过setState来告知React已经发生了变化；

• 1.2.3. 疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？

  • 原因很简单，setState方法时从Component中继承过来的
  • 源码截图如下：
    
  • createElement方法时从React中继承过来的
  • 源码截图如下：