0-7【React】Hooks 原理解析（useState、useRef、useContext）

1.useState

• 执行setN的时候：n会变吗？App()会重新执行吗？
  1.n不会变，setN不会改变n
  2.App()会重新执行，会产生一个新的n
  注意：旧n和新n同时存在
  这就是React的思想，永远产生新的对象，不改变旧值
• App()重新执行，那么useState(0)的时候，n每次的值会不同吗?
  答：会。

1.1 分析

• setN
  1.setN 一定会修改数据x，将n+1存入x
  2.setN 一定会触发 重新渲染（re-render）
• useState
  useState 肯定会从 x 读取 n 的最新值
• x
  每个组件都有自己的数据x，我们将其命名为 _state

1.2 多个useState兼容

• 将_state设置为数组
  如：_state=[0,0]
• 每useState一次，就把变量push到数组中
  知道每个变量对应的数组下标即可对其进行操作,顺序很重要

1.3 _state 数组方案的缺点

• useState 调用顺序很重要
  1.若第一次渲染时 n 是第一个，m第二，k第三
  2.第二次渲染则必须保证循序完全一致
• React不允许出现以下代码
  如果if后面还有k，那么当m不满足条件时不执行时，后面k执行，k就取了_state中m的值
  

1.4 虚拟DOM

• 组件App用了_state和index，其他组件用什么？
  答：给每个组件创建一个_state和index
• 放在全局作用域重名怎么办？
  答：放在组件对应的虚拟节点对象上
• 每个组件都有一个对应的虚拟DOM
  

1.5 总结

• 每个函数组件对应一个 React节点
• 每个节点保存着 state 和 index
• useState 会读取 state[index]
• index 有 useState 出现的顺序决定
• setState 会修改 state，并触发更新
• 一个小问题：
  1.每次重新渲染，函数组件就会执行
  2.对应的所有state都会出现 分身
  3.如果不希望出现分身
  4.可以使用 useRef 或 useContext 等

2.useRef

• 每次setN都会产生一个新的n
• 采用useRef
  优点：从始至终只有一个n，且可以直接对n操作
  缺点：n改变，不会自动渲染页面，只能手动（Vue3支持自动）

//创建
const nRef = React.useRef(0) //{current:0}
//使用
return (
  <div>
    {
     nRef.current}
    <button onClick={
     ()=>{
     nRef.current+1}}>+1</button>
  </div>
)

3.useContext

• useContext不仅能贯穿始终，还能贯穿不同组件
• 范围内的组件都可以使用state
  常用于切换主题