reactjs - 了解 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 吗？ (我是一个钩子(Hook)菜鸟)

Answer 1

linter 规则需要 onChange 的原因进入useEffect钩子(Hook)是因为 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这里确实不是副作用，它只是触发 onChange 的效果。事件<input> 。所以我确实认为你的第二个版本同时调用 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>
    )
}

但在这一点上这是令人吹毛求疵的。