全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

React数据流和组件间的沟通总结

0 218

今天来给大家总结下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)

热忱回答0

  • 加入年费大会员(20每年)
  • 热门标签

    猜你喜欢

    1. 单例模式与工厂模式(面向对象设计模式)--2017-04-21
    2. 创建 Monitor 并测试 - 每天5分钟玩转 OpenStack(124)
    3. muduo库整体架构简析
    4. AlloyTouch 0.2.0发布--鱼和熊掌兼得
    5. 蓝桥杯-基础训练
    6. PuTsangTo-单撸游戏开发04 给角色添加基本动画
    7. 数据结构看书笔记(五)--串
    8. window配置临时环境变量
    9. react 15来了
    10. Web开发安全之文件上传安全

    衣食父母

    最近热帖

    1. 走进JavaScript——重拾对象 6
    2. 最近用django做了个在线数据分析小网站 6
    3. mysql之 mysqldump 备份恢复详解 7
    4. 深入理解Java常用类-----时间日期 7
    5. css重构之旅 8
    6. 分布式队列ZooKeeper的实现 6
    7. Java-面向对象总结 7
    8. 《HelloGitHub》第 14 期 8
    9. 压缩'语料库,即提取特征词或词频,做量化处理之后以“列向量”形式保存到数据库 8
    10. 【charger battery 充電 充電器 電池】過充保護警告訊息 over charging protection,Battery over voltage protection, warning message 7

    随机文章

    1. 简单animate方法的封装
    2. linux切割tomcat的日志文件
    3. 让VIM支持Python2 by update-alternatives
    4. 一个操作系统的实现 笔记(一)Windows7下工作环境搭建
    5. 在Parallel中使用DbSet.Add()发现的一系列多线程问题和解决过程