基本用法
import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
原理
按照 React 16.8.0 版本之前的机制，我们知道如果某个组件是函数组件，则这个 function 就相当于 Class 组件中的 render() ，不能拥有自己的状态（故又称其为无状态组件，stateless components），所以数据（输入）必须是来自父组件的 props 。而在 >=16.8.0 中，函数组件支持通过使用 Hooks 来为其引入 state 的能力，例如上面所展示的例子：这个 App 组件提供了一个按钮，每次点击这个都会执行 setCount 使得 count 增加 1 ，并更新在视图上。
为了更直观地看到使用了 Hooks 的函数组件和 Class 组件的区别，我写了一个对比示例。 A 是使用了 Hooks 的函数组件， B 是我们熟悉的 Class 组件。当我们分别点击两个按钮更新数据时，我们已知 B 组件不会重新调用而是在 setState 通知变化之后重新渲染（render），而 A 组件是如何处理更新的呢？让我们来分析一下这个过程：
-
A. 点击按钮「A+1」
- 按钮「A+1」的 click 事件触发，执行异步的
setCount(count + 1) - 开启定时器，将在一秒之后执行回调函数
() => logNewValueAfterOneSecond('A', count) - 按钮「A+1」的 click 事件执行到结尾，异步
setCount起效，输出“A’s count: 1”，<span>0</span>更新为<span>1</span>（只更新span的文本） - 一秒到了，定时器的回调函数执行，输出“1 second later, A’s count: 0”
- 按钮「A+1」的 click 事件触发，执行异步的
-
B. 点击按钮「B+1」
- 按钮「B+1」的 click 事件触发，执行异步的
this.setState(state => ({ count: state.count + 1 })) - 开启定时器，将在一秒之后执行回调函数
() => logNewValueAfterOneSecond('B', this.state.count) - 按钮「B+1」的 click 事件执行到结尾，异步
setState起效，输出“B’s count: 1”且<span>0</span>更新为<span>1</span>（只更新span的文本） - 一秒到了，定时器的回调函数执行，输出“1 second later, B’s count: 1”
- 按钮「B+1」的 click 事件触发，执行异步的
通过上面的步骤分析，我们可以看到，有区别的就是步骤 1、4 。先说说 B ——在 B.1 中 setState 通知变化后， React 不会立即更新组件，而是会延迟调用它，到了步骤 3 时 React 对 state 的变更才真正生效（类似于 Object.assign(previousState, {count: state.count + 1})）， this.state.count 的值更新为 1 ，且由于 shouldComponentUpdate() 默认返回 true ，所以成功触发新的一次渲染，于是组件 B 的 DOM 更新（不清楚组件更新过程的同学可以戳这里补功课，重点放在生命周期和setState两个模块）。整个过程没有重新生成这个组件实例，它们始终在同一个环境，所以一秒后输出 B 的 count 是 1 ，而 A ：
- 首先，
A中的count和setCount是由钩子函数useState()返回的两个值。 -
count的初始值是 0 ，与我们赋予的一样。 - 上面我说到，函数组件相当于 Class 组件中的
render()，所以我们大胆假设在按钮第一次点击异步执行setCount(count + 1)之后，重新 render ，即A()被重新调用，此时count从useState()中再次获取到的值更新为 1 ，返回的值通过 diff 最终局部更新。
但是奇怪的是，为什么一秒之后定时器回调函数执行后输出的 count 是旧的值呢？请大家再看一遍 3 ，「A() 被重新调用」，「count 从 useState() 中再次获取值」，那么此时的 count 还为彼时的 count 吗？答案当然是「不」！它们已经是存在于不同环境的两个变量了。
假设 2 中的 count 是 count0（值为0），而 3 中的 count 是 count1（值为1）。定时器是什么时候设定的？在第一次点击按钮时。这个时候 logNewValueAfterOneSecond() 传入的 count 实际上是还没有更新的 count0 ，一秒之后，虽然 count 已更新为 count1 ，但 logNewValueAfterOneSecond() 调用的 count 并没有更新，还是之前的 count0 ，所以必然输出 0 。
这下看起来明了了一些吗？接下来我们来尝试模拟实现一下 useState() 吧～
模拟实现
React.useState() 里都做了些什么：
- 将初始值赋给一个变量我们称之为
state - 返回这个变量
state以及改变这个state的回调函数我们称之为setState - 当
setState()被调用时，state被其传入的新值重新赋值，并且更新根视图
function useState(initialState) {
let _state = initialState;
const setState = (newState) => {
_state = newState;
ReactDOM.render(<App />, rootElement);
};
return [_state, setState];
}
- 每次更新时，函数组件会被重新调用，也就是说
useState()会被重新调用，为了使state的新值被记录（而不是一直被重新赋上initialState），需要将其提到外部作用域声明
let _state;
function useState(initialState) {
_state = _state === undefined ? initialState : _state;
const setState = (newState) => {
_state = newState;
ReactDOM.render(<App />, rootElement);
};
return [_state, setState];
}
好的，现在让我们来调用一下，目前暂时是达到了 React.useState() 一样的效果。Open in CodeSandbox
模拟 React.useState 1.0
- 但是，如果添加多个
useState()，就一定会出现 BUG 了。因为当前的_state只能存放一个单一变量。如果我将_state改成数组存储呢？让这个数组_state根据当前操作useState()的索引向内添加 state
let _state = [], _index = 0;
function useState(initialState) {
let curIndex = _index; // 记录当前操作的索引
_state[curIndex] = _state[curIndex] === undefined ? initialState : _state[curIndex];
const setState = (newState) => {
_state[curIndex] = newState;
ReactDOM.render(<App />, rootElement);
_index = 0; // 每更新一次都需要将_index归零，才不会不断重复增加_state
}
_index += 1; // 下一个操作的索引
return [_state[curIndex], setState];
}
虽然通过使用数组存储 _state 成功模拟了多个 useState() 的情况（Open in CodeSandbox），但这要求我们保证 useState() 的调用顺序，所以我们不能在循环、条件或嵌套函数中调用 useState() ，这在 React.useState() 同样要求，官网还给出了专门的解释。
-
让我们的
setState()也支持函数式更新和惰性初始state：Open in CodeSandbox -
通过
Object.is()比较算法来判断_state是否需要更新：Open in CodeSandbox
至此，我的模拟实现已结束。而实际上， React 并不是真的是这样实现的。上面提到的 _state 其实对应 React 的 memoizedState ，而 _index 实际上是利用了链表。有兴趣的同学可以自己去读源码或者参阅这篇博客。
总结
const [state, setState] = React.useState(initialState);
- React 16.8.0 正式增加了 Hooks ，它为函数组件引入了 state 的能力，换句话说就是使函数组件拥有了 Class 组件的功能。
-
React.useState()返回的第二个参数setState用于更新state，并且会触发新的渲染。同时，在后续新的渲染中React.useState()返回的第一个state值始终是最新的。 - 为了保证
memoizedState的顺序与React.useState()正确对应，我们需要保证 Hooks 在最顶层调用，也就是不能在循环、条件或嵌套函数中调用。 -
React.useState()通过Object.is()来判断memoizedState是否需要更新。
参考资料：
以上 React 的参考资料的中文版直接在前面加“zh-hans.”即可，即 https://zh-hans.reactjs.org/… ，不过似乎要翻墙才可以😂
本文正在参加“写编程博客瓜分千元现金”活动，关注公众号“饥人谷”回复“编程博客”参与活动。
网友评论