响应式系统与 React| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第10天
响应式系统与 React
React 的历史与应用
前端应用开发 如：FaceBook、Instagram、Netflix 移动原生应用开发 如：Instagram、Discord、Oculus 桌面应用 结合 Electron 开发 浏览器 3D 渲染 结合 react-three-fiber 框架开发
React 的设计思路
UI 编程痛点
状态更新，UI 不会自动更新，需要手动更新 DOM。 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。 UI 之间的数据依赖关系，需要手动维护，如果依赖链路过长，则会遇到 “Callback Hell”。 响应式与转换式
响应式系统
注重：监听事件，消息驱动 比如：监控系统、UI 界面 转换式系统
注重：给定【输入】求解【输出】 比如：编译器、数值计算 响应式系统
事件 —> 执行既定回调 —> 状态变更 前端 UI
事件 —> 执行既定回调 —> 状态变更 —> UI 更新 响应式编程
状态更新，UI 自动更新。 前端代码组件化，可复用，可封装 状态之间的互相依赖关系，只需声明即可。 组件化 – 总结
组件是 组件的组合/原子组件 组件内拥有状态，外部不可见 父组件可将状态传入组件内部 状态归属问题
思考：
Reacy 是单向数据流，还是双向数据流。？ 单向数据流，数据只能由父组件传至子组件，子组件可通过父组件传递的函数更改该数据。 如何解决状态不合理上升的问题？ 组件的状态改变后，如何更新 DOM？ React 的实现 组件设计
组件声明了状态和 UI 的映射。 组件根据当前 State/Props 与 UI 的映射更改 UI。 组件具有 Props/State 两种状态。 组件内部拥有私有状态 State。 组件接收外部的 Props 状态提供复用性。 “组件”可由其他组件拼装而成。
