响应式系统与React|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第7天
React 历史与应用
前端应用开发，如Facebook、Instagram、Netflix 网页版
移动原生应用开发
结合Electron 进行桌面应用开发
- 2010年，Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
- 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型
- 2012年 在Facebook 收购Instagram后，该FaxJS项目在内部的到使用， Jordan Walke基于FaxJS的经验
- 2013 年 React正式开源，在2013 JSConf上 Jordan Walke介绍了这款全新的框架
- 2014 -今天： 生态大爆发，各种围绕React的新工具/框架开始涌现
React的设计思路
UI编程痛点
- 状态更新，
UI不会自动更新，需要手动调用DOM进行更新 - 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
响应式与转换式
- 转换式系统：给定输入求解输出，比如编译器的实现，数值计算等场景
- 响应式系统：监听事件，当事件发生后必须快速做出响应，很类似于监控系统，能够及时发现消息的变换
响应式系统能够很好的解决UI编程痛点
- 状态更新，UI自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
React的设计与实现
组件化
- 组件是组件的组合/原子组件
- 组件内拥有自己的状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
大家觉得“当前价格”状态属于谁？那当然是Root节点，方法就是两个节点向上寻找最近的祖宗节点，那节点是怎么样改变价格的呢
：将函数作为属性传递给子组件，这样就可以在Root组件中定义一个修改当前价格的函数，然后将这个函数传给子组件，通过调用该函数修改价格
组件设计
- 组件声明了状态和
UI的映射 - 组件有
Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据 - 组件可由其他组件拼装而成
总结
在这里，我总结一下react的优点。首先，声明上很多东西不用亲自去操作，只需要声明一下，更新一下数据，就会自动实现；其次，他的组件化将一个个功能拆分，使用时组装起来就可以使用，很方便；真的很高效，给力！
