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

不知何故，我对这件事还没有完全了解。假设我有一个父组件和两个prop（

propA

和

propB

）传递给子组件

propA

每隔一段时间更改一次，并且更改频率更高

propB

仅当用户执行特定操作时。子组件现在应该有条件地检查

propB

是否更改，子组件的所有属性都需要重新呈现。但是，当

propA

更改时，只有子组件的特定属性应该更改，而其他属性应该保持不变（因为性能原因）

目前，我的子组件中有一个

useffect

挂钩：

const [childComponent, setChildComponent] = useState();

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

return (
    {childComponent}
)

const[childComponent，setChildComponent]=useState（）；
useffect（（）=>{
常量newChild=（）=>{
返回(
{“一些东西”}
)
}
setChildComponent（newChild）
}，[props.propB]）；
返回(
{childComponent}
)

---

但是，这将新渲染所有属性。例如，当

propB

改变时，属性

color

才会改变；当

propA

或

propB

改变时，属性

rotation

也会改变。我如何使用React钩子实现这一点？这真的会带来更好的性能吗？

据我所知，您可以使用

usemo

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

const ChildAComponent=>（{childAProp}）=>{
返回{childAProp}
}
常量ChildBComponent=>（{childBProp}）=>{
返回{childBProp}
}
const parent=>（{propA，propB}）=>{
常量memorizedChildaComponent=useMemo（（）=>，[propA]）；
const memorizedChildbComponent=useMemo（（）=>，[propA，propB]）
返回
{MemorizedChildaComponent}
{MemorizedChildbComponent}
;
}

---

我们在上面的例子中所取得的成就。我们说过，仅当

propA

更改时，重新呈现

ChildAComponent

，当

propA

或

propB

更改时，重新呈现

ChildBComponent

。解决办法不是直接回答你的问题。但是，通过这种方法，您可以轻松创建所需的内容。

据我所知，您可以使用

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

const ChildAComponent=>（{childAProp}）=>{
返回{childAProp}
}
常量ChildBComponent=>（{childBProp}）=>{
返回{childBProp}
}
const parent=>（{propA，propB}）=>{
常量memorizedChildaComponent=useMemo（（）=>，[propA]）；
const memorizedChildbComponent=useMemo（（）=>，[propA，propB]）
返回
{MemorizedChildaComponent}
{MemorizedChildbComponent}
;
}

---

我们在上面的例子中所取得的成就。我们说过，仅当

propA

更改时，重新呈现

ChildAComponent

，当

propA

或

propB

更改时，重新呈现

ChildBComponent

。解决办法不是直接回答你的问题。但是，通过这种方法，您可以轻松创建所需的内容。

也许，

usemo

hook可以解决您的问题。我目前正在做一个项目。我也遇到过同样的情况。而且，我通过使用

usemo

hook摆脱了它，我只是简单地记忆了组件，然后，我添加了中断的条件。如果这个解决方案适合您，我可以在答案中用一个例子来解释。是的，如果您有时间，请提供一个答案。

React.memo

应该可以解决这个问题，如果您将您的孩子分解为更多的孩子，这些孩子将根据需要呈现，

useMemo

hook可以解决您的问题。我目前正在做一个项目。我也遇到过同样的情况。而且，我通过使用

usemo

hook摆脱了它，我只是简单地记忆了组件，然后，我添加了中断的条件。如果这个解决方案适合您，我可以在答案中用一个例子来解释。是的，如果您有时间，请提供一个答案。

React.memo

应该可以解决这个问题，如果您将您的孩子分解为更多的孩子，并根据需要进行渲染