理解React Hooks的``穷尽-下降''棉绒规则

Question

我很难理解“穷尽”的皮棉规则。

这是一个带有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>
    )
}

为什么皮棉？关于第一个示例的皮棉规则有任何清楚的解释吗？

还是我不应该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在这里，调用确实不是副作用，而只是触发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>
    )
}

但是在这一点上，这是分裂头发的。