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
) } export default Parent
登录后复制
2.回调函数，子父通信
function Children(props) { return ( Children
{props.text}
)}function Parent() { let [text, setText] = useState('这是爸爸传给你的东西') function handleChange(val) { setText(val) } return ( Parent
)}export default Parent
登录后复制
3.变量提升，兄弟组建通信
function Children(props) { return ( Children
)}function Children1(props) { return ( Children1
{props.text}
)}function App() { let [text, setText] = useState('') return ( APP > )}export default App
登录后复制
4.Context,跨组建通信
旧写法
class Children extends React.Component { static contextTypes = { text: PropsType.string } render() { return ( Children
{this.context.text}
) }}class Parent extends React.Component { static childContextTypes = { text: PropsType.string } getChildContext() { return { text: '我是爸爸的信息' } } render() { return ( Parent
) }}export default 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 Parent
登录后复制
5.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
)}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 ( 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视频教程】
以上就是react通信有哪些方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2935414.html
