根据 React Hooks 中父组件的不同变化，改变子组件的不同 props？答案

【问题标题】：Change different props of child component based on different changes in parent component in React Hooks?根据 React Hooks 中父组件的不同变化，改变子组件的不同 props？
【发布时间】：2020-03-05 07:52:18
【问题描述】：

不知何故，我没有解决这个问题。假设我有一个父组件和两个传递给子组件的道具（propA 和propB）。 propA 会定期更改并且更频繁。 propB 仅在用户执行特定操作时。子组件现在应该有条件地检查propB是否发生变化，子组件的所有属性都需要重新渲染。但是，当propA 更改时，只有子组件的特定属性应该更改，其他属性应该保持不变（出于性能原因）。

目前，我的子组件中有一个 useEffect 挂钩：

const [childComponent, setChildComponent] = useState();

useEffect(() => {
    const newChild = () => {
        return (
            <View>{"SOME STUFF"}</View>
        )
    }
    setChildComponent(newChild )
}, [props.propB]);

return (
    {childComponent}
)

但是，这会重新渲染所有属性。我怎么能说例如属性color 仅在propB 更改时更改，而rotation 属性在propA 或propB 更改时更改。我将如何使用 React Hooks 实现这一目标？这实际上会带来更好的性能吗？

【问题讨论】：

也许，useMemo 钩子可以解决你的问题。我目前正在做一个项目。我也遇到过同样的情况。而且，我通过使用useMemo钩子摆脱了，我只是简单地记住了组件，然后，我添加了打破的条件。如果此解决方案适合您，我可以在答案中举例说明。
是的，如果您有时间，请提供答案。
React.memo 应该可以解决问题，如果您将您的孩子分解为更多将根据需要呈现的孩子

标签： javascript reactjs react-hooks

【解决方案1】：

据我了解，您可以使用 useMemo 挂钩来解决该问题。我试图在代码中解释它。

const ChildAComponent => ({ childAProp }) => {
    return <>{childAProp}</>
}

const ChildBComponent => ({ childBProp }) => {
    return <>{childBProp}</>
}

const parent => ({ propA, propB }) => {
    const MemoizedChildAComponent = useMemo(() => <ChildAComponent childAProp={propA} />, [propA]);
    const MemoizedChildBComponent = useMemo(() => <ChildBComponent childBProp={propB} />, [propA, propB])

    return <>
       { MemoizedChildAComponent }
       { MemoizedChildBComponent }
    </>;
}

我们在上面的例子中取得了什么。我们说过，当只有propA 改变时重新渲染ChildAComponent，当propA 或propB 改变时重新渲染ChildBComponent。解决方案不是您问题的直接答案。但是，通过这种方法，您可以轻松创建所需的内容。

【讨论】：