面试题：React 中状态提升的场景及实现方式

什么时候需要状态提升

多个组件依赖同一状态变化：当多个组件需要根据同一个数据的变化来更新自身显示或行为时，需要状态提升。例如，一个购物车系统中，商品列表组件和购物车总金额显示组件都依赖购物车中商品的数量和价格信息，此时购物车商品的相关状态就应该提升。
组件间需要相互通信基于同一状态：不同组件之间要基于某个共同状态进行交互操作。比如，一个投票系统中，投票按钮组件和显示投票结果组件，它们之间的交互依赖于投票的总票数这一状态，该状态需要提升。

如何通过状态提升管理共享状态

确定共享状态的所有者：将共享状态提升到这些依赖该状态的组件的最近共同父组件中。
传递状态和更新函数：父组件将状态以属性（props）的形式传递给子组件，同时将更新状态的函数也作为属性传递给子组件。子组件通过调用传递进来的函数来通知父组件状态需要更新，父组件更新状态后，重新渲染并将新的状态传递给子组件。

举例说明实现过程

假设我们有一个简单的温度转换应用，有两个输入框，一个输入华氏温度，一个输入摄氏温度，输入任意一个，另一个自动更新。

创建 React 项目：使用 npx create - react - app temperature - converter 创建项目。
组件结构：
- 根组件 App.js 作为共享状态的所有者。
- 两个子组件 FahrenheitInput 和 CelsiusInput 分别负责华氏温度和摄氏温度的输入和显示。
代码实现：
- App.js：

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

function App() {
    const [fahrenheit, setFahrenheit] = useState('');
    const [celsius, setCelsius] = useState('');

    const handleFahrenheitChange = (value) => {
        setFahrenheit(value);
        setCelsius((parseFloat(value) - 32) * 5 / 9);
    };

    const handleCelsiusChange = (value) => {
        setCelsius(value);
        setFahrenheit(parseFloat(value) * 9 / 5 + 32);
    };

    return (
        <div>
            <h1>Temperature Converter</h1>
            <FahrenheitInput value={fahrenheit} onChange={handleFahrenheitChange} />
            <CelsiusInput value={celsius} onChange={handleCelsiusChange} />
        </div>
    );
}

export default App;

FahrenheitInput.js：

import React from'react';

const FahrenheitInput = ({ value, onChange }) => {
    return (
        <div>
            <label>Fahrenheit:</label>
            <input
                type="number"
                value={value}
                onChange={(e) => onChange(e.target.value)}
            />
        </div>
    );
};

export default FahrenheitInput;

CelsiusInput.js：

import React from'react';

const CelsiusInput = ({ value, onChange }) => {
    return (
        <div>
            <label>Celsius:</label>
            <input
                type="number"
                value={value}
                onChange={(e) => onChange(e.target.value)}
            />
        </div>
    );
};

export default CelsiusInput;

在这个例子中，App 组件作为 FahrenheitInput 和 CelsiusInput 的共同父组件，提升了华氏温度和摄氏温度这两个共享状态，并通过传递状态和更新函数给子组件，实现了两个子组件间基于共享状态的交互。

星途面试题库

面试题：React 中状态提升的场景及实现方式

知识考点

面试题答案

什么时候需要状态提升

如何通过状态提升管理共享状态

举例说明实现过程