这是我参与「第四届青训营 」笔记创作活动的第8天
React的历史与应用
应用场景
- 写前端网页
- 移动端应用开发
- 结合Electron进行桌面应用
发展历史
人们有需求—>新事物的出现
React设计思路
响应式编程
转换式系统
- 给定输入，求解输出
- 编译器、数值计算等
响应式系统
- 监听事件、消息驱动
- 监控系统、UI界面等
UI编程痛点与期望
组件化
-
组件是组建的组合或原子组件
-
组件内部拥有自己的状态，外部不可见
-
父组件可将状态传入组件内部
-
组件声明了状态和UI的映射
-
组件有Props/State两种状态
-
“组件”可由其他组件拼装而成
React生命周期
React（hooks）写法
不要再循环或嵌套函数中调用hooks
useState
传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect
传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在 mount时，和依赖项被 set 的时候会执行。
有副作用的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM, localStorage 存储数据等。
React实现
三个问题
Problem1
转译
Problem2
状态改变实现实时更新
三个过程
如何求diff
目的：计算速度要快，更新次数要少
需要tradeoff（平衡）
实现局部最优值
- 替换不同类型的元素
- 更新同类型的DOM元素
- 递归同类型的组件元素
React状态管理库
核心思想
将状态抽离到UI外部进行统一管理
状态管理库推荐
- redux
- xstate
- mobx
- recoil
状态机
当前状态，收到外部事件，迁移到下一个状态
