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