Изменить разные реквизиты дочернего компонента на основе разных изменений в родительском компоненте в React Hooks?

Question

Каким-то образом я не могу решить эту проблему. Допустим, у меня есть родительский компонент и два подпорки (propA и propB), которые передаются дочернему компоненту. propA изменяется на интервале и чаще. propB только когда пользователь выполняет указанное c действие. Дочерний компонент теперь должен условно проверить, если propB изменяется, все свойства дочернего компонента должны быть отображены заново. Однако при изменении propA должны изменяться только указанные c свойства дочернего компонента, а остальные свойства должны оставаться такими же (из соображений производительности).

В настоящее время у меня есть 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 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 изменяются. Решение не является прямым ответом на ваш вопрос. Но с помощью этого подхода вы можете легко создавать то, что вам нужно.