原来useState是这么回事

花开花落花中妖
104 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

前言

周末闲着没事的时候浏览一些技术文章是时候，偶然发现了一篇讲解React Hooks的文章，读完之后茅塞顿开，之前不理解的一些东西豁然开朗。这里我就鹦鹉学舌一下，分享一下我了解到的东西，希望对大家有所帮助。

useState的使用

相信使用过React Hooks的同学对这个就很熟悉了，可以直接跳过这一小段阅读后续的内容，这里我们针对不是很熟悉的小伙伴说明一下。

这里就不说废话了，上来先量一下代码：

    import React, { useState } from 'react';

    function Component() {
      const [count, setCount] = useState(0);
    }

使用场景：函数式组件中

接收参数：useState只接受一个可选参数state。如果传入了参数，那么这个参数将作为初始state，相当于Class组件中在this.state中声明的state。同样的，这个参数的数据类型可以是state可以接受的任意数据类型。

返回值：useState返回了当前 state 以及更新 state 的函数。返回的state是响应式的，内容发生变化后，会自动触发相关内容的更新和渲染。更新 state 的函数相当于Class组件中的this.setState。

至于示例中的[]是ES6中提供的数组解构，count相当于 result[0]，setCount相当于 result[1]。

原理揭秘

useState的底层机制是什么呢？

你可能万万没有想到，useState仅仅是个语法糖，跟Vue中的set、set、delete差不多，api的内部实现都是另有玄机。

useState底层是使用 useReducer 实现的。

那么，useState内部到底干了些什么呢？

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    (initialState: any),
  );
}

上述代码就是useState钩子的底层代码，useState接收了一个初始的initialState，然后直接执行并返回了useReducer方法，那basicStateReducer又是什么呢？basicStateReducer实现代码很简单，如下：

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}

相信通过名字大家都已经看出来了，useReducer是React提供了另一个hook，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。想必现在大家就理解了useState底层的逻辑了。某些复杂场景下，useReducer比useState更加适用，所以官方说useReducer是useState的替代方案。

useReducer的工作原理其实跟Reudx相似，可以将useReducer理解为一个小型的Redux库，更多关于useReducer的原理我们不就在这里做过多的讲解了。

好了，我对于useState的理解到这里就结束了，欢迎大家在下方进行留言交流。

avatar
文章
阅读
粉丝