React--》React组件间数据的通信与共享

在React中，组件间的通信和数据共享可以通过以下方法实现：

1. 父子组件之间的通信：通过props（属性）传递数据。
2. 兄弟组件之间的通信：使用共有的父组件作为中介或使用Context API。
3. 跨多层级的组件通信：可以使用Context API或者状态管理库（如Redux）。
4. 非父子组件之间的通信：可以使用自定义事件、pub/sub模式或者Context API。

以下是使用React Context API进行跨多层级组件通信的例子：

// 创建Context
const UserContext = React.createContext({});
 
// 父组件
const App = () => {
  const [user, setUser] = useState({ name: 'Alice', age: 25 });
 
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ChildComponent1 />
      <ChildComponent2 />
    </UserContext.Provider>
  );
};
 
// 子组件1，使用user数据
const ChildComponent1 = () => {
  const { user } = useContext(UserContext);
  return <div>Child 1: User name is {user.name}</div>;
};
 
// 子组件2，修改user数据
const ChildComponent2 = () => {
  const { setUser } = useContext(UserContext);
  return <button onClick={() => setUser({ name: 'Bob', age: 30 })}>Change User</button>;
};

在这个例子中，App 组件创建了一个Context提供user和setUser，子组件ChildComponent1和ChildComponent2通过Context获取数据和函数。这样，无论组件层级有多深，只要在其路径上有对应的Context Consumer，就可以实现跨组件的数据共享和通信。