使用 React Hooks 的 useState() 方法来推动应用程序状态

React Hooks 是 React 16.8 新增的功能，它允许函数组件可以使用 state 和其他 React 特性，而不需要写 class。useState() 是其中之一，可以用于在函数组件中添加 state。

在 React 之前，需要使用 class 组件才能使用 state() 方法来存储组件状态。这使得组件变得更复杂和难以理解。React Hooks 可以解决这个问题，它简化了应用程序中状态的管理，并将其与组件紧密集成。

使用 useState() 方法

useState() 方法接收一个初始值，并返回一个数组。数组的第一个值是当前状态的值，第二个值是一个可以改变状态的函数，通常称为 setState() 。可以使用 setState() 来更新状态。

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() 方法来创建一个名为 count 的状态变量，并初始化为 0。 然后在组件中使用 count 和 setCount()，并将它们分别分配给 <p> 元素和 <button> 元素。每次单击按钮，setCount() 会更新 count 状态，诱发重新渲染组件。

结论

使用 useState() 方法，你可以轻松地添加状态到 React 函数组件中，使组件变得更加简单和易于理解。它是快速构建具有动态特性的应用程序的关键步骤之一。

参考资料

• React Hooks 文档
• React 视频教程