React 新手必学：揭秘 useState 和 useEffect

2023-10-19 05:04:23

React 新手入门之useState 和 useEffect

对于初次接触 React 的开发者来说，useState 和 useEffect 是两个至关重要的概念，它们使组件能够管理状态和响应生命周期事件。让我们深入探究这两个强大的 hook，了解它们如何增强 React 应用程序的交互性。

useState：管理组件状态

useState hook 允许组件维护其内部状态，该状态由一个或多个值组成。它返回一个数组，其中包含当前状态值和一个用于更新该状态的函数。

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

此代码初始化一个名为 count 的状态变量，其初始值为 0。setCount 函数用于更新此状态。例如，要将计数增加 1，我们可以这样做：

setCount(prevCount => prevCount + 1);

useEffect：响应生命周期事件

useEffect hook 允许组件在组件装载、更新或卸载时执行副作用。它接受一个回调函数，该函数中包含您希望执行的逻辑。

useEffect(() => {
  console.log("组件已装载");

  return () => {
    console.log("组件已卸载");
  };
}, []);

在此示例中，useEffect hook 在组件装载时输出 "组件已装载"。当组件卸载时，它会运行一个清理函数，其中包含 "组件已卸载" 的输出。

结合 useState 和 useEffect

useState 和 useEffect 可以一起用于创建交互式和响应式的 React 组件。例如，我们可以创建一个计数器组件，使用 useState 来管理计数状态，并使用 useEffect 来侦听按钮点击事件：

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

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

  useEffect(() => {
    const handleClick = () => {
      setCount(prevCount => prevCount + 1);
    };

    document.getElementById("button").addEventListener("click", handleClick);

    return () => {
      document.getElementById("button").removeEventListener("click", handleClick);
    };
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button id="button">Increase Count</button>
    </div>
  );
};

export default Counter;