React
React的设计思路
课程重点
- UI 编程痛点
- 响应式与转换式
- React 设计与实现 - 组件化
- React 设计与实现 – 状态归属问题
- React 设计与实现 – 生命周期
1、在React中，数据的流动只能从父组件向子组件传递，而不允许子组件直接修改父组件的数据。
多个状态对应一个UI映射
- Props：父组件传过来的状态
- State:子组件本身自带的状态
当颜色或者url改变，UI显示都会改变，自动刷新
"render函数"通常是指用于生成页面或组件的UI展示的函数。例如，在React中，每个组件都需要定义一个render函数来描述组件的UI。
React （hooks）的写法
钩子函数（Hooks）：指的是React框架中的一种特殊函数，用于在函数组件中添加和管理状态。它可以用来替代类组件中的状态和生命周期方法的使用。
HOOK使用法则： 不要在循环，条件或嵌套函数中调用HOOK。
React 实现
01-转译：将不符合JS的语法转译成符合的
02-虚拟DOM
注意：DOM不是JS的对象，它属于浏览器。我们需要拿到DOM接口才能修改DOM，不能直接修改DOM。
树递归看diffing
TradeOff 权衡
不求全局最优，求局部最优，换取时间
Heuristic 启发式的
React 缺点：父组件改变，所有嵌套子节点也会跟着改变，影响性能。
React 状态管理库
用一个仓库来管理节点状态，每个节点到仓库的时间是一样的，避免了父子节点传递状态的过程。
坏处是这种方案会降低组件的复用性，组件依赖于外部的仓库。
什么状态放入Store? 会被很多组件使用的状态放入Store，比如用户的头像，很多组件的需要渲染这个。
