1.父子通信

父 -> 子 props
子 -> 父 回调函数，父组件通过props向子组件传递一个函数，子组件调用函数，父组件在回调函数中用setState改变自身状态

2.跨层级通信

1. 层层传递props

2. 使用React context

3. 使用共同父组件，修改其状态，来两边通信

4. 使用Event bus，就是一个全局的发布订阅工具，在componentDidMount中订阅事件，在componentWillUnmount中取消事件订阅

5. 使用redux，mobx等第三方状态库

React组件通信的更多相关文章

  1. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  2. react组件通信那些事儿

    父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...

  3. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  4. React/组件通信

    组件通信可以分为以下几种: 父组件向子组件通信 子组件向父组件通信 跨级组件的通信及context 没有嵌套关系的组件通信 父组件向子组件通信   父组件通过props向子组件传递需要的信息.   子 ...

  5. React组件通信技巧

    效果图 communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...

  6. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  7. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  8. 【JAVASCRIPT】React学习- 数据流（组件通信）

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...

  9. 关于react组件之间的通信

    才开始学react刚好到组件通信这一块,就简单的记录下组件间的通信方式:父到子:props.context,子到父:自定义事件.回调,兄弟组件:共父props传递.自定义事件import React, ...

随机推荐

  1. uvaoj1225Digit Counting(暴力)

    Trung is bored with his mathematics homeworks. He takes a piece of chalk and starts writing a sequen ...

  2. Anyproxy抓包工具

    1.安装Nodejs和AnyProxy以及安装模拟器(移动端抓包工具) 第一步:nodejs下载地址:http://nodejs.cn/download/ 下载Windows版本,直接运行安装即可, ...

  3. 365. Count 1 in Binary【LintCode java】

    Description Count how many 1 in binary representation of a 32-bit integer. Example Given 32, return  ...

  4. 【setUp-tearDown】线程组开始，结束各执行一次

    使用setUp线程组的方式  ——> 开始 使用tearDown线程组 的方式 ——>结束

  5. 大理石在哪儿 （Where is the Marble?,UVa 10474)

    题目描述:算法竞赛入门经典例题5-1 #include <iostream> #include <algorithm> using namespace std; ; int m ...

  6. CsvHelper文档-1前言

    CsvHelper文档-1前言 英文文档链接地址:CsvHelper Document 开源项目地址:CsvHelper 翻译于2018-1-5,原本可能会随时更新: 每一段代码都是经过我实际测试的, ...

  7. [Clr via C#读书笔记]Cp4类型基础

    Cp4类型基础 Object类型 Object是所有类型的基类,有Equals,GetHashCode,ToString,GetType四个公共方法,其中GetHashCode,ToString可以o ...

  8. BFC与合并 浅析

    BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...

  9. 函数重载(overload)和函数重写(override)

    1. 前言: 在C++中有两个非常容易混淆的概念,分别是函数重载(overload)和函数重写(overwirte).虽然只相差一个字,但是它们两者之间的差别还是非常巨大的. 而通过深入了解这两个概念 ...

  10. es6从零学习（二）：promise

    es6从零学习(二):promise 一:promise的由来 某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱.由此,Promise的概念就由社区 ...