响应式系统与React | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的第9天
1、React的历史与应用
- 前端应用开发（如 Facebook, Instagram, Netflix网页版）。
- 移动原生应用开发（如lnstagram, Discord, Oculus）。
- 结合Electron，进行桌面应用开发。
2、React设计思路
产生原因——UI编程痛点
-
状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
-
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
-
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 “Callback Hell” 。
React的产生——响应式编程
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
注意：React是单向数据流，只能父组件传给子组件
组件化
1.组件声明了状态和UI的映射。
2.组件有Props/State两种状态。
3.“组件”可由其他组件拼装而成。
3、React(hooks)的写法
const [color, setColor] = useStatel('blue'); //最开始是蓝色
<button type="button" onclick={() => setcolor('red')}>点击我，改变颜色
</button> //点击后变成红色
useEffect:
传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。 有“副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。
useEffect(() => {
document.title = '${x} - ${y} - ${color}';
});
Hook使用法则 不要在循环，条件或嵌套函数中调用Hook。
4、React的实现
Virtual DOM(虚拟DOM)
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API: 您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
5、React状态管理库
1、redux
项目中所有的state都以一个对象树的形式存储在一个单一的store中。唯一改变state的办法是触发action，一个描述发生什么的对象。为了描述action如何改变state树，则需要编写reducers。
2、对比redux，mobx，recoil
redux是集中式管理state，而recoil和mobx是分散式的recoil目前只适用于hooks函数recoil时facebook开发的，可以使用react内部的调度机制，这是redux和mobx不支持的
