一.父组件向子组件通讯
父组件
import React from 'react' import Head from './Head' export default function index() { return ( <div> <Head title = "标题" /> </div> ) }
子组件
import React from 'react' export default function Head(props) { return ( <div> 这是{props.title} </div> ) }
二.子组件向父组件通讯
父组件
import React from 'react' import Head from './Head' export default function index() { function back(msg) { console.log(msg); } return ( <div> <Head back={back.bind(this)} /> </div> ) }
子组件
三.跨层级通信
React 中使⽤ Context 实现祖代组件向后代组件跨层级传值。
四.消息发布与订阅
1.安装
npm install pubsub-js
yarn add pubsub-js
2.引入
import pubsub from ‘pubsub-js’;
子组件发布
import React from 'react' import pubsub from 'pubsub-js'; export default function Head() { function btnClick(){ pubsub.publish('name', 'Hello world')// publish 发布消息 消息名为：name 内容为：Hello world } return ( <div> <button onClick={btnClick}>点击我</button> </div> ) }
父组件订阅
import React, { useState, useEffect } from 'react' import Head from './Head' import pubsub from 'pubsub-js'; export default function index() { const [data, setData] = useState() useEffect(() => { // 订阅消息 消息名：name 第二个参数是一个函数 // 此函数又有两个参数：消息名和消息数据,消息名不可以省略,可以是用_占位 pubsub.subscribe("name", (_,res) => { setData(res) }) }, []) //useEffect第二个参数写一个空数组，表示回调函数只会在第一次渲染页面后执行 return ( <div> {data} <Head></Head> </div> ) }
五.全局状态管理⼯具
可以借助 Redux 或 Mobx 等全局状态管理⼯具进⾏通信，它们会维护⼀个全局状态中⼼（Store），并可以根据不同的事件产⽣新的状态。
