React/React Native：子组件状态的变化会重新渲染整个组件

Posted 2023-04-14

【中文标题】React/React Native：子组件状态的变化会重新渲染整个组件

【英文标题】：React/React Native: Changes in a child component's state re-render entire components

【发布时间】：2021-09-20 07:56:25

【问题描述】：

下面是组件代码的简单表示：

/*
All the necessary imports
*/


export default function ParentComponent() 
    const [parentState, setParentState] = useState(null);
    const username, setUsername = useContext(Username);

    const route = useRoute();
    const navigation = useNavigation();

    useEffect(()=>
        //Logic to call setParentstate based on query results;
    )

    const FirstComponent = () => 
        const [firstState, setFirstState] = useState(null);

        useEffect(()=>
            //Logic to call setFirststate based on query results;
        ,[])
    
        return (
            <View>
               <Text>firstState</Text>
            </View>
        )
    ;

    const SecondComponent = () => 
        const [secondState, setSecondState] = useState(0);
        const number, setNumber = useContext(Number);

        useEffect(()=>
            //Logic to call setSecondstate and setNumber based on query results;
        ,[])
    
        const updateState = () => 
            setSecondState(secondState + 1);
            setNumber(secondState + 1);
        ;
    
        return (
            <View>
               <Text>secondState</Text>
               <TouchableOpacity onPress=updateState>
                   <Text>Update</Text>
               </TouchableOpacity>
            </View>
        );
    ;

    return (
    <View>
        <Text>username</Text>
        <Text>parentState</Text>
        <FirstComponent />
        <SecondComponent />
    </View>
    );

有一个功能可以更新状态并将更改反映在 SecondComponent 上。由于我没有更改 ParentComponent 的状态，因此这不应触发 ParentComponent 的重新渲染。但是，当 secondState 更新时，所有组件都会重新渲染。

我很困惑，因为子组件状态的更新不应该触发父组件的重新渲染，但这一直在发生。

我怀疑这与父组件中的钩子或使用 Context API 有关，但不确定。

谁能帮我找出可能导致此问题的原因，以及我应该如何解决它？

非常感谢！

【问题讨论】：

无论您肯定不想在 ParentComponent 的主体中定义 FirstComponent 和 SecondComponent 的任何其他问题，因为任何时候 ParentComponent 重新渲染，然后子组件将被重新声明，以前的组件将卸载并安装新的组件。

我将您的代码复制/粘贴到正在运行的 codesandbox 中，但我不会重现您描述的问题。我确实必须注释掉上下文代码，因为你没有提供它。您能否更新您的问题以包含所有相关代码？

我认为在ParentComponent 之外定义FirstComponent 和SecondComponent 将解决您的问题。

【参考方案1】：

我看到了一个类似的问题，它通过为每个文件定义一个组件来解决。