React组件通信

更新日期: 2019-08-09阅读: 1.8k标签: 通信

前言

这篇文章将还是通过实例的方式记录一下 react 中组件之间的通信方式,在 React 中,需要组件通信的情况一般有以下几种:

  • 父组件向子组件通信
  • 子组件向父组件通信
  • 跨级组件通信
  • 非嵌套组件通信


父组件向子组件通信

React 中采用数据单向流动的方式,父组件向子组件传递数据也是很常见的情况,父组件通过 props 向子组件传递数据

// 父组件
class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <Child name='tadpole' />
        )
    }
}

// 子组件
function Child(props) {
    return (
        <div>{props.name}</div>
    )
}


子组件向父组件通信

利用自定义事件,触发回调

// 父组件
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {data: ''}
    }
    // 自定义的回调事件
    childValue = data => {
        this.setState({data})
    }
    render() {
        return (
            <div>
                子组件传递过来的值:{this.state.data}
                <Child transferValue={this.childValue}/>
            </div>
        )
    }
}

// 子组件
class Child extends React.Component {
    constructor(props) {
        super(props)
        this.state = {data: ''}
    }
    valueChange = data => {
        // 保证子组件中的值和传递过去的值一致
        this.setState({
            data: data.target.value
        })
        // 触发回调 传递给父组件
        this.props.transferValue(data.target.value)
    }
    render() {
        return (
            <div>
                子组件: <input vlaue={this.state.data} onChange={this.valueChange} />
            </div>
        )
    }
}


跨级组件通信

  • 一层一层传递 props
  • Context

React 中遵循数据单向流动(自上而下)的规则,其实我们完全可以通过每级组件传递 props 的方式来实现跨级通信的目的。但是,在这个过程中,有些组件是不需要使用上级传递过来的 props 的,这种操作无疑是显得多余的,这个时候就引入了 Context

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法,它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据
// 创建一个Context对象
const InitContext = React.createContext()

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            // 使用一个 Provider 来将当前的 context 传递给以下的组件树
            <InitContext.Provider value='tadpole'>
                <Child />
            </InitContext.Provider>
        )
    }
}

function Child(props) {
    return (
            <LastComponent />
        )
}

class LastComponent extends React.Component {
    // 指定 contextType 读取当前的  context
    static contextType = InitContext
    render() {
        return (
            <div>name: {this.context}</div>
        )
    }
}

使用 Context 的注意点:

  • 每个 Context 对象都会返回一个 Provider React 组件
  • 只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效,默认值为 undefined
  • 多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据 Provider 接收一个 value 属性,传递给消费组件(React 会往上找到最近的 Provider,然后使用它的值)
  • 可以在任何生命周期中访问到,包括 render 函数

更多参考 Context API


非嵌套组件通信

非嵌套组件通信的思路一般有以下几种:

  • 找到组件共同的父组件 (可以参考这个 评论组件既有父子组件通信也有兄弟组件通信)
  • 利用 Context api 进行通信,创建一个 全局 可访问的值
  • 利用 events 创建自定义事件

一般情况下,第一种方式找到共同的父组件可能存在很多级的情况,不是很友好,第二种方式对于后期维护或者说对于组件的可复用性不是很友好,所以,我们试一下自定义事件这种方式

首先,我们需要一个 events 这个包

npm install events -S

通过注册、触发事件来实现组件通信

import { EventEmitter } from 'events'

const emitter = new EventEmitter()

// 组件A
class ComponentA extends React.Component {
    constructor(props) {
        super(props)
        this.state = {msg: ''}
    }
    componentDidMount() {
        // 组件挂载完毕的时候注册事件
        this.eventEmitter = emitter.addListener('outputValue', msg => {
            this.setState({msg})
        })
    }
    componentWillUnMount() {
        // 组件销毁之前移除事件
        emitter.removeListener(this.eventEmitter)
    }
    render() {
        return (
            <div>
                这是组件A
                <div>组件B传递过来的数据:{ this.state.msg }</div>
            </div>
        )
    }
}

// 组件B
class ComponentB extends React.Component {
    constructor(props) {
        super(props)
        this.state = {value: ''}
    }
    valueChange = data => {
        this.setState({
            value: data.target.value
        })
    }
    btnClick = () => {
        // 触发自定义事件
        emitter.emit('outputValue', this.state.value)
    }
    render() {
        return (
            <div>
                这是组件B
                <input value={this.state.value} onChange={this.valueChange}></input>
                <button onClick={this.btnClick}>点击我传递信息</button>
            </div>
            
        )
    }
}


后记

以上就是 React 组件之间通信的常用方式,其实在我们实践的过程中肯定也发现了有些方式可以用于多种组件关系的通信,关键在于使用最合适的方式。当然,对于一些比较复杂的组件通信来说,我们也可以选择使用状态管理工具,比如 flux 、redux 等,使我们的组件通信更加容易、更好管理


链接: https://www.fly63.com/article/detial/5209

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

两个浏览器窗口间通信总结

两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props

浏览器标签页之间通信的实现

前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

vue中使用v-model完成组件间的通信

如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。

vue父子组件通信高级用法

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式

微服务的三种通信方法

在微服务架构的世界中,我们通过一系列服务构建应用。集合中的每项服务都符合以下标准:松散耦合、可维护和可测试、可以独立部署,微服务架构中的每个服务都解决了应用中的业务问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!