Hooks 原理解析

Hooks 原理解析

内容
1.分析useState原理和源码
2.useRef的作用
3.useContext的作用
4.Vue3 对比 React

分析useState原理

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  console.log("App 运行了")
  const [n, setN] = React.useState(0);
  console.log(`n:${n}`);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  );
}
ReactDOM.render(<App />, rootElement); 

点击button后会发生什么？
首次渲染render <App/>
调用App()
得到一个对象(虚拟DIV)
React就会把这个虚拟DIV变成页面中真实的<div>

用户点击button就会调用onClick函数,执行setN(n+1)
再次render <App/>,调用App()
验证:添加console.log("App 运行了")看看App运行了几次
第1次得到0时“App 运行了”，点button又执行“App 运行了”
证明:这个函数每更新一次UI就会运行一次。

会再次得到一个对象(虚拟DIV)
把新的虚拟DIV跟旧的虚拟DIV对比，看哪里有变化DOM Diff，然后局部更新真<div>

每次调用App(),都会执行useState(0)
第1次运行与第2次运行结果是一样的吗？
验证:添加console.log(n:${n});
点刷新n=0,点+1n=1
证明:同样一句话const [n, setN] = React.useState(0);每次执行时，n的值都不一样。

useState到底做了什么，让每次n的值都不同？
执行setN的时候会发生什么？重新渲染UI
n会变吗？setN不会改变n
App()会重新执行吗？当然会
既然App()会重新执行，那么useState(0)的时候，n每次的值会有不同吗？会不同

分析
1.setN
setN一定会修改某个数据x,将n+1存入某个数据x里
setN一定会触发重新渲染(re-render)
2.useState
useState肯定会从某个数据x读取n的最新值
3.x
每个组件有自己的数据x,我们将其命名为state

实现React.useState

1.初次尝试实现React.useState(0);
n是变量，setN是函数

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

let _state;
const myUseState = (initicalValue) => {
  console.log("myUseState run");
  _state = _state === undefined ? initicalValue : _state;
  const setState = (newValue) => {
    console.log("setState run");
    _state = newValue;
    render();
  };
  return [_state, setState];
};
//教学需要,render只是简化，不用在意render的实现
const render = () => ReactDOM.render(<App />, rootElement);

function App() {
  const [n, setN] = myUseState(0);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  );
}
ReactDOM.render(<App />, rootElement);

因为myUseState会将state重置
我们需要一个不会被myUseState重置的变量
这个变量_state只要声明在myUseState外面即可

如何让两个useState不冲突

如果一个组件用了两个useState怎么办？
第一次使用myUseState时会把0赋值给state,第二次再使用myUseState时又把0赋值给state，那这个state到底是n还是m?

const [n, setN] = myUseState(0);
const [m, setM] = myUseState(0);

由于所有数据都放在_state,所以会冲突。

改进思路
把_state做成一个对象
比如_state={n:0,m:0}
不行，因为useState(0)并不知道变量叫n还是m
把_state做成数组(_state数组方案)
比如_state=[0,0]
貌似可行，试试看

//多个useState
import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

let _state = [];
let index = 0;
function myUseState(initialValue) {
    const currentIndex = index //保存当前的index
  //console.log('currentIndex:'+currentIndex)
    _state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
    const setState = (newState) => {
        _state[currentIndex] = newState;
      //console.log("_state:" + _state)
        render();
    }
    index += 1
  //console.log("currentIndex:" + currentIndex + "index:" + index)
    return [_state[currentIndex], setState];
}

const render = () => {
    index = 0 //重置index
    ReactDOM.render(<App />, rootElement)
};

function App() {
    const [n, setN] = myUseState(0);
    const [m, setM] = myUseState(0);
    return (
        <div className="App">
            <p>{n}</p>
            <p>
                <button onClick={() => setN(n + 1)}>+1</button>
            </p>
            <p>{m}</p>
            <p>
                <button onClick={() => setM(m + 1)}>+1</button>
            </p>
        </div>
    );
}
ReactDOM.render(<App />, rootElement);

解析
1.需求:实现index+1的功能。
思路: 添加中间量存储当前值
因为这个index会+1，currentIndex我们不会去改它。然后你再对index+1时就不会影响"当前的index"了。

2.+1没反应
调试console.log("_state:" + _state)

什么改变了下标的值？
看看currentIndex是不是超过了1？
console.log("currentIndex:" + currentIndex)

怎么会超过1呢？这就是为什么state会变长。
原因: 因为你一直在不停的运行App。
第1次设置n运行结果是0、1，第2次设置m结果是2、3，所以导致了index一直往前加。

function App() {
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
}

解决方法: 每次在渲染App之前，就应该重置index=0

上面_state数组方案的缺点
useState调用顺序
若第一次渲染时n是第一个，m是第二个，k是第三个
则第二次渲染时必须保证顺序完全一致
所以React不允许出现如下代码，会打乱顺序并出现bug
useState不能写在if里

function App(){
  const [n,setN]=React.useState(0)
  let m,setM
  if(n % 2 === 1){ //只在某个时候才去用它
    [m,setN]=React.useState(0)
  }
  ...
}

题外话:Vue 3克服了这个问题

现在的代码还有问题
App用了_state和index,那其它组件用什么？
解决方法:给每个组件创建一个_state和index
又有问题:放在全局作用域里重名了咋整？
解决方法:放在组件对应的虚拟节点对象上

