React前端面试每日一试 4.什么是React的状态提升（State Lifting）

状态提升（State Lifting）是什么？

状态提升（State Lifting）其实是React中的一种设计模式，用于解决多个组件需要共享相同状态的情况。通常，当两个或多个组件需要相同的状态数据时，我们将该状态提升到它们的共同父组件中，从而在父组件中管理状态，并通过props将状态及其更新函数传递给子组件。

为什么需要状态提升？

在React应用中，组件的状态是局部的和私有的。当多个组件需要共享相同的状态时，保持状态同步和一致性变得困难。通过状态提升，可以确保所有需要共享状态的组件从同一个数据源（共同的父组件）获取状态，从而保持状态的一致性和同步。

示例代码
以下是一个简单的示例，展示了如何通过状态提升在两个子组件之间共享状态。

初始情况：两个独立的子组件

import React, { useState } from 'react';

const InputOne=()=> {
  const [value, setValue] = useState('');

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
     <input value={value} onChange={handleChange} />
  );
}

const InputTwo=()=> {
  const [value, setValue] = useState('');

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
     <input value={value} onChange={handleChange} />
  );
}

function App() {
  return (
    <div>
      <InputOne />
      <InputTwo />
    </div>
  );
}

export default App;

在这个示例中，InputOne和InputTwo组件都有自己的状态value，这意味着每个Input组件管理自己的状态，彼此之间没有共享。但是如果我们的业务需要我们2个组件的状态共享显示和修改.那么就需要在他们的父级组件做一个状态提升.

示例代码
这里我们把value状态提升到共同父组件APP中

import React, { useState } from 'react';

const InputOne=(props)=> {
   const {value, setValue} = props;

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
     <input value={value} onChange={handleChange} />
  );
}

const InputTwo=(props)=> {
  const {value, setValue} = props;

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
     <input value={value} onChange={handleChange} />
  );
}

function App() {
  const [value, setValue] = useState('');
  return (
    <div>
      <InputOne value={value} setValue={setValue}/>
      <InputTwo value={value} setValue={setValue}/>
    </div>
  );
}

export default App;

这样我们只需要做一些简单的改动就可以把2个组件的状态提升共享.

状态提升的好处

1.状态同步：状态提升确保所有需要共享状态的组件从同一个数据源获取状态，保持状态的一致性和同步。
2.简化管理：在父组件中管理状态，使得状态的更新逻辑集中在一个地方，简化了状态管理。
3.提高可维护性：状态提升使得代码结构更加清晰，提高了组件的可维护性和可读性。

总结

状态提升是React中常用的一种模式，用于在多个组件之间共享状态。通过将状态提升到这些组件的共同父组件中，可以确保状态的一致性和同步性，简化状态管理，提高代码的可维护性。
在构建复杂的React应用时，理解和合理使用状态提升，可以有效地解决状态共享问题，构建高效、可维护的用户界面。