javascript - React Hooks 中根据父组件的不同变化来更改子组件的不同 props？

Question

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

目前，我的子组件内有一个 useEffect Hook :

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 实现这一目标？这实际上会带来更好的性能吗？

Answer 1

据我了解，您可以使用 useMemo hook 来摆脱这个问题。我试图在代码中解释它。

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 }
    </>;
}

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