React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React组件通信

React组件通信的实现示例

作者:宝子向前冲

在React中,组件通信是一个重要的概念,它允许不同组件之间进行数据传递和交互,本文主要介绍了React组件通信的实现示例,感兴趣的可以了解一下

组件通信的意义

目标任务: 了解为什么需要组件通信

组件是独立且封闭的单元,默认情况下组件只能使用自己的数据(state)

组件化开发的过程中,完整的功能会拆分多个组件,在这个过程中不可避免的需要互相传递一些数据

为了能让各组件之间可以进行互相沟通,数据传递,这个过程就是组件通信

父传子实现

目标任务: 实现父子通信中的父传子,把父组件中的数据传给子组件

实现步骤

代码实现

 import React from 'react'
 ​
 // 函数式子组件
 function FSon(props) {
   console.log(props)
   return (
     <div>
       子组件1
       {props.msg}
     </div>
   )
 }
 ​
 // 类子组件
 class CSon extends React.Component {
   render() {
     return (
       <div>
         子组件2
         {this.props.msg}
       </div>
     )
   }
 }
 // 父组件
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <FSon msg={this.state.message} />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }
 ​
 export default App

props说明

目标任务: 知道props传递时的一些注意事项

1. props是只读对象(readonly)

根据单项数据流的要求,子组件只能读取props中的数据,不能进行修改

2. props可以传递任意数据

数字、字符串、布尔值、数组、对象、函数、JSX

class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <FSon 
           msg={this.state.message} 
           age={20} 
           isMan={true} 
           cb={() => { console.log(1) }} 
           child={<span>this is child</span>}
         />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }

子传父实现

目标任务: 实现父子通信中的子传父

口诀: 父组件给子组件传递回调函数,子组件调用

实现步骤

代码实现

import React from 'react'
 ​
 // 子组件
 function Son(props) {
   function handleClick() {
     // 调用父组件传递过来的回调函数 并注入参数
     props.changeMsg('this is newMessage')
   }
   return (
     <div>
       {props.msg}
       <button onClick={handleClick}>change</button>
     </div>
   )
 }
 ​
 ​
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   // 提供回调函数
   changeMessage = (newMsg) => {
     console.log('子组件传过来的数据:',newMsg)
     this.setState({
       message: newMsg
     })
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <Son
           msg={this.state.message}
           // 传递给子组件
           changeMsg={this.changeMessage}
         />
       </div>
     )
   }
 }
 ​
 export default App

兄弟组件通信

目标任务: 实现兄弟组件之间的通信

核心思路: 通过状态提升机制,利用共同的父组件实现兄弟通信

实现步骤

代码实现

 import React from 'react'
 ​
 // 子组件A
 function SonA(props) {
   return (
     <div>
       SonA
       {props.msg}
     </div>
   )
 }
 // 子组件B
 function SonB(props) {
   return (
     <div>
       SonB
       <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
     </div>
   )
 }
 ​
 // 父组件
 class App extends React.Component {
   // 父组件提供状态数据
   state = {
     message: 'this is message'
   }
   // 父组件提供修改数据的方法
   changeMsg = (newMsg) => {
     this.setState({
       message: newMsg
     })
   }
 ​
   render() {
     return (
       <>
         {/* 接收数据的组件 */}
         <SonA msg={this.state.message} />
         {/* 修改数据的组件 */}
         <SonB changeMsg={this.changeMsg} />
       </>
     )
   }
 }
 ​
 export default App

跨组件通信Context

目标任务: 了解Context机制解决的问题和使用步骤

上图是一个react形成的嵌套组件树,如果我们想从App组件向任意一个下层组件传递数据,该怎么办呢?目前我们能采取的方式就是一层一层的props往下传,显然很繁琐

那么,Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法

实现步骤

1- 创建Context对象 导出 Provider 和 Consumer对象

 const { Provider, Consumer } = createContext()

2- 使用Provider包裹上层组件提供数据

<Provider value={this.state.message}>
     {/* 根组件 */}
 </Provider>

3- 需要用到数据的组件使用Consumer包裹获取数据

 <Consumer >
     {value => /* 基于 context 值进行渲染 */}
 </Consumer>

代码实现

import React, { createContext }  from 'react'
 ​
 // 1. 创建Context对象 
 const { Provider, Consumer } = createContext()
 ​
 ​
 // 3. 消费数据
 function ComC() {
   return (
     <Consumer >
       {value => <div>{value}</div>}
     </Consumer>
   )
 }
 ​
 function ComA() {
   return (
     <ComC/>
   )
 }
 ​
 // 2. 提供数据
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <Provider value={this.state.message}>
         <div className="app">
           <ComA />
         </div>
       </Provider>
     )
   }
 }
 ​
 export default App

到此这篇关于React组件通信的实现示例的文章就介绍到这了,更多相关React组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

您可能感兴趣的文章:
阅读全文