React函数式组件通信方式

文件结构

•  App.js

  // import StateHook from './components/StateHook';
  // import EffectHook from './components/EffectHook';
  // import LayoutEffectHook from './components/LayoutEffectHook';
  // import MemoHook from './components/MemoHook';
  // import CallbackHook from './components/CallbackHook';
  // import ReactMemo from './components/ReactMemo';
  // import RefHook from './components/RefHook';
  // import ForwardRefHook from './components/ForwardRefHook';
  // import ImperativeHandleHook from './components/ImperativeHandleHook';
  // import ContextHook from "./components/ContextHook";
  // import ReducerHook from "./components/ReducerHook";
  // import ObjectDemo from "./components/ObjectDemo";
  // import FromParentToSon from './components/FromParentToSon';
  // import FromSonToParent from './components/FromSonToParent';
  // import SkipLevel from './components/SkipLevel';
  // import BrotherComponent from './components/BrotherComponent';
  import PubSub from './components/PubSub';
  const App = () => {
    return (
      <div>
        {/* <StateHook></StateHook> */}
        {/* <EffectHook></EffectHook> */}
        {/* <LayoutEffectHook></LayoutEffectHook> */}
        {/* <MemoHook></MemoHook> */}
        {/* <CallbackHook></CallbackHook> */}
        {/* <ReactMemo></ReactMemo> */}
        {/* <RefHook></RefHook> */}
        {/* <ForwardRefHook></ForwardRefHook> */}
        {/* <ImperativeHandleHook></ImperativeHandleHook> */}
        {/* <ContextHook></ContextHook> */}
        {/* <ReducerHook></ReducerHook> */}
        {/* <ObjectDemo></ObjectDemo> */}
        {/* <FromParentToSon></FromParentToSon> */}
        {/* <FromSonToParent></FromSonToParent> */}
        {/* <SkipLevel></SkipLevel> */}
        {/* <BrotherComponent></BrotherComponent> */}
        <PubSub></PubSub>
      </div>
    );
  };
  
  export default App;
  

父子组件通信

父传子

主要通过属性传递的方式：

• 使用

import { useState } from "react";
const Fro