这是我参与「第五届青训营 」伴学笔记创作活动的第16天，学习的是关于响应式系统与 React 的相关知识。
一、React 的历史与应用
（一）前端应用
1、前端应用开发，如Facebook、Instagram、Netfix网页版
2、移动原生应用开发，如nstagram、Oculus
3、结合 Electron，进行桌面应用开发
（二）开发历程
- 2010年：Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计
- 2011年：Jordan Walke 创造了 FaxJS —— React 原型
- 2012年：在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验创造了 React
- 2013年：React 正式开源，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
- 2014年：生态大爆发，各种围绕 React 的新工具/新框架开始涌现
二、React 的设计思路
（一）用原生 JavaScript进行UI编程的痛点
1、状态更新，UI 不会自动更新，需要手动调用 DOM 进行更新
2、欠缺基本的代码层面的封装和隔离，代码层面没有组件化
3、UI 之间的数据依赖关系需要手动维护，如果依赖链路过长会引起回调地狱【Callback Hell】
（二）响应式与转换式
1、响应式系统
2、前端UI
（三）React 响应式编程优点
1、状态更新，UI 自动更新
2、前端代码组件化，可复用，可封装
3、状态之间的互相依赖关系，只需声明即可
（四）组件化
1、组件是组件的组合/原子组件
2、组件内部拥有状态，外部不可见
3、父组件可将状态传入组件内部，以便于父组件能控制子组件
（五）组件状态归属问题
思考：将某网站的手机广告页面（前端页面）进行组件隔离，那么，「当前价格」属于哪部分？ ——Root节点（能够保证其他组件部分共享“价格”这一状态，但在大多数情况下，状态具有局部性）
1、共享状态归属于两个组件节点的最近祖先节点，即状态提升
2、React 是单向数据流，永远是父组件给子组件传递状态，子组件只能调用函数更改状态
3、使用状态管理库如 redux 解决状态不合理提升的问题
4、如何修改 DOM : 将 JSX 文件转义为 JS 文件、利用虚拟 DOM 树和 diff 算法来更新 DOM
总结
- 组件设计
- 组件声明了状态和 UI 的映射
- 组件有 props 和 state 两种状态
- 组件可由其他组件拼装而成
- 组件代码样式
- 组件内部拥有私有状态 state
- 组件接受外部的 props 状态提供复用性
- 根据当前的 state 和 props 返回一个 UI
三、React （hooks）的写法与 React 实现
（一）代码介绍
import React, { useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
import React, { useState, useEffect } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
// 使用一个副作用，传入的[count]数组使得此副作用只有当count变量改变时才会被调用
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
（二）React 的实现
1、React 的问题
（1）React 的 JSX 语法不符合 JavaScript 标准语法
（2）返回的 JSX 发生改变时，如何更新 DOM
（3）state/props 更新时要重新触发 render 函数
2、React 的实现
（1）将 JSX 文件转译（transpile）成 JS 文件
（2）Virtual DOM（虚拟 DOM）
真实 DOM 是浏览器创建页面的文档对象模型；Virtual DOM 是一种用于和真实DOM同步，而在JS 内存中维护的一个对象，具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。
它赋予了 React 声明式的 API，告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态，前端工程师便可以从属性操作、事件处理和手动 DOM 更新这些操作中解放出来。
（3）利用 Diff 算法
四、React 状态管理库与应用级框架科普
（一）核心思想
将状态抽离到 UI 外部进行统一管理
（二）常见状态管理库
redux、xstate、mobx、recoil
（三）状态机
当前状态收到外部事件，迁移到下一个状态
（四）应用级框架科普
1、NEXT.JS
2、Modern.JS—现代 Web 工程体系
3、Blitz
