响应式系统与React（二）｜ 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

Hooks的写法与React实现

Hooks的写法

声明状态useState

const [count, setCount] = useState(0);

• 函数参数是初始值
• 返回值有两个，第一个是可供使用的值，第二个是修改函数

触发器useEffect

useEffect(() => {
  document.title = `You clicked ${count} times`;
})

有两个参数，第一个是一个函数，第二个是一个数组

• 第二个参数没有的时候，只在组件挂载的时候执行一次
• 第二个参数叫做依赖项，在修改的时候被执行

Hooks注意事项

• 不要在循环、条件、嵌套函数中调用Hooks

React的实现

存在的问题

1. JSX不符合JS语法标准
2. 返回的JSX改变时如何更新DOM
3. state/props更新时，需重新触发render函数

问题的解决

1. 转译成JS即可，对应成相应的函数即可
2. 虚拟DOM

关于虚拟DOM

在JS内存维护，与DOM建立一一对应关系（这样就具有了声明式的特性了）。状态改变之后，通过diff算法计算需要更新的节点（组件），重新渲染虚拟DOM，最后再更改DOM。

关于differ算法

通过树状结构判断需要更改的节点，完美算法时间复杂度$O(n^3)$，实际算法略微牺牲（全局最优-->局部最优），时间复杂度$O(n)$。策略：不同类型元素替换，同类型DOM元素更新，同类型组件元素递归。

React状态管理库与应用级框架科普

React状态管理库

核心思想

状态放在UI外部进行管理

优缺点

优：避免状态异常提升到根节点及附近节点 缺：减少组件的复用性，依赖于外部就不能复用了

常见的React状态管理库

• Redux
• xstate
• mobx
• recoil

状态机

（还记得面向对象学的状态机图吗？） 当前状态，收到外部事件，迁移到下个状态

选择状态管理库的时机

状态是被整个APP拥有还是单个组件拥有？ 如果一个状态需要被整个APP使用，那就适合放在store里面

应用级框架科普

next.js

速度快

modern.js

工具多

Blitz

无Api思想