这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
React的应用
- 前端应用开发，如Facebook网页版。
- 移动原生应用开发，如Instagram。
- 结合Electron，进行桌面应用开发。
React的设计思路
UI编程痛点
- 状态更新，UI不会自动更新，需要手动调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
响应式编程
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可以将状态传入组件内部
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- 组件可由其他组件拼接而成 组件内部拥有私有状态State，组件接受外部的Props状态提供复用性，根据当前的Props/State，返回一个UI。
组件
可以用函数或ES6的class定义一个组件。可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
- 函数
没有state和this，直接用外部传递的props。 - class
state和props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
生命周期
diff算法
不同类型的组件，替换。同类型的DOM元素，更新。同类型的组件元素，递归。
React状态管理库
将状态抽离到UI外部进行统一管理。
redux，xstate，mobx，recoil。
状态机
当前状态，收到外部事件，迁移到下一个状态。
