React 16.8 入门：useState 和 useEffect 十分钟速览

React Hooks 简介

React Hooks 是一种在函数组件中使用状态和其他 React 特性的新方法。在 React 16.8 之前，只能在类组件中使用状态和生命周期方法。但是，Hooks 允许您在函数组件中使用这些特性，从而使函数组件更加强大和灵活。

useState Hook

useState Hook 用于管理组件状态。它接受一个初始状态值作为参数，并返回一个数组，其中包含两个值：当前状态值和一个更新状态值的函数。

例如，以下代码创建一个名为 count 的状态变量，并初始化为 0：

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

然后，您可以使用 setCount 函数来更新 count 的值。例如，以下代码将 count 的值增加 1：

setCount(count + 1);

useEffect Hook

useEffect Hook 用于处理组件的副作用。副作用是指组件对 DOM 或其他外部资源（如 API 调用）产生的影响。

例如，以下代码创建一个 useEffect Hook，会在组件每次渲染后将 count 的值记录到控制台：

useEffect(() => {
  console.log(`Current count: ${count}`);
}, [count]);

useEffect Hook 的第一个参数是一个函数，该函数将在组件每次渲染后执行。第二个参数是一个数组，其中包含 useEffect Hook 应该监视的状态变量。如果数组中的任何一个状态变量发生变化，useEffect Hook 的函数将再次执行。

何时使用 useState 和 useEffect

useState Hook 用于管理组件状态。您可以使用它来跟踪用户输入、表单数据或任何其他类型的组件状态。

useEffect Hook 用于处理组件的副作用。您可以使用它来记录日志、执行 API 调用或更新 DOM。

总结

useState 和 useEffect 是 React 16.8 中引入的两个新的 Hooks。它们允许您在函数组件中使用状态和其他 React 特性，从而使函数组件更加强大和灵活。

在本文中，我们探讨了 useState 和 useEffect Hook 的基础知识。我们学习了如何使用 useState Hook 来管理组件状态，以及如何使用 useEffect Hook 来处理组件的副作用。

如果您想了解有关 React Hooks 的更多信息，请参阅 React 官方文档。