Question

这里是组件代码的简单表示：

/*
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 的使用有关，但我不确定。

谁能帮我找出可能导致这种情况的原因，以及我应该如何解决？

非常感谢！

Answer 1

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

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

1 个答案: