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. 180605-Linux下Crontab实现定时任务

    Linux下Crontab实现定时任务 基于Hexo搭建的个人博客,是一种静态博客页面,每次新增博文或者修改,都需要重新的编译并发布到Github,这样操作就有点蛋疼了,一个想法就自然而然的来了,能不 ...

  2. pycharm 3.4 亲测可使用到2019年2月的注册码，要用者从速

    注册码: D87IQPUU3Q-eyJsaWNlbnNlSWQiOiJEODdJUVBVVTNRIiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1l ...

  3. 用IDEA编写spark的WordCount

    我习惯用Maven项目 所以用IDEA新建一个Maven项目 下面是pom文件 我粘上来吧 <?xml version="1.0" encoding="UTF-8& ...

  4. Appium1.8及以上命令行启动

    安装命令行启动版本的Appium,appium-doctor需要独立下载了,用 npm的话需要FQ才好使,所有安装了cnpm代替npm, cnpm是从淘宝的国内镜像下载 npm config rm p ...

  5. lintcode12 带最小值操作的栈

    实现一个带有取最小值min方法的栈,min方法将返回当前栈中的最小值. 你实现的栈将支持push,pop 和 min 操作,所有操作要求都在O(1)时间内完成. 建一个栈helpStack,用来存放从 ...

  6. 158. Valid Anagram【LintCode by java】

    Description Write a method anagram(s,t) to decide if two strings are anagrams or not. Clarification ...

  7. BOM / URL编码解码 / 浏览器存储

    BOM 浏览器对象模型 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的 ...

  8. 【转】jQuery最佳实践

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQu ...

  9. defineporperty 的使用 设置对象的只读或只写属性

    <!DOCTYPE html> <html lang="en"> <head> <title>Document</title& ...

  10. 《C++面试知识点》

    [动态内存] 1. 由内置指针管理的动态内存(即new和delete管理动态内存),直到被显式释放之前它都是存在的.假设该指针变量被销毁,那该内存将不会自动释放(即所谓的“内存泄漏”). 2. 可以用 ...