React设计思路

前端UI更新的过程

本质上是监听事件，作出响应，是由消息驱动的

React解决的痛点

状态更新，UI自动更新

由转换式变成响应式

前端代码组件化，可复用，可封装

• 组件声明了状态和UI
• 组件内部拥有状态，组件外部不可见 state
• 父组件可以将状态传入组件内部 props

  注意！是单向数据流
  只能父向子传递，子组件通过父组件传递给它的set函数改变父组件的状态

• 组件可以组合

状态之间相互依赖，只需要声明即可

UI之间有很多数据依赖关系，如果手动去更新DOM，依赖链过长时会造成地狱回调

组件的生命周期

所谓的钩子函数，意思就是与某个生命周期环节挂钩

useEffect : componentDidMount

useState：render

React 的实现

JSX 不符合 js 语法

进行转译

返回的 JSX 发生变化时如何更新 DOM

1 操作虚拟DOM

2 与真实的DOM对比有哪些不同，并更新

diff 算法 ：heuristic算法 ，时间复杂度 O(n)

不同类型的元素 => 替换

同类型的DOM元素 => 更新

同类型的组件元素 => 递归

React 状态管理库

背景

子组件与父组件距离太远，会经过很多层传递，更新时也要更新很多子组件

所以可以把共享的状态抽离出来共享

工具

• redux
• mobx
• xstate
• recoil

应用级框架科普