useEffect 详尽的依赖规则令人困惑

Question

我在 stackoverflow 上发现了一些与此相关的问题，但没有一个能满足我在使用useEffect. 假设我有一些这样的代码：

const ApiViewer = (props) => {
    const [result, setResult] = useState('')

    useEffect(async () => {
        setResult(await callApi(props.valueThatWillChangeButIOnlyCareAboutItsInitialValue))
    }, [])

    return <div>{result}</div>
} 

该exhaustive-deps规则将抛出，要求我放入props.valueThatWillChangeButIOnlyCareAboutItsInitialValue依赖项数组。我不想这样做，因为我只想要初始值。我可能会在某个地方的单独效果中使用该道具。

我也想不出另一种写法。

我也遇到其他人似乎遇到的问题，即使用我知道永远不会改变的功能/等。我不想将它们添加到这个数组中，看起来很愚蠢。

Dan Abramov 表示，通常禁用它是一个错误，并且稍后会严重影响您。我多年来一直以这种方式使用它，直到这个规则开始在新项目中出现之前我没有发现任何问题。

我使用 React 完全错误吗？

Answer 1

将“详尽的依赖”视为真正的规则将确保组件按预期更新。

如果您想忽略对给定 prop 的更新，您可以通过使用useRef. 您不会在 a 中收到任何警告，useEffect因为从 中返回的基础对象useRef永远不会改变。使用initial前缀也会让下一个开发人员明白这一点。

const ApiViewer = (props) => {
    const [result, setResult] = useState('')
    const initialValueThatWillChangeRef = useRef(props.valueThatWillChange);

    useEffect(async () => {
        setResult(await callApi(initialValueThatWillChangeRef.current))
    }, [])

    return <div>{result}</div>
} 

您可以通过忽略“详尽的依赖项”规则来构建一切按预期工作的示例，但您最终会遇到由于难以调试的原因而中断的微妙情况。