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，并触发更新。
