这是我参与「第四届青训营 」笔记创作活动的第3天

了解React

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型:
• 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React
• 2013年React正式开源，在2013JsConf上Jordan Walke介绍了这款全新框架
• 2014年后，生态大爆发，各种围绕React的新工具/新框架开始涌现

React的应用场景也很广泛，可用于前端开发、移动端开发和桌面应用开发等。

React的设计思路

UI编程痛点

• 当状态更新的时候，UI 不会自动更新，需要手动地调用 DOM 更新 UI
• 欠缺基本的代码层面的封装和隔离吗，代码层面没有组件化
• UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地狱

响应式与转换式

• 转换式系统：给定输入求输出。典型的转换式系统有：编译器和计算数值的程序
• 响应式系统：监听事件，关注事件，并对事件做出响应，更新UI界面

响应式编程

• 状态更新 UI 自动更新
• 前端代码组件化，可复用，可封装
• 状态之间的互相依赖关系，只需要声明即可

组件化

• 组件是组件的组合/原子组件
• 组件内拥有自己的状态，外部不可见
• 父组件可将状态传入组件内部

状态归属问题

• 多个组件如果要使用同一个状态，那么这个状态必须放在这些组件的公共父组件上

• 当组件嵌套比较复杂时，最好是通过状态管理库来统一管理状态，而不是通过组件之间的嵌套来一层层传递状态。