虚拟DOM是函数组件运行得出来的，函数组件运行中会使用useState(),useState的_state和index放在虚拟DOM上，一开始虚拟DOM是空的，运行后就不是空的了。但这个虚拟DOM一开始就有_state和index这2个值，用来存储App组件里的state。

得到App1组件后就可以渲染到虚拟DOM树上，这个DOM树就会映射到div上。在用户点击button后就会执行set(N+1)，set(N+1)会再次执行App组件，App组件再次执行useState就会再次读取_state和index得到App2。

App1和App2的区别就是n不同，做个Diff，把App1和App2差别之处做成一个对象，这个对象叫Patch。把这个Patch再次运行到刚才的div上，那它就知道刚才n=0,现在n=1,那我就会更新n的值。

其实它的模型非常简单，就是我去改这个虚拟组件，我所有的东西都放在虚拟组件的上面。函数每次执行都会得到虚拟组件的对象App1，这个对象Patch可以去更新这个虚拟组件。
每一个组件都有自己的虚拟节点，每一个虚拟节点都会存储_state和index。

总结
1.每个函数组件对应一个React节点*
2.每个节点保存着state和index
3.每个函数里用useState会读取对应节点的state[index]
4.index由useState出现的顺序决定
第一次调用useState index等于0.第二次调用index等于1，以此类推。
5.setState会修改state，并触发更新
useState会得到setState，得到n和setN，setN会修改n的对应的state,这个state是存在节点上的，修改之后会触发更新。

注意: 这篇文章对React的实现做了简化，React节点应该是FiberNode,_state的真实名称为memorizedState,index的实现则用到了链表，有兴趣的可以自行学习

纠正下多数人对useState错误的理解。

错误1:误以为setN会改变n,实际上setN不会改变n

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const [n, setN] = React.useState(0);
  const log = () => setTimeout(() => console.log(`n: ${n}`), 3000);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}
ReactDOM.render(<App />, rootElement);

两种操作
一.先+1后log,无bug
二.先log后+1，有bug
问题:为什么log出了旧数据？
因为有多个n

第2条线:
先点log,第一次App()
n和setN不变，console.log(n)会先读取n的值,然后在3s后打印0
再点+1,第二次App()
会生成一个新的n,这2次渲染n=0和n=1是同时存在内存的。

那我希望有一个贯穿始终的状态，怎么做？

题外话:Vue 3可以实现。只有一个n,每次改的都是同一个n。

三种方法
1’ 全局变量
用window.xxx即可
2’ useRef
useRef不仅可以用于div,还能用于任意数据
3’ useContext
useContext不仅能贯穿始终，还能贯穿不同组件

useRef例子
因为只有一个n,只有一个current值。
但是有个bug,useRef不会让App重新渲染，所以页面上的n不会实时更新。
题外话: Vue 3可以做到当你修改useRef值时，自动渲染App。

function App() {
  const nRef = React.useRef(0); //{current:0}
  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1000);
  return (
    <div className="App">
      <p>{nRef.current} 这里并不能实时更新</p>
      <p>
        <button onClick={() => (nRef.current += 1)}>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

useRef不会让App重新渲染，React不支持。
但是理论上还是可以造出一个手动触发App更新的API,代码如下。

function App() {
  const nRef = React.useRef(0); //{current:0}
  const update = React.useState()[1];
  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1000);
  return (
    <div className="App">
      <p>{nRef.current} 这里并不能实时更新</p>
      <p>
        <button onClick={() => ((nRef.current += 1), update(nRef.current))}>
          +1
        </button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

这种情况不如直接学Vue3。
Vue3
1.借鉴了hook这个思想
2.不使用useState 而是使用useRef，并把useRef用到了极致。
3.自创:当你对useRef.current的值进行变更时，它会自动的去update。

useContext例子： 全局切换主题
useRef只是贯穿一个组件的前中后，useContext不仅能贯穿始终还能贯穿所有组件。
什么是上下文？
上下文就是一个全局变量，只不过它是局部的全局变量。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const rootElement = document.getElementById("root");

const themeContext = React.createContext(null);//初始化一个上下文themeContext

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    <themeContext.Provider value={{ theme, setTheme }}>
      <div className={`App ${theme}`}>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
        <div>
          <ChildB />
        </div>
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}

function ChildB() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("blue")}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

详解
1.value={{ theme, setTheme }}
value={}表示里面是JS，theme是theme:theme的缩写，setTheme也是缩写。
表示我们一开始就把这个全局变量的初始值赋值为一个对象，这个对象有theme、setTheme两个属性。
2.<themeContext.Provider>标签

<themeContext.Provider>
  //标签内是上下文全局变量themeContext的作用域。
</themeContext.Provider>

3.如何在点击button时调用全局变量setTheme？
用全局变量,从themeContext读取setTheme

const { setTheme } = React.useContext(themeContext);

一般是用一个函数放在它身上，这样我们就可以在任何一个子组件/子孙组件里调用最上面的那个组件的全局方法。useContext非常适用于切换主题。
大部分时候用useRef，useRef用多了你就会想用Vue3。

总结
1.组件每次重新渲染，组件函数就会再次执行
2.对应的所有state都会出现分身
新旧n会同时存在，如果你没有setTimeout,旧的n就会自动消失，会被垃圾回收掉。
如果你有setTimeout，它就会setTimeout之后再被垃圾回收掉。
3.如果你不希望出现分身,可以用useRef/useContect 或者Vue3

更多文章，请点击 我的博客