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

【问题标题】：React/React Native: Changes in a child component's state re-render entire componentsReact/React Native：子组件状态的变化会重新渲染整个组件
【发布时间】：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 将解决您的问题。

标签： javascript reactjs react-native react-hooks react-context

【解决方案1】：

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

【讨论】：