React.useEffect() 的最后一分钟指南

React.useEffect() 是 React 中用于管理函数式 React 组件副作用的钩子之一。借助这个钩子，你可以用很少的代码实现很多功能。

useEffect 接受一个回调函数（也称为“效果”函数），它在每次渲染后运行（默认）。

如果你希望效果运行频率更低，可以提供第二个参数——一个值数组。你可以将它们视为该效果的依赖项。

因此，让我们看一些例子，我将在其中展示如何控制 useEffect 的行为。

1. 没有提供依赖项时

作为第一个参数提供的回调函数将在每次渲染后运行。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs after EVERY rendering
  });  
}

2. 当提供空的依赖项数组（[]）时

作为第一个参数提供的回调函数将在初始渲染后仅运行一次。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs ONCE after initial rendering
  }, []);
}

3. 当提供的依赖项数组具有 props 或 state 值时 [prop1, prop2, ..., state1, state2]

作为第一个参数提供的回调函数仅当任何依赖项值发生变化时才会运行。

import { useEffect, useState } from 'react';

function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

4. 清理后的效果

如果 useEffect 的回调返回一个函数，那么 useEffect() 会将其视为一次效果清理。

useEffect(() => {
  // Side-effect...

  return function cleanup() {
    // Side-effect cleanup...
  };
}, dependencies);

一段时间后清理 effect 是很常见的。这可以通过在传递给 useEffect 的 effect 函数中返回一个函数来实现。下面是一个使用 addEventListener 的示例。

() => {
  useEffect(() => {
    const clicked = () => console.log('window clicked')
    window.addEventListener('click', clicked)

    // return a clean-up function
    return () => {
      window.removeEventListener('click', clicked)
    }
  }, [])

  return <div>
    When you click the window you'll 
    find a message logged to the console
  </div>
}

5. 多重效果

一个功能组件内可以发生多个 useEffect 调用，如下所示：

() => {
  // 🍟
  useEffect(() => {
    const clicked = () => console.log('window clicked')
    window.addEventListener('click', clicked)

    return () => {
      window.removeEventListener('click', clicked)
    }
  }, [])

  // 🍟 another useEffect hook 
  useEffect(() => {
    console.log("another useEffect call");
  })

  return <div>
    Check your console logs
  </div>
}

我希望这篇文章能对某些人有所帮助。

如果你喜欢这篇文章，你可以通过以下方式找到更多：

在 Twitter 上关注我：@forkbikash
在 GitHub 上关注我：@forkbikash
在这个美丽的平台上关注我：@forkbikash

发推文此帖子
在 Twitter 上关注我 @forkbikash

文章来源：https://dev.to/forkbikash/last- 分钟-guide-to-react-useeffect-4n1i