首页 网络技术
  1. 正文

react的通信方式怎么实现

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 (
<div>
<p>Children</p>
<p>{props.text}</p>
</div>
)
}
function Parent() {
return (
<div>
<p>Parent</p>
<Children text="这是爸爸传给你的东西"></Children>
</div>
)
}
export default Parent

2.回调函数,子父通信

function Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
<button onClick={() => { props.handleChange('改变了') }}>
点击我改变爸爸传给我的东西
</button>
</div>
)}function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
function handleChange(val) {
setText(val)
}
return (
<div>
<p>Parent</p>
<Children handleChange={handleChange} text={text}></Children>
</div>
)}export default Parent

3.变量提升,兄弟组建通信

function Children(props) {
return (
<div>
<p>Children</p>
<button onClick={() => { props.setText('我是Children发的信息') }}>给Children1发信息</button>
</div>
)}function Children1(props) {
return (
<div>
<p>Children1</p>
<p>{props.text}</p>
</div>
)}function App() {
let [text, setText] = useState('')
return (
<>
<div>APP</div>
<Children setText={setText}></Children>
<Children1 text={text}></Children1>
</>
)}export default App

4.Context,跨组建通信

旧写法

class Children extends React.Component {
static contextTypes = {
text: PropsType.string
}
render() {
return (
<div>
<p>Children</p>
<p>{this.context.text}</p>
</div>
)
}}class Parent extends React.Component {
static childContextTypes = {
text: PropsType.string
}
getChildContext() {
return {
text: '我是爸爸的信息'
}
}
render() {
return (
<div>
<p>Parent</p>
<Children></Children>
</div>
)
}}export default Parent

新写法

const { Consumer, Provider } = React.createContext()class Children extends React.Component {
render() {
return (
<Consumer>
{
(value) => (
<div>
<p>Children1</p>
<p>{value.text}</p>
</div>
)
}
</Consumer>
)
}}class Parent extends React.Component {
render() {
return (
<Provider value={{ text: '我是context' }}>
<div>
<p>Parent</p>
<Children1></Children1>
</div>
</Provider>
)
}}export default Parent

5.node的events模块的单例通信

function Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
<button onClick={() => { props.event.emit('foo') }}>点击我改变爸爸传给我的东西</button>
</div>
)}function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
let event = new Events()
event.on('foo', () => { setText('改变了') })
return (
<div>
<p>Parent</p>
<Children event={event} text={text}></Children>
</div>
)}export default 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 (
<div>Child<p>{this.props.text}</p></div>
)
}}let mapStataToProps = (state) => {
return {
text: state.text
}}export default connect(mapStataToProps, null)(Child)

Parent.js

class Parent extends React.Component {
render() {
return (
<Provider store={store}>
<div>
<p>Parent</p>
<Child></Child>
</div>
</Provider>
)
}}export default Parent

注意:记得安装redux和react-redux。

本文标题:react的通信方式怎么实现
本文链接:https://www.qqooo.cn/post/7058.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!