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。
【相关推荐：redis视频教程】
以上就是react通信有哪些方式的详细内容。