面试题：React组件化开发中状态提升的理解与应用

Question

在React组件化开发中，状态提升是一个重要概念。请阐述状态提升的含义，并举例说明在一个父子组件结构中，如何通过状态提升来管理共享状态，假设父组件为`ParentComponent`，子组件为`ChildComponent`，子组件有一个按钮，点击按钮需要更新父子组件都依赖的某个状态。

Answer 1

状态提升的含义

在React组件化开发中，状态提升指的是将多个组件共享的状态提升到它们最近的共同父组件中进行管理。这样做可以确保共享状态在一个地方进行更新和维护，避免状态在不同组件中分散导致的不一致性问题，同时使得数据流向更加清晰，便于调试和维护。

父子组件通过状态提升管理共享状态示例

1. 创建父组件 ParentComponent

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const [sharedState, setSharedState] = useState(0);

    const handleButtonClick = () => {
        setSharedState(sharedState + 1);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <p>Shared State: {sharedState}</p>
            <ChildComponent onButtonClick={handleButtonClick} />
        </div>
    );
}

export default ParentComponent;

2. 创建子组件 ChildComponent

import React from'react';

function ChildComponent({ onButtonClick }) {
    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={onButtonClick}>Click Me</button>
        </div>
    );
}

export default ChildComponent;

在上述代码中，sharedState 状态被提升到了 ParentComponent 中。ParentComponent 通过 props 将 handleButtonClick 函数传递给 ChildComponent。当 ChildComponent 中的按钮被点击时，会调用 handleButtonClick 函数，从而更新 ParentComponent 中的 sharedState 状态，由于 sharedState 同时在 ParentComponent 中被渲染展示，所以父子组件都能感知到状态的变化。