react+hook组件通信

在React中，组件通信是非常重要的。使用React Hooks，我们可以使用一些钩子函数来实现组件之间的通信。

一种常见的组件通信方式是通过props传递数据。父组件可以将数据作为props传递给子组件，子组件可以通过props接收并使用这些数据。

另一种常见的组件通信方式是使用上下文（Context）。上下文提供了一种在组件树中共享数据的方法，而不必通过props一层层传递。可以使用`createContext`函数创建一个上下文对象，并使用`Provider`组件提供数据，然后在子组件中使用`useContext`钩子函数来获取数据。

下面是一个示例，演示了如何使用React Hooks实现组件通信：

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

// 创建一个上下文对象
const MyContext = createContext();

// 父组件
function ParentComponent() {
  const data = 'Hello from parent';

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

// 子组件
function ChildComponent() {
  const data = useContext(MyContext);

  return <h1>{data}</h1>;
}

// 渲染父组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

在上面的示例中，父组件通过`MyContext.Provider`提供了数据`Hello from parent`，子组件通过`useContext`钩子函数获取到了这个数据，并将其渲染到页面上。