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。

【