React Hooks 详解之 useState 让状态管理变得简单

2023-12-16 16:03:46

引言

在 React 生态系统中，Hooks 已然成为状态管理和功能增强的不二之选。其中，useState Hook 脱颖而出，赋予函数式组件以 state 管理的能力。本文将深入剖析 useState Hook，揭示其如何简化状态管理，让开发更轻松。

什么是 useState Hook？

useState Hook 允许开发者在函数式组件中使用 state。它接受一个初始值作为参数，并返回一个包含当前 state 值和一个更新 state 的函数的数组。

用法

使用 useState Hook 非常简单。首先，将它导入你的组件中：

import { useState } from "react";

然后，在组件中调用 useState，传入初始 state 值：

const [state, setState] = useState(initialValue);

这会创建一个 state 变量 state 和一个更新 state 的函数 setState。

示例

为了更清晰地理解，我们创建一个简单的计数器组件：

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

export default Counter;