react-hooks的使

组件通信的方式

在React Hooks中，实现组件通信的方式有以下几种：

使用 Props：您可以使用 props 将数据从父组件传递到子组件。然后子组件可以访问和使用通过 props 传递的数据。

// Parent component
import React from "react";
import ChildComponent from "./ChildComponent";

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

  return <ChildComponent data={data} />;
};

// Child component
import React from "react";

const ChildComponent = ({ data }) => {
  return <div>{data}</div>;
};

export default ChildComponent;

使用 Context：Context 允许您在多个组件之间共享数据，而无需在每个级别手动传递 props。它对于共享被视为全局或共享的数据很有用

// Create a context object
import React from "react";

const MyContext = React.createContext();

// Parent component
const ParentComponent = () => {
  const data = "Hello from parent";

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

// Child component
const ChildComponent = () => {
  const data = React.useContext(MyContext);

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

使用自定义挂钩：您可以创建自定义挂钩来封装逻辑并在多个组件之间共享它。自定义挂钩可用于创建组件通信的可重用逻辑ication.

// Custom hook
import React from "react";

const useData = () => {
  const [data, setData] = React.useState("");

  // Function to update data
  const updateData = (newData) => {
    setData(newData);
  };

  return { data, updateData };
};

// Parent component
const ParentComponent = () => {
  const { updateData } = useData();

  const handleButtonClick = () => {
    updateData("Hello from parent");
  };

  return <button onClick={handleButtonClick}>Click me</button>;
};

// Child component
const ChildComponent = () => {
  const { data } = useData();

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

组件通信的方式​

组件通信的方式