今天来给大家总结下React的单向数据流与组件间的沟通。

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。

先介绍单向数据流吧。

React单向数据流:

  React是单向数据流,数据主要从父节点传递到子节点(通过props)。

  如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。

刚才我们提到了Props,怎么理解Props呢?

Props

   props是property的缩写,可以理解为HTML标签的attribute。

  不可以使用this.props直接修改props,因为props是只读的,props是用于整个组件树中传递数据和配置。

  在当前组件访问props,使用this.props

这里贴出props使用代码:

* data 为一个模拟数据,无具体意义,仅供举例使用。

接下来说说state

State:

  每个组件都有属于自己的statestateprops的区别在于前者(state)只存在于组件内部,只能从当前组件调用this.setState修改state值(不可以直接修改this.state!)。

  一般我们更新子组件都是通过改变state值,更新新子组件的props值从而达到更新。

我们举个实例吧:

  

这里使用getInitialState来初始化state,例子里面state是text,然后通过this.state.text读取state值

Props与state:

  尽可能使用props当做数据源,state用来存放状态值(简单的数据)。

  也就是说咱们通常用props传递大量数据,state用于存放组件内部一些简单的定义数据。(需要通过大量运用React可以感受这点)

那么,单向数据流的原理及一些概念咱么说完了,接下来咱们看看组件间是怎么进行沟通的:

一般来说,有两种沟通方式:

一、父子组件沟通

  在React中,最为常见的组件沟通也就是父子了,一般情况是:

  * 父组件更新组件状态  -----props-----> 子组件更新

  另一种情况是:

  * 子组件更新父组件状态   -----需要父组件传递回调函数----->  子组件调用触发

  可能大家对于第二种子组件更新父组件状态的情况有些不理解:

   是这样的,一般情况下,只能由父组件通过props传递数据给子组件,使得子组件得到更新,那么现在,我们想实现

     子组件更新父组件就需要 父组件通过props传递一个回调函数到子组件中,这个回调函数可以更新父组件,子组件就是

     通过触发这个回调函数,从而使父组件得到更新。(类似于一种取巧的做法)

这里贴出 子组件更新父组件 代码:

在这个例子中,refreshBox是父组件创建的一个回调函数,将其传入Son组件中,然后通过Son组件进行调用触发,

进而改变state,实现子组件对父组件的更新。

二、兄弟组件沟通

  当两个组件处于同一级时(同处父级,或者同处子级),就称为兄弟组件。

  这里有两种实现方式:

方式一:

  按照React单向数据流方式,我们需要借助父组件进行传递,通过父组件回调函数改变兄弟组件的props

  其实这种实现方式与子组件更新父组件状态的方式是大同小异的。

方式二:

  方式一只适用于组件层次很少的情况,当组件层次很深的时候,整个沟通的效率就会变得很低

   在这里,React官方给我们提供了一种上下文方式,可以让子组件直接访问祖先的数据或函数,无需从祖先组件一层层地传递数据到子组件中。

   但这种方法建议按需使用,可能会导致一些不可预期的错误。(比如数据传递逻辑结构不清晰)

   在这里直接贴出例子:

  

  首先要对使用对象进行说明,Box.childContextType就是这样一个上下文声明,子组件调用祖先组件的方法时,

  通过 this.context.[callback] 这样就可以进行祖先与子组件间的沟通了。

  总结:今天在这里总结了单向数据流的概念与组件间的沟通,希望大家看后能对React一些基本原理有更深的理解,有错误的地方私信我,我改正。

  声明:本文仅做个人学习使用,禁止转载!

  (文中观点引自https://segmentfault.com/a/1190000006831820 作者:nanges)

React数据流和组件间的沟通总结的更多相关文章

  1. React的单向数据流与组件间的沟通

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  2. React数据流和组件间的通信总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  3. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  4. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  5. 五、react中父子组件间如何传值

    1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...

  6. React 精要面试题讲解(二) 组件间通信详解

    单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...

  7. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  8. react系列(三)组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

  9. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

随机推荐

  1. .NET4.5新特性之异步编程(Async和Await)的使用

    一.简介 首先来看看.net的发展中的各个阶段的特性:NET 与C# 的每个版本发布都是有一个"主题".即:C#1.0托管代码→C#2.0泛型→C#3.0LINQ→C#4.0动态语 ...

  2. vs2015 已经支持开发asp .net core 1.0 rc2 程序了

    vs2015 已经支持开发asp .net core 1.0 rc2 程序了 http://mp.weixin.qq.com/s?__biz=MzI0MzM1ODczOQ==&mid=2247 ...

  3. (学习笔记)laravel 中间件

    (学习笔记)laravel 中间件 laravel的请求在进入逻辑处理之前会通过http中间件进行处理. 也就是说http请求的逻辑是这样的: 建立中间件 首先,通过Artisan命令建立一个中间件. ...

  4. ngrok

    为什么要使用ngrok?/ngrok 作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做: 找到一台运行于外网的Web服务器 ...

  5. 利用私有的API获得手机上所安装的所有应用信息(包括版本,名称,bundleID,类型)

    MobileCoreService这个系统的库,里面有个私有的类LSApplicationWorkspace ,利用运行时可以获得私有类里面的方法,- (id)allInstalledApplicat ...

  6. Android开发学习—— Service 服务

    Service运行于后台的一个组件,用来运行适合运行在后台的代码,服务是没有前台界面,可以视为没有界面的activity. 服务可以被手动关闭,不会重启,但是如果被自动关闭,内存充足就会重启. sta ...

  7. android Fragments介绍

    Fragments是Android3.0引入的概念,译为片段.碎片,为了解决不同屏幕分辩率的动态和灵活UI设计. Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragme ...

  8. 启动/关闭oracle服务有三种方式

    启动oracle服务有三种方式: 1 从控制面板 2 使用MS-DOS命令 3 通过Oracle Administration Assistant for WindowsNT -通过控制面板启动ora ...

  9. centos6.5无法访问网络

    1.在network Adapter选中,右侧是否是选中为NAT 2.打开网络和共享中心-->更改适配器设置,VMnet8和VMnet1是否是自动获取了IP,自动获取ip连接上后 3.右击本地连 ...

  10. Android ListView ArrayAdapter 的简单使用

    前面写了3篇关于android的文章,其中的演示程序都写在了一个工程中,当时为了方便测试就在启动页MainActivity中放了3个按钮,点击不同的按钮进入不同的示例程序页面,MainActivity ...