React hook如何在父级重新渲染时避免执行子组件答案

【问题标题】：React hook how to avoid executing child components when parent rerendersReact hook如何在父级重新渲染时避免执行子组件
【发布时间】：2020-07-27 02:37:10
【问题描述】：

鉴于以下都是用 react hooks 编写的：

export Parent = () => {
    const [msgValue, setMsgValue] = useState();
    ....

    return {
        <>
            ...
            <Child setMsgValue={setMsgValue}/>
            ...
        </>
    }
}

shouldSkipUpdate = (oldProps, newProps) => {
    ...
    return true;
}

export Child = React.memo({setMsgValue} => {
    return (
        <>
            <HeavyComponent1>
            <HeavyComponent2>
            <InputBox onChange={setMsgValue}>
        </>
    )
}, shouldSkipUpdate);

我的问题是输入框没有响应，我的调查显示每次按键，<Child>都会被执行一次，甚至shouldSkipUpdate返回true，这反过来又导致<HeavyComponent1>和<HeavyComponent2>代码被执行并导致滞后。

我做错了什么以及如何防止<HeavyComponent> 被执行？

我也对 re-render 和 the component code gets executed 有点困惑，如果能得到澄清也很高兴。

【问题讨论】：

我个人在钩子和函数组件方面玩了很多，从你这里的情况来看，HeavyComponents 不应该重新渲染，想知道我们是否可以在 shouldSkipUpdate 函数中看到 ...。
因此我对“重新渲染”感到困惑，HeavyComponents 可能不会“重新渲染”，但我可以看到其中的代码被执行...
您是否有意将 setMsgValue 函数作为参数传递给 Child 而不是 props 对象？
@rayhatfield 啊抱歉我忘了在这里输入，更新了我的问题
我的意思是在 Child 的定义中。 (setMsgValue) => { … }

标签： javascript reactjs

【解决方案1】：

请检查下面的代码框，我有一个子组件，即使父组件被渲染，它也不会被渲染。希望你能清楚地知道需要做什么。

https://codesandbox.io/s/friendly-cerf-qme94

【讨论】：

嗯，你是对的，对不起，我没有分叉沙箱并修改为接近我实际拥有的内容，并且没有执行繁重的组件......
@James，你能把它标记为答案吗？这对其他人会有所帮助，因为许多人会发现这个问题很有用。

【解决方案2】：

如果 shouldSkipUpdate 返回 true，则组件不会重新渲染。您是否有可能在树中的其他位置有 HeavyComponent1 和/或 HeavyComponent2，并且这些组件实例被执行和呈现？

【讨论】：

【解决方案3】：

我刚刚意识到 InputBox 正在被 formsy 包装，它以某种方式更新了导致所有内容重新渲染的父组件。

【讨论】：