介绍React Hook中的useState

是什么

useState是React Hook中最基本的useState Hook之一。它可以将状态添加到函数组件中，并在组件重新渲染时保留该状态，用于处理简单的状态管理问题。

使用

调用useState Hook时，需要传递状态的初始值作为参数。它返回一个数组，第一个值是当前状态，第二个值是更新状态的函数。在调用更新函数时，React会重新渲染组件。

import React, { useState } from 'react';

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

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

多个状态

如果需要使用多个状态，可以像下面这样调用多次useState Hook：

import React, { useState } from 'react';

function Example() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
 
  return (
    <div>
      <label>Name:</label>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <br/>
      <label>Age:</label>
      <input type="number" value={age} onChange={e => setAge(parseInt(e.target.value, 10))} />
    </div>
  );
}

总结

useState是React Hook中最基本的useState Hook之一，用于添加状态和处理简单的状态管理问题。它返回一个数组，第一个值是当前状态，第二个值是更新状态的函数。如果需要使用多个状态，可以像上面的示例代码中那样调用多次useState Hook。