React组件之间如何通信？

组件传递的方式有很多种，根据传送者和接受者可以分为如下：

•  父组件向子组件传递：父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组     件通过props属性就能接收父组件传递过来的参数。

• 子组件向父组件传递：子组件向父组件通讯的基本思路是，父组件定义一个函数，并将函数传递给子组件，子组件拿到这个函数，在子组件内部调用这些函数，通过这个函数的回调，拿到子组件传递过来的数据。

• 兄弟组件之间的通讯：如果是兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递。

• 父组件向后代组件传递：使用React的Context来进行组件之间的数据传递是一种非常灵活和强大的方法。它允许您在组件树中传递数据，而不必通过多层级的props传递。
  具体操作：

                1.创建一个Context： 首先，您需要创建一个Context对象，可以使用React.createContext来实现。这个Context将包含要传递的数据。

// 创建上下文
const MyContext = React.createContext();

                2.提供数据： 在父组件中，通过<MyContext.Provider>组件包裹子组件，并使用value属性传递要共享的数据。

function ParentComponent() {
  const data = "Hello from parent";

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

                3.使用数据： 在子组件中，使用useContext钩子（在函数式组件中）或者MyContext.Consumer组件（在类组件中）来获取从上下文传递的数据。

                函数组件中使用useContext：

function ChildComponent() {
  const data = React.useContext(MyContext);
  return <div>{data}</div>;
}

                类组件中使用MyContext.Consumer：

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(data) => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}