React组件之间的通信方式小结

七种组件之间的通讯方式

1. ⽗组件向⼦组件通讯: ⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯
2. ⼦组件向⽗组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中
3. 兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信
4. 跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如当前认证的⽤户、主题或⾸选语⾔，对于跨越多层的全局数据通过 Context 通信再适合不过
5. 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信
6. 全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态

代码演示

1.父组件向子组件传参

import React from 'react';
import ReactDOM from 'react-dom';
 
function Son(props) {
	return <div>父组件的名称是{props.name}</div>
}
<div></div>
function Father(props) {
	return (
		<Son name="Father"/>
	);
}
ReactDOM.render(<Father/>, document.getElementById('root'));

2.子组件向父组件传参

父组件：
import Son1 from './Son1' // 导入子组件
import { useState } from 'react'

function Father(){
	let [text, setText] = useState(0)
	const getHandle = (num) => {
   		 console.log('儿子说给text加上：', num)
   		 setText(text+num)
  	 }
	return (
    <>
      <Son1 text={text} emitHandle={getHandle}></Son1>
    </>
  )
}
export default Father

子组件：
// props={text,emitHandle}
function Son1({text,emitHandle}){
	return (
    <>
      <button onClick={() => emitHandle(1)}>点我emit父亲</button>
    </>
  )
}
export default Son1
``