react 2个同级组件同步状态

在React中，两个同级组件同步状态通常可以通过使用状态提升（state lifting）或使用React的Context API来实现。

方法一：状态提升（State Lifting）

状态提升是一种将状态从一个组件传递到其子组件或同级组件的方法。这种方法通常用于跨组件共享状态。你可以在父组件中创建一个公共状态，并在需要共享该状态的子组件或同级组件中将其作为props传递。

以下是一个示例代码，展示了如何在两个同级组件之间同步状态：

import React from 'react';

// 父组件
function ParentComponent() {
  const commonState = { value: 'initial value' }; // 公共状态

  return (
    <div>
      <ChildComponent1 {...commonState} /> // 将公共状态传递给ChildComponent1
      <ChildComponent2 {...commonState} /> // 将公共状态传递给ChildComponent2
    </div>
  );
}

// ChildComponent1 组件
function ChildComponent1(props) {
  return (
    <div>
      <ChildComponent2.Consumer>
        {value => (
          <div>
            <p>ChildComponent1 的值：{value}</p>
          </div>
        )}
      </ChildComponent2.Consumer>
    </div>
  );
}

// ChildComponent2 组件
function ChildComponent2(props) {
  const [state, setState] = React.useState(props.value); // 创建本地状态并绑定更新函数

  return (
    <div>
      <p>ChildComponent2 的值：{state}</p>
    </div>
  );
}

在上面的示例中，ParentComponent组件中创建了一个公共状态`commonState`，并将其传递给了ChildComponent1和ChildComponent2两个同级组件。ChildComponent2通过使用React的`useState`钩子创建了一个本地状态，并将其绑定到传入的公共状态上，从而实现了两个同级组件之间的状态同步。

方法二：使用Context API

React的Context API提供了一种在组件树中共享状态的方法，而不需要显式地传递props。你可以创建一个Context，并将需要共享的状态作为其值，然后在需要使用该状态的组件中使用Context.Consumer组件。这种方法适用于跨多个组件共享状态的情况。

以下是一个使用Context API实现两个同级组件同步状态的示例：

import React, { createContext, useContext, useState } from 'react';

// 创建Context对象
const SharedStateContext = createContext(null);

// 在父组件中使用Context值和setState方法设置公共状态
function ParentComponent() {
  const sharedState = { value: 'initial value' }; // 公共状态
  const [localState, setLocalState] = useState(sharedState.value); // 在父组件中创建本地状态并绑定更新函数
  const sharedStateValue = sharedState; // 将公共状态赋值给context的值，以便在子组件中使用它
  return (
    <SharedStateContext.Provider value={sharedStateValue}> // 将公共状态作为context的值传递给子组件
      <ChildComponent1 /> // 子组件1使用context的值来获取公共状态，并使用本地状态进行更新操作
      <ChildComponent2 /> // 子组件2使用context的值来获取公共状态，并直接使用本地状态进行渲染操作（不需要更新函数）
    </SharedStateContext.Provider>
  );
}

在上面的示例中，ParentComponent组件创建了一个SharedStateContext对象，并将需要共享的状态作为其值传递给了ChildComponent1和ChildComponent2两个同级组件。ChildComponent1和ChildComponent2分别使用context的值来获取公共状态，并使用本地状态进行渲染操作。这种方法避免了手动传递props的繁琐过程，使得状态同步更加简洁和易于管理。