React useState Hook 的 4 个代码示例，带你搞懂状态管理

前端

2023-11-11 03:07:03

概述：函数组件与类组件的区别

在 React 中，组件可以分为函数组件和类组件。函数组件是一种更简单的组件类型，它使用 JavaScript 函数编写，而类组件使用 JavaScript 类编写。

函数组件的优点是：

更简洁：函数组件的代码通常更简洁，更容易理解和维护。
更易于测试：函数组件更容易被测试，因为它们没有类实例的状态和生命周期方法。

类组件的优点是：

更强大：类组件更强大，它们可以访问更多的功能，例如状态管理、生命周期方法和 refs。
更灵活：类组件更灵活，它们可以实现更多的功能，例如在组件内部使用状态。

useState Hook 简介

useState Hook 是一个用于管理状态的函数，它允许你在函数组件中使用状态，而无需将其转换为类组件。useState Hook 有两个参数：

初始状态：这是状态的初始值。
更新状态的函数：这是一个函数，用于更新状态。

useState Hook 返回一个数组，数组的第一个元素是当前状态，数组的第二个元素是更新状态的函数。

useState Hook 的使用示例

1. 基本使用

import React, { useState } from "react";

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

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

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

export default Counter;

在这个示例中，useState Hook 被用来管理一个名为 count 的状态变量。count 的初始值为 0。incrementCount 函数用来更新 count 的值。

2. 初始状态为对象

import React, { useState } from "react";

const App = () => {
  const [user, setUser] = useState({
    name: "John Doe",
    age: 30,
  });

  const updateUser = (updatedUser) => {
    setUser({ ...user, ...updatedUser });
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.age}</p>
      <button onClick={() => updateUser({ name: "Jane Doe" })}>Update User</button>
    </div>
  );
};

export default App;

在这个示例中，useState Hook 被用来管理一个名为 user 的状态变量。user 的初始值为一个对象，其中包含 name 和 age 属性。updateUser 函数用来更新 user 的值。

3. useState Hook 与事件处理函数结合使用

import React, { useState } from "react";

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

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

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

export default App;

在这个示例中，useState Hook 被用来管理一个名为 count 的状态变量。handleButtonClick 函数是一个事件处理函数，它被用来处理按钮的点击事件。当按钮被点击时，handleButtonClick 函数调用 setCount 函数来更新 count 的值。

4. useState Hook 与生命周期函数结合使用

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(`Count is now ${count}`);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;