根据React Hooks中父组件的不同变化，更改子组件的不同道具

Question

不知怎么的，我没有想到这个问题。假设我有一个父组件和两个传递给子组件的道具(propA和propB(。CCD_ 3在间隔上并且更频繁地改变。仅当用户正在执行特定操作时才使用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实现这一点？这真的会带来更好的性能吗？

Answer 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。解决办法不是直接回答你的问题。但是，通过这种方法，你可以轻松地创建你需要的东西。