React的设计和实现

发表于 更新于 分类于 本文字数： 414 阅读时长 ≈ 2 分钟

本篇笔记的目的：站在更高的角度看待React

React的设计思路

  • 解决UI编程的痛点

    1. 状态更新，UI不会自动更新，需要手动调dom api进行更新

      1. 欠缺基本代码的封装和隔离，代码层面没有组件化
      2. UI之间数据依赖，需要手动维护，如果依赖链路过长，会有 callback hell的问题

  • 响应式编程

image-20220210203412954

  • 期望能

    1. 状态更新，UI自动更新
2. 前端代码组件化，可复用，可封装
3. 状态之间的依赖关系，只需要声明即可

  • 组件化

    1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

  • 状态归属问题

    1. react是单向数据流，只能父组件将状态传递给子组件（但可以将改变父组件状态的方法传递给子组件实现父子组件通信）
2. 如何解决不合理的状态上升问题？
3. 组件状态改变后，如何更新dom

React的实现

  • DIff算法
image-20220210212319207

React解决状态管理问题

先说结论：使用状态管理库

  • 状态管理库核心思想：将状态抽离到ui外部进行统一管理。

  • 将状态抽离到ui外部的问题：降低了组件复用性，组件跟外部状态强耦合

何时使用状态管理库？

判断一个状态是不是只属于组件本身，如若是则不需要状态管理库