这是我参与「第四届青训营」笔记创作活动的的第6天
01 React的历史与应用
- 前端应用开发,如Facebook, Instagram,Netflix网页版。
- 移动原生应用开发,如Instagram, Discord, Oculus。
- 结合Electron,进行桌面应用开发。
02 React的设计思路
响应式与转换式
转换式系统:给定输入,求解输出
- 编译器
- 数值计算
响应式系统:监听事件,消息驱动
- 监控系统
- UI界面
组件化
- 组件是 组件的组合/原子组件
- 组件内拥有状态,外部不可见
- 父组件可将状态传入组件内部
组件设计
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
组件代码会是什么样子?
- 组件内部拥有私有状态State。
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props,返回一个UI。
04 React的实现
Virtual DOM(虚拟 DOM)
Virtual DOM 是一种用于和真实 DOM 同步,而在 JS 内存中维护的一个对象,它具有和 DOM 类似的树状结构,并和DOM 可以建立——对应的关系。
它赋予了 React 声明式的 API:您告诉 React 希望让 UI是什么状态,React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
\