React组件通信

组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法
A-B 父子通信
B-C 兄弟通信
A-E 跨层通信

1.父传子

实现步骤：
1.父组件传递数据-在子组件标签上绑定属性
2.子组件接收数据-子组件通过props参数接收数据

// 定义子组件
function MyComponent(props) {
    console.log(props)
    return <div>{props.name}---{props.desc}</div>
}

function App() {
    const desc = '这是父组件'
    return (
        <div>
            <MyComponent name='macy' desc={desc}/>
        </div>
    );
}

props说明
1.props可传递任意的数据：数字、字符串、布尔值、数组、对象、函数、JSX
2.props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改

// 定义子组件
function MyComponent(props) {
    console.log(props)
    return <div>name：{props.name}，JSX: {props.child}</div>
}

function App() {
    return (
        <div>
            <MyComponent
                id={1}
                name='macy'
                male={false}
                language={['java','javascript']}
                phone={{'brand': '小米14','price': 4299}}
                cb={() => {console.log('这是回调函数')}}
                child={<span>这里是JSX的内容</span>}/>
        </div>
    );
}

特殊的prop children
场景：当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

// 定义子组件
function MyComponent(props) {
    console.log(props)
    return <div>{props.children}</div>
}

function App() {
    const msg = "hello react"
    return (
        <div>
            <MyComponent>
                <span style={{color: 'red'}}>这里是嵌套的内容：{msg}</span>
            </MyComponent>
        </div>
    );
}

2.子传父

核心思路：在子组件中调用父组件中的函数并传递参数

import {useState} from "react";
// 定义子组件
function MyComponent({getSonMsg}) {
    const value = '来自子组件的消息'
    // 通过调用父组件的函数，并设置参数，传递子组件的数据到父组件
    return <div>这里是子组件：<button onClick={() => getSonMsg(value)}>点击</button></div>
}

function App() {
    const [msg, setMsg] = useState()
    function handleGet(msg){
        // 把子组件的内容响应到页面
        setMsg(msg)
    }
    return (
        <div>
            <div> 这是父组件：{msg}</div>
            <MyComponent getSonMsg={handleGet}/>
        </div>
    );
}

3.兄弟组件通信：使用状态提升实现兄弟组件通信

实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递
1.A组件通过子传父的方式把数据传递给父组件App
2.App拿到数据后，通过父传子的方式再传递给B组件

import {useState} from "react";
// 1.定义组件A: A组件传参到父组件
function CompA({getFromA}) {
    const data = '来自组件A的数据'
    // 调用父组件函数来给父组件传递数据
    return <div>这是A组件，<button onClick={() => getFromA(data)}>点击</button></div>
}

// 3.定义组件B: 父组件传参到子组件B
function CompB ({data}) {
    return <div>这是B组件：{data}</div>
}

function App() {
    const [value, setValue] = useState('');
    function getAData(value) {
        //2.从A组件中获取到的值，更新到状态值
        setValue(value)
    }
    return (
        <div>
            <div>这是父组件</div>
            <CompA getFromA={getAData}/>
            <CompB data={value}></CompB>
        </div>
    );
}

4.跨组件通信：使用Context机制跨层组件通信

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

// 1.通过createContext创建上下文对象
const MyContext = createContext();

function CompA() {
    return <div>这是A组件：<CompB/></div>
}

function CompB () {
    //3.在底层组件通过useContext来消费数据
    const data = useContext(MyContext);
    return <div>这是B组件：{data}</div>
}

function App() {
    return (
        <div>
            {/* 2.在顶层组件通过上下文对象的Provider组件提供数据*/}
            <MyContext.Provider value={'这是父组件的数据'}>
                <div>这是顶层组件</div>
                <CompA/>
            </MyContext.Provider>
        </div>
    );
}