这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
React 的历史与应用
前端应用开发，移动原生应用开发，结合electron
React的设计思路
原生写UI编程痛点
- 状态更新不会自动更新，需要手动调用DOM->状态更新，UI自动更新
- 缺乏代码层面的封装和隔离->前端代码组件化，可复用可封装
- UI之间的数据依赖需要手动维护->状态相互依赖，只需声明即可
设计思路
- 响应式【事件-执行回调-状态变更-UI更新】
-
组件化 注意：dom不是js，只是js能通过domapi修改dom 状态归属问题——一般都是局部性，也可以通过状态管理库来解决
- 组件声明了状态和UI的映射
- 组件有props、state两种状态
- 组件可以由其它组件拼装而成
- 生命周期【挂载、卸载、改变】
React（hooks）的写法
hooks例子
useState函数来创建
const [x, setX] = useState(0)
useEffect只在挂载的时候执行一次
useEffect(()=>{
document.title = `${x} - ${y} - ${color}`
})
useCount函数来赋值
onClick={()=>setX(x+1)}
hooks
就是挂载的意思，指组件挂载到某个地方
不要在循环、嵌套中调用hooks，这样就不确定了，容易报错
React的实现
问题：
- react不符合js语法->转译
- 返回的jsx改变后，如何更新DOM->虚拟DOM
- 发生改变时如何触发render函数
所有前端框架都是声明式的，为什么浏览器不支持呢？——浏览器只提供平台，你自己决定声明式、指令式
更新次数少-权衡-计算速度快
React状态管理库
如果让状态放在组件内部，那状态会堆积在根节点上，非常高
状态管理库就是把所有状态抽离到UI外部统一管理
redux、xstate、mobx、recoil
状态机【所有的state是共享的】
modern.js——reduck
