让我们来认识一哈React Hook中的useEffecfa函数

前端

2023-07-09 14:32:27

useEffect：掌控函数组件中“副作用”的神奇钩子

在React的世界里，useEffect 钩子可谓是函数组件的福音，它优雅地解决了管理副作用的难题。让我们携手深入探究，揭开它的奥秘，让你在函数组件中游刃有余！

什么是副作用？

在React中，副作用指的是组件之外的任何交互，例如：网络请求、事件监听、修改DOM等。这些操作会对组件外部产生影响，因此需要谨慎处理。

useEffect如何掌控副作用？

useEffect 钩子让你可以在函数组件中执行副作用操作，同时具备类似于类组件生命周期的功能。它接收两个参数：

回调函数： 执行副作用操作的代码
依赖项数组（可选）： 指定在哪些情况下调用回调函数

应用场景一：网络请求

想象你需要在组件加载时从服务器获取数据，useEffect 便可派上用场：

useEffect(() => {
  fetch('https://example.com/api/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []); // 空依赖项数组，仅在组件挂载时调用

应用场景二：事件监听

借助useEffect ，你还能监听事件：

useEffect(() => {
  window.addEventListener('resize', () => {
    setWindowWidth(window.innerWidth);
  });
  
  return () => {
    window.removeEventListener('resize', () => {
      setWindowWidth(window.innerWidth);
    });
  };
}, []); // 空依赖项数组，仅在组件挂载时调用

应用场景三：组件卸载

useEffect 还能在组件卸载时执行清理操作，比如移除事件监听器：

useEffect(() => {
  return () => {
    window.removeEventListener('resize', () => {
      console.log('Window size changed!');
    });
  };
}, []); // 空依赖项数组，仅在组件挂载时调用