乐闻世界logo

React 内置 Hook 之 useState 深度解析与使用案例

前言

我们都知道 React 从 16.8 版本开始引入了 Hooks 特性，这对于函数式组件来说是一次质的飞跃。它使得我们可以在不必写成 class 形式的情况下，使用 state 和其他特性，使代码更简洁，易读和易于测试。

在所有的 Hooks 中，useState 可谓是基础而且非常关键的一个。我们可通过它在功能组件中声明和操作 state，这对于传统只能在 class 组件中操作 state 的思维是一次重大改变。

这次，我将为大家详细解读 useState 的使用方法和原理，从最基本的语法，到实际场景的应用，再到注意事项和高级的自定义 Hook 使用等，全方位掌握 useState 的使用。

什么是 Hook

React Hooks 是 React 16.8 版本新增的特性，它允许我们在不编写 class 组件的情况下，使用 state 和其它 React 特性。这给函数式组件带来了天翻地覆的变化。

useState 深度解析

React Hooks 之一的 useState 是一个非常强大的功能，它接受 state 的初始值作为参数，返回一个包含 state 变量和相应设置函数的数组。下面我们将围绕实际使用场景，深入解析 useState。

基础语法

javascript
const [state, setState] = useState(initialState);
  • initialState 是 state 变量的初始值。
  • state 是当前的 state 值，setState 是更新 state 值的函数。

这个 setState 函数十分有趣，我们可以通过自定义 Hook 来进行封装，实现更加复杂的逻辑。

自定义 Hook 的编写

自定义 Hooks 是一种复用状态逻辑的方式，“自定义 Hook”其实就是一个函数，该函数以 “use” 开头，内部可以调用其他的 Hook。

javascript
function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

在这个例子中，我们自定义了一个 useCounter Hook，返回了 count 和 increment 两个变量，我们可以在组件中直接使用这两个变量。

使用场景

  • 各种基础类型：useState 不限制 state 的类型，可以是数字、字符串、布尔值，甚至是对象和数组。
  • 简单的各种状态切换：如 Tab 切换、展开收起、切换主题等。
  • 表单的值：如处理用户的输入字段等。

注意事项

  • 不要在循环、条件或嵌套函数中调用 Hook，务必确保总是在你的 React 函数的最顶层调用 Hook。这有助于确保 Hook 在每一次渲染中都在同一个顺序被调用。
  • 在事件处理函数中更新 state：我们需要获得最新的 state 值，因此应该使用函数式的 setState，这意味着我们传递给 setState 的是一个函数，这个函数接受之前的 state 为参数，返回新的 state 值。

比较与 setState

在类组件中，我们使用 this.setState 更新状态，但这是合并更新。而 useState 的 setState 是替换更新，如果你想要基于前一个状态来更新状态，你可以传递一个函数到 setState。

使用 useState 比 this.setState 的好处是，它可以定义多个 state 变量，更加方便和灵活。

使用案例

下面我们来看一个稍微复杂一点的例子：

javascript
import React, { useState } from 'react';

function Counter() {
  const { count, increment } = useCounter(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={increment}>
        点击我
      </button>
    </div>
  );
}

export default Counter;

在这个例子中，我们调用了自定义的 Hook useCounter来实现了一个计数器：

  • 我们通过 useCounter(0)，设定初始值为 0。
  • 用户每点击一次按钮，计数就会加一，我们通过 increment 自定义的函数来处理用户的点击事件。
  • 不同的是，这里的 increment 函数调用的是 setCount 的函数式更新，它接受上一次的 count 作为参数，返回新的 count 值，这样能确保我们总是基于最新的 state 来进行更新。

总结

通过这篇文章，能更深度的理解 useState 这个 Hook。记住，当你在函数组件中需要使用 state 时，可以通过 useState 声明新的 state 变量；当你需要自定义 state 逻辑时，可以想想如何写一个自定义的 Hook。

同时也要记住使用时的注意事项，避免在循环、条件或嵌套函数中调用 Hook，并确保总是在你的 React 函数的最上层层级调用它。