react学习（7）

1： 使用状态提升来实现兄弟组件通信

image.png

实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。父组件作为一个桥梁

//子组件A
function A({getName}){
  const name='A component name';
  return <button onClick={()=>getName(name)}>点击</button>
}
//子组件B
function B({name}){
  return <div>B组件:{name}</div>
}
//父组件
function App(){
  const [name,setName] = useState('');
  const getName=(name)=>{
      setName(name);
  }
  return (<div>
      <A getName={getName}></A>
      <B name={name}></B>
  </div>)
}

2：使用Context实现跨层组件通信
实现步骤
1：使用createContext方法创建一个上下文对象Ctx
2：在顶层组件中通过Ctx.Provider组件提供数据
3：在底层组件通过useContext钩子函数消费数据。

import {createContext} from 'react';
const Ctx = createContext();
//父组件
function App(){
  const msg ='传递一个msg过去';
  return (<div> 
      <Ctx.Provider value={msg}>
        <A></A>
      </Ctx.Provider>
    </div>)
}
//子组件
function A(){
  const msg = useContext(Ctx);
  return <div>{msg}</div>
}