React以更干净的方式提升状态

React 以更干净的方式提升状态主要涉及到状态提升（Lifting State Up）的概念。状态提升是 React 中管理组件状态的一种常见模式，它有助于在组件之间共享状态，使得组件更加可预测和易于维护。

基础概念

在 React 中，状态（State）是组件内部的数据存储，当状态发生变化时，React 会重新渲染组件以反映最新的状态。然而，当多个组件需要共享同一份状态时，直接在每个组件中管理状态会导致代码冗余和难以维护。这时，我们可以将状态提升到它们的共同父组件中，然后通过 props 将状态和状态更新函数传递给子组件。

优势

代码复用：通过状态提升，可以避免在多个组件中重复相同的逻辑。
易于维护：集中管理状态使得代码更易于理解和维护。
解耦：子组件不再直接管理状态，而是通过 props 接收状态和更新函数，从而实现与父组件的解耦。

类型与应用场景

状态提升主要适用于以下场景：

当多个组件需要访问和修改同一份状态时。
当组件树中的某个组件需要向其他组件传递数据时。

示例代码

假设我们有两个子组件 CounterDisplay 和 CounterControl，它们都需要访问和修改同一个计数器的状态。我们可以将状态提升到它们的共同父组件 CounterApp 中。

// CounterApp.jsx
import React, { useState } from 'react';
import CounterDisplay from './CounterDisplay';
import CounterControl from './CounterControl';

function CounterApp() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <CounterDisplay count={count} />
      <CounterControl increment={increment} decrement={decrement} />
    </div>
  );
}

export default CounterApp;

// CounterDisplay.jsx
import React from 'react';

function CounterDisplay({ count }) {
  return <div>Count: {count}</div>;
}

export default CounterDisplay;

// CounterControl.jsx
import React from 'react';

function CounterControl({ increment, decrement }) {
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default CounterControl;