了解 React Hooks 'exhaustive-deps' lint 规则

Question

我很难理解 'exhaustive-deps' lint 规则。

我已经阅读了this post 和this post 但我找不到答案。

这是一个带有 lint 问题的简单 React 组件：

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    useEffect(() => {
        onChange(value);
    }, [value]);

    return (
        <input 
           value={value} 
           type='text' 
           onChange={(event) => setValue(event.target.value)}>
        </input>
    )
} 

它需要我将onChange 添加到useEffect 依赖数组中。但据我了解，onChange 永远不会改变，所以它不应该存在。

通常我是这样管理的：

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
        onChange(event.target.value)
    }

    return (
        <input 
           value={value} 
           type='text'
           onChange={handleChange}>
        </input> ​
    )
} 

为什么是棉绒？关于第一个示例的 lint 规则有什么明确的解释吗？

或者我不应该在这里使用useEffect 吗？ （我是一个有钩子的菜鸟）

Answer 1

linter 规则希望 onChange 进入 useEffect 挂钩的原因是因为 onChange 可以在渲染之间进行更改，并且 lint 规则旨在防止这种“陈旧数据”引用。

例如：

const MyParentComponent = () => {
    const onChange = (value) => { console.log(value); }

    return <MyCustomComponent onChange={onChange} />
}

MyParentComponent 的每次渲染都会将不同的onChange 函数传递给MyCustomComponent。

在您的具体情况下，您可能并不关心：您只想在值更改时调用 onChange，而不是在 onChange 函数更改时调用。但是，从您如何使用useEffect 来看，这并不清楚。

---

这里的根源是您的useEffect 有点单调。

useEffect 最适合用于副作用，但在这里您将其用作一种“订阅”概念，例如：“当 Y 改变时执行 X”。由于deps 数组的机制，这确实在功能上起作用（尽管在这种情况下，您还在初始渲染时调用onChange，这可能是不需要的），但这不是预期的目的。

在这里调用onChange 真的不是副作用，它只是为<input> 触发onChange 事件的效果。所以我确实认为你的第二个版本同时调用onChange 和setValue 更惯用。

如果有其他设置值的方法（例如清除按钮），经常需要记住调用onChange 可能会很乏味，所以我可以这样写：

const MyCustomComponent = ({onChange}) => {
    const [value, _setValue] = useState('');

    // Always call onChange when we set the new value
    const setValue = (newVal) => {
        onChange(newVal);
        _setValue(newVal);
    }

    return (
        <input value={value} type='text' onChange={e => setValue(e.target.value)}></input>
        <button onClick={() => setValue("")}>Clear</button>
    )
}

但在这一点上，这是令人毛骨悚然的。

Answer 2

exhaustive-deps 警告的主要目的是防止开发人员在其效果中丢失依赖项并丢失某些行为。

Dan abramov – Facebook 核心开发人员 – strongly recommend to keep that rule enabled。

对于将函数作为依赖传递的情况，React FAQ中有专门的章节：

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

tl;博士

如果你必须在你的依赖数组中放置一个函数：

• 将函数放在组件之外，这样您就可以确保每次渲染时都不会更改引用。
• 如果可以，请在效果之外调用函数，并将结果用作依赖项。
• 如果必须在组件范围内声明函数，则必须使用useCallback 挂钩来记忆函数引用。仅当回调函数的依赖关系发生变化时，引用才会发生变化。