这是我参与「第四届青训营 」笔记创作活动的第24天
响应式系统与React
1.React的历史与应用
- 2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
- 2011年 Jordan Walke创造了FaxJS，也就是后来的React。
- 2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用。
- 2013年 React正式开源，在2013JSConf上Jordan Walke介绍了这款全新的框架
2.React的设计思路
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长则会遇到“Callback Hell”。
总结：
- 组件是 组件的组合/原子组件。
- 组件内拥有状态，外部不可见。
- 父组件可将状态传入组件内部。 组件设计：
- 组件声明了状态和UI的映射。
- 组件有Props/State两种状态。
- “组件”可由其他组件拼装而成。
3.React（hooks）的写法
- useState
- 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
- useEffect
- 传入一个函数，和一个数组，数组是状态的数组，乘坐依赖项，该函数在mount是，和依赖项被set的时候会执行。
- 有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等。
4.React的实现
问题一：
- JSX不符合JS标准语法。
问题二：
- 返回的JSX发生改变时，如何更新DOM。 Virtual DOM（虚拟DOM） Virtual DOM是一种用于和真是DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API：您告诉Recat希望让UI是什么状态，React就确保DOM皮蓬该状态。这使您可以从属性操作，事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
