钩子在React的生命周期中发挥的作用

2023-12-08 22:24:15

React 钩子是一种强大的工具，它通过提供声明式 API 来管理组件的状态和副作用，从而简化了函数组件的编写。在组件的生命周期中，钩子发挥着至关重要的作用，使我们能够控制组件的安装、更新和卸载。

useEffect：管理副作用

useEffect 钩子用于在组件渲染后执行副作用。副作用可以是任何不在 React 渲染器中执行的操作，例如网络请求、定时器或 DOM 操作。

function Component(props) {
  console.log('Body');
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 副作用：设置一个定时器
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清理函数：清除定时器
    return () => clearInterval(timer);
  }, []);
}

在上面的示例中，useEffect 钩子用于在组件渲染后设置一个定时器。每次组件渲染时，这个定时器都会被创建。定时器的清理函数在组件卸载时执行，用于清除定时器，释放资源。

useState：管理状态

useState 钩子用于在组件内部管理状态。状态是组件数据的一部分，它可能会随着时间的推移而改变。

function Component(props) {
  console.log('Body');
  const [count, setCount] = useState(0);

  // 设置状态：使用 setCount 函数更新 count
  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };
}