13. React中为什么使用setState

1.2. 为什么使用setState

1.2.1. Vue和React的数据管理和渲染流程原理对比
- 1. 在React中使用setState来更新数据
- 1. 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把很多东西都封装好了，甚至告诉你这个东西你不需要关系。
    - 1. 简化开发体验：只需要修改数据就可以了，这里有没有重新执行render函数，不关你的事情。
    - 1. 想要了解原理的话，数据劫持，template编译过程，想了解的也可以去了解，不想了解也可以不了解，按照固定模式开发代码就可以了，但是对于底层的东西对于我们来说是不可见的
- 1. 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生命周期进行性能优化，当数据没有实质性变化时，可以阻止组件重新渲染
    - 示例代码如下：
    js 复制代码
```
  shouldComponentUpdate (){
    if(prevSate.message === this.state.message) return false
    return true
  }
  // 后面可以使用PureComponent进行性能优化
  `PureComponent -> 会处理性能相关问题 -> 包括处理上面的问题`
```
  - 3.6. React的核心工作机制：
    - render函数：React把很多东西是交给我们处理的，render函数可见，负责界面渲染，可见性强；
    - JSX编译： jsx交给babel编译；
    - 数据流：state交给我们自己来管理，setState就会重新执行render函数；
    - 可预测性：整个流程是可见的，整个数据的流向的，数据的改变，界面的数据都是可见的，摸得着
  - 3.7. Vue和React数据管理和渲染流程对比图：
- 1. 总结简单回答：React中为什么使用setState，因为它没有做数据劫持，没有做数据劫持对于React来说，它就不知道数据要发生改变了，必须通过一个明确的方法叫setState来告诉它，当前组件我要重新设置值值了，它在知道重新设置数据了，就会重新执行render函数，在render函数里面根据最新的数据重新渲染界面
1.2.2. 开发中我们并不能直接通过修改state的值来让界面发生更新；
- 1. 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改 React并不知道数据发生了变化；
- 1. React并没有实现类似于Vue2中的object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
- 1. 我们必须通过setState来告知React已经发生了变化；
1.2.3. 疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？
- 原因很简单，setState方法时从Component中继承过来的
- 源码截图如下：
- createElement方法时从React中继承过来的
- 源码截图如下：