如何在 React 中只调用一次函数

作者

在 React 中只调用一次函数

How to only call a function Once in React

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

应用程序.js
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钩子的函数只会被调用一次。

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

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

或者，我们可以在组件外部定义函数或将其记忆。

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

应用程序.js
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://reqres.in/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;

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

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

useEffect除了在钩子内部定义您只想调用一次的函数之外，另一种方法
是在组件外部定义该函数。

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

或者，您可以使用useCallback挂钩来记忆函数并将其传递给useEffect.

应用程序.js
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钩子的依赖项中并且它仍然只运行一次。

–

发表评论