Reactjs 理解React Hooks'；详尽的deps'；皮棉尺

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

我已经读过了，但是我找不到答案

下面是一个简单的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>
    )
} 

为什么是线头？对于第一个示例，有没有关于lint规则的明确解释

---

或者我不应该在这里使用

useffect

？（我是一个有钩子的noob）

林特规则希望

onChange

进入

useffect

钩子的原因是

onChange

可以在渲染之间更改，而林特规则旨在防止这种“过时数据”引用

例如：

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

    return <MyCustomComponent onChange={onChange} />
}

---

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

详尽的DEP警告的主要目的是防止开发人员在其效果中丢失依赖项并丢失一些行为

Dan abramov——Facebook核心的开发者

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

tl；博士 如果必须在依赖项数组中放置函数：

• 将函数放在组件外部，以便确保不会在每次渲染时更改引用
• 如果可以，在效果之外调用函数，并将结果用作依赖项
• 如果必须在组件范围内声明函数，则必须使用

  useCallback

  hook来记忆函数引用。仅当回调函数的依赖项更改时，才会更改引用

---

是的，这里没有理由使用效果，

useffect

非常类似于

componentWillMount

，

componentDidMount

，当您从

useffect

返回函数时，该函数被视为

componentWillUnmount

。您目前所处理的只是一个简单的状态更改，

useState

hook足以实现这一点，onchange不会更改，但值会更改。@MikeAbeln他们不仅仅是更改状态，他们还调用作为道具传入的单击处理程序。@DaveNewton很好，我没想到这一点。不过，

useffect

似乎并不合适。prop

onChange

可以很容易地移动到

input

的

onChange

方法的主体中。尽管为了清晰起见，它应该重新命名。基本上，问题中给出的第二个示例OP.{onChange}是对父组件的回调，因此它会在更改时使用输入值进行更新。（在本例中）这是一个很好的解释。我还将

useffect

用作订阅工件。这里唯一让我困惑的问题是：如果我还想在组件加载时触发第一次

onChange

？然后，

useffect

对依赖项有意义。但是，皮棉会再次抱怨。

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

    return <MyCustomComponent onChange={onChange} />
}