useState() hook 的原理解析

目录

1、useState 简单描述

2、简单的 useState 实现

3、应对多个 useState() 改进

4、组件内部的 _state、index

---

1、useState 简单描述

我们通过最简单 +1 操作来分析一下函数组件的 useState() 工作原理。该应用的具体代码如下，使用 useState(0) 声明一个初始值为 0 的变量，该方法返回一个数组，数组的第一项为变量 n 的读标识，通过 {n} 的方式可以对其进行读取。数组的第二项为变量 n 的写方法，通过 setN(n+1) 可以对变量 n 进行 +1 操作。

import React from "react";
import ReactDOM from "react-dom";

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

描述：页面在首次渲染时会 render 渲染 <App /> 函数组件，其实际上是调用 App() 方法，得到虚拟 DOM 元素，并将其渲染到浏览器页面上。当用户点击 button 按钮时会调用 setN(n+1) 方法，然后再进行一次 render 渲染 <App /> 函数组件，其实际上还是调用了 App() 方法，得到一个新的虚拟 DOM 元素，然后 React 会执行 DOM diff 算法，将改变的部分更新到浏览器的页面上。

问题：页面首次渲染和进行 +1 操作，都会调用 App() 函数去执行 const [n, setN] = React.useState(0); 这行代码，那它是怎么做到在 +1 操作后，第二次渲染时执行同样的代码，却不对变量 n 进行初始化的，而是拿到 n 的最新值的呢 ？

2、简单的 useState 实现

应对上述问题我们来分析一下，首先 setN(n+1) 并不会立即改变 n ，而是生成一个新的 n+1 的中间值存起来， setN(n+1) 操作一定会触发 <App /> 函数组件的重新渲染，重新渲染时 useState 会去读取 n 变量的最新值。那我们根据当前分析，尝试实现 React.useState()，这里有参考链接：查看实现过程。代码如下：

function useState(initialValue) {
  let state = initialValue;    //这样写每次执行 useState都会将state初始化
  function setState(newState) {
    state = newState;
    render();    //重新渲染会调用 App()，执行 useState(0) 又将n+1置为0了
  }
  return [state, setState];
}

//这时我们发现，点击 Button 的时候，n 并不会变化，为什么呢？
//我们没有存储 state，每次渲染 Counter 组件的时候，state 都是新重置的。
//自然我们就能想到，把 state 提取出来，存在 useState 外面。

let _state; // 把 state 存储在外面

function useState(initialValue) {
  _state = _state || initialValue; // 如果没有 _state，说明是第一次执行，把 initialValue 复制给它
  function setState(newState) {
    _state = newState;    //实际修改的是_state，重新渲染也会去拿_state
    render();
  }
  return [_state, setState];
}

3、应对多个 useState() 改进

上述的实现方式仅适用于函数组件中使用单个变量，如果使用多个变量呢？那就需要调用两次 useState()，我们就需要对其进行一下改进了，不然会造成多个变量存在一个 _state 中，这样会产生冲突覆盖的问题：

改进思路有两种：（1）把 _state 做成一个对象，比如：_state:{n:0，m:0}。这种方式不太符合需求，因为在使用 useState hook 的时候只会传递一个初始值参数，不会传递名称。（2）把 _state 做成一个数组，比如：_state:[ 0,0  ]

import React from "react";                           function App() {   
import ReactDOM from "react-dom";                      const [n, setN] = myUseState(0);
                                                       const [m, setM] = myUseState(0);//两个变量
let _state = [];                                       return (
let index = 0;                                            <div className="App">
                                                             <p>{n}</p>
function myUseState(initialValue) {                          <p>
  const currentIndex = index;    //这里很关键                     <button onClick={() => setN(n + 1)}>+1</button>
  index += 1;                                                </p>
  _state[currentIndex]=_state[currentIndex] || initialValue; <p>{m}</p>
  const setState = newState => {                             <p>
    _state[currentIndex] = newState;                             <button onClick={() => setM(m + 1)}>+1</button>
    render();           //重新渲染                           </p>
  };                                                      </div>
  return [_state[currentIndex], setState];             );
}                                                    }

const render = () => {                               const rootElement = document.getElementById("root");
  index = 0;/*重置index，防止修改变量时 index越界*/    ReactDOM.render(<App />, rootElement);
  ReactDOM.render(<App />, rootElement);
};
//----------------------------------------------------------------------------------------------------------
if (n % 2 === 1) {    //这种使用 useState的方式在 React 中是不被允许的
    [m, setM] = React.useState(0);
}

应对多个变量的问题，React 引用了数组对其进行解决，但是这中改进方式有一个缺点，由于数组不像对象，有对应的键，数组只能依靠顺序找到对应的变量，所以在 React 中不允许将 useState() hook 放到 if 判断语句中，这样就会导致变量在数组中的顺序混乱。补充：Vue 3 克服了上述顺序的问题。

4、组件内部的 _state、index

在 React 中一个文件中往往会有多个组件，App用了 _state和index，那其他组件用什么？我们需要给每个组件创建一个_state 和 index 变量，但是几个组件在一个文件中会导致  _state、index 变量冲突。

应对上述问题，React 将 _state 和 index 变量放在组件对应的虚拟节点对象上。App组件的更新过程：

在 React 函数组件中，每个组件对应一个 React 节点，每个节点保存着 _state 和 index，组件在被调用时执行 useState 会读取 _state[index] 的值，其中 index 变量是由 useState 出现的顺序决定，setState 会修改 state，并触发更新。