迹忆客 专注技术分享

使用 useEffect 钩子在 React 中只调用一次函数。 当 useEffect 钩子传递一个空的依赖数组时，它仅在组件挂载时运行。 当我们必须在组件安装时获取数据时，这是首选方法。

import {useEffect, useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  useEffect(() => {
    // 👇️ only runs once
    console.log('useEffect ran');

    function incrementNum() {
      setNum(prev => prev + 1);
    }

    incrementNum();
  }, []); // 👈️ empty dependencies array

  return (
    <div>
      <h2>Number is {num}</h2>
    </div>
  );
};

export default App;

incrementNum 函数仅在组件挂载时调用一次。

我们传递给 useEffect 钩子的第二个参数是一个依赖数组。

第一个参数是一个函数，当组件挂载时以及数组中的依赖项发生变化时会调用该函数。

我们指定了一个空的依赖数组，所以我们传递给 useEffect 钩子的函数只会被调用一次。

注意 ，我们在传递给 useEffect 钩子的函数内部定义了 incrementNum 函数。

我们这样做了，所以我们不必将函数添加到钩子的依赖项数组中。

或者，我们可以在组件之外定义函数或对其进行记忆。

这是一个示例，说明如何调用函数以仅获取一次数据 - 当组件安装时。

import {useEffect, useState} from 'react';

const App = () => {
  const [data, setData] = useState({data: []});

  const [err, setErr] = useState('');

  useEffect(() => {
    // 👇️ this only runs once
    console.log('useEffect ran');

    // 👇️ fetch data from remote API
    async function getUsers() {
      try {
        const response = await fetch('https://www.jiyik.com/api/users', {
          method: 'GET',
          headers: {
            Accept: 'application/json',
          },
        });

        if (!response.ok) {
          throw new Error(`Error! status: ${response.status}`);
        }

        const result = await response.json();

        console.log('result is: ', JSON.stringify(result, null, 4));

        setData(result);
      } catch (err) {
        setErr(err.message);
      }
    }

    getUsers();
  }, []); // 👈️ empty dependencies array

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      {data.data.map(person => {
        return (
          <div key={person.id}>
            <h2>{person.email}</h2>
            <h2>{person.first_name}</h2>
            <h2>{person.last_name}</h2>
            <br />
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们在 useEffect 钩子中定义了一个 getUsers 函数。 该函数仅被调用一次 - 当组件安装并向远程 API 发出单个请求以获取一些数据时。

useEffect 钩子只运行一次，因为我们将一个空的依赖项数组作为第二个参数传递给它。

在 useEffect 钩子内定义我们只想调用一次的函数的另一种方法是在组件外部定义该函数。

如果函数是在组件外部定义的，则不会在每次组件呈现时都重新创建它，并且会保持稳定，因此不必添加到钩子的依赖项数组中。

或者，我们可以使用 useCallback 钩子来记忆函数并将其传递给 useEffect 的依赖项数组。

import {useCallback, useEffect, useState} from 'react';

const App = () => {
  const [num, setNum] = useState(0);

  // 👇️ memoize function (doesn't get re-created every render)
  const incrementNum = useCallback(() => {
    setNum(prev => prev + 1);
  }, []);

  useEffect(() => {
    // 👇️ this only runs once

    incrementNum();
    // 👇️ include it in the dependencies array
  }, [incrementNum]);

  return (
    <div>
      <h2>Number is {num}</h2>
    </div>
  );
};

export default App;

useCallback 钩子采用内联回调函数和依赖项数组，并返回回调的记忆版本，仅当依赖项之一发生更改时才会更改。

现在 incrementNum 函数是稳定的并且在渲染之间不会改变，我们可以安全地将它添加到 useEffect 钩子的依赖项中，它仍然只运行一次。