详解React Hooks之useState，助力React技术精进

2023-12-02 14:17:50

useState：解锁 React 函数式组件中的状态管理

在瞬息万变的互联网世界中，创新至关重要，React 作为前端开发框架的佼佼者，凭借其出色的灵活性与扩展性脱颖而出。对于渴望掌握 React 精髓的技术博客创作者而言，了解 useState 至关重要。

useState 简介

useState 是 React 中的一项核心 Hooks API，它允许你在函数式组件中管理状态。传统上，函数式组件无法直接修改其状态，因为状态是只读的。而 useState 提供了一种方法，让你可以创建状态变量，并使用更新函数来修改这些变量的值。

useState 用法

1. 导入 useState

import { useState } from "react";

2. 创建状态变量

const [stateVariable, setFunction] = useState(initialState);

stateVariable： 状态变量的名称。
initialState： 状态变量的初始值。
setFunction： 用于更新状态变量的函数。

3. 使用状态变量

const name = stateVariable;

4. 更新状态变量

setFunction(newState);

useState 实例

1. 计数器

import React, { useState } from "react";

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

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default Counter;

2. 输入框

import React, { useState } from "react";

const TextInput = () => {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <h1>Text: {text}</h1>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
};

export default TextInput;