Reactjs 使用 useState() 钩子

在 React 中，useState() 钩子是一种用于管理组件内部状态的钩子。它使得我们可以改变组件状态，并在组件重新渲染时更新组件。

基本用法

通过在组件中调用 useState()，我们可以获得一个状态变量和一个函数，该函数用于更新该变量。如下所示，在函数组件中定义一个计数器：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的代码中，useState(0) 的初始值为 0。setCount() 函数用于更新计数器状态的值。

多个状态变量

一个组件可以拥有多个状态变量。在下面的例子中，我们使用两个状态变量保存名字和年龄。

function NameAndAge() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  const handleName = (e) => {
    setName(e.target.value);
  }

  const handleAge = (e) => {
    setAge(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleName} />
      <input type="text" value={age} onChange={handleAge} />
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

与对象和数组一起使用

useState() 钩子可以轻松地处理包含对象和数组等复杂数据类型。例如，在下面的例子中，useState() 钩子处理包含订单的数组。

function OrderList(order) {
  const [orders, setOrders] = useState([]);

  const handleClick = () => {
    const newOrders = [...orders, order];
    setOrders(newOrders);
  }

  return (
    <div>
      <button onClick={handleClick}>Add Order</button>
      <ul>
        {orders.map((order, index) => (
          <li key={index}>{order}</li>
        ))}
      </ul>
    </div>
  );
}

在上面的代码中，我们使用 spread 操作符 (...) 创建一个新的订单数组。然后，我们调用 setOrders() 来更新状态变量。

后记

useState() 钩子是 React 中最简单和最常用的钩子之一。不仅可以管理组件的状态，还可以处理对象和数组等复杂数据类型。学会使用它，将是一个 React 程序员的必修课程。