从 React.useEffect 中的依赖项列表中省略函数道具？

Question

我有以下代码块：

function foo({ bar, func }) {
  useEffect(() => {
    func(bar)
  }, [func, bar])

  ....
}

这是将 func 包含在 React.useEffect 的依赖项列表中的反模式吗？我的印象是 func 的函数定义几乎从不改变。如有错误请指正

Answer 1

这取决于func的值，显然是在父组件中初始化的

但是假设 func 设置为一个永远不会改变的常量函数（大多数情况下都是如此）那么就不需要在此处添加它，您可以只保留 bar 并删除 func 来自 useEffect

的第二个参数

然而，这里的错误做法是，在您的代码中，如果 func 设置为递增 bar 的函数，例如

const func = (bar) => bar + 1;

这将最终无限触发 useEffect，因为每次 bar 更改都会触发 useEffect 并再次递增 bar，依此类推。

如果您想知道 `func` 是否可以更改

我会给你一个示例父组件，func 将在单击按钮时发生变化。

import React, {useState} from "react";

const ParentComponent = () => {
    const increment = bar => bar+1;
    const decrement = bar => bar-1;

    const [func, setFunc] = useState(increment);

    return <div>
         //When this button is clicked, `func` value will be changed
         <button onClick={() => setFunc(decrement)}/>

         // This is your component
         <foo func={func}/>
    </div>
}

从 React.useEffect 中的依赖项列表中省略函数道具？

Omit function props from the dependencies list in React.useEffect?

reactjs

react-hooks

use-effect

如果您想知道 `func` 是否可以更改

从 React.useEffect 中的依赖项列表中省略函数道具？

Omit function props from the dependencies list in React.useEffect?

reactjs

react-hooks

use-effect

如果您想知道 func 是否可以更改

如果您想知道 `func` 是否可以更改