react通信方式有：1、用props进行父子组件通信；2、用回调函数进行子父组件通信；3、用变量提升进行兄弟组件通信；4、用Context进行跨组件通信；5、用node的events模块进行单例通信；6、用redux共享数据通信。
本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。
React的六种通信方式
1.props父子通信
2.回调函数，子父通信
3.变量提升，兄弟组件通信
4.Context,跨组件通信
5.node的events模块的单例通信
6.redux共享数据通信
1.props父子通信
function Children(props) {
return (
Children
{props.text}
)
}
function Parent() {
return (
Parent
2.回调函数，子父通信
function Children(props) {
return (
Children
{props.text}
)
}
function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
function handleChange(val) {
setText(val)
}
return (
Parent
3.变量提升，兄弟组建通信
function Children(props) {
return (
Children
)
}
function Children1(props) {
return (
Children1
{props.text}
)
}
function App() {
let [text, setText] = useState('')
return (
<>
APP
4.Context,跨组建通信
旧写法
class Children extends React.Component {
static contextTypes = {
text: PropsType.string
}
render() {
return (
Children
{this.context.text}
BJXSHOP网上购物系统 - 书店版
BJXSHOP购物管理系统是一个功能完善、展示信息丰富的电子商店销售平台；针对企业与个人的网上销售系统；开放式远程商店管理；完善的订单管理、销售统计、结算系统；强力搜索引擎支持；提供网上多种在线支付方式解决方案；强大的技术应用能力和网络安全系统 BJXSHOP网上购物系统 - 书店版，它具备其他通用购物系统不同的功能，有针对图书销售而进行开发的一个电子商店销售平台，如图书ISBN，图书目录
下载
)
}
}
class Parent extends React.Component {
static childContextTypes = {
text: PropsType.string
}
getChildContext() {
return {
text: '我是爸爸的信息'
}
}
render() {
return (
Parent
新写法
const { Consumer, Provider } = React.createContext()
class Children extends React.Component {
render() {
return (
{
(value) => (
Children1
{value.text}
)
}
)
}
}
class Parent extends React.Component {
render() {
return (
Parent
)
}
}
export default Parent5.node的events模块的单例通信
function Children(props) {
return (
Children
{props.text}
)
}
function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
let event = new Events()
event.on('foo', () => { setText('改变了') })
return (
Parent
注意⚠️：这种通信记住在顶部引入events模块，无需安装，node自身模块。
6.redux共享数据通信
store.js
import { createStore } from 'redux'
let defaultState = {
text: '我是store'
}
let reducer = (state = defaultState, action) => {
switch (action) {
default: return state
}
}
export default createStore(reducer)child.js
import React from 'react'
import { connect } from 'react-redux'
class Child extends React.Component {
render() {
return (
Child{this.props.text}
)
}
}
let mapStataToProps = (state) => {
return {
text: state.text
}
}
export default connect(mapStataToProps, null)(Child)Parent.js
class Parent extends React.Component {
render() {
return (
Parent
)
}
}
export default Parent注意：记得安装redux和react-redux。
【相关推荐：Redis视频教程】
