React数据流和组件间的沟通总结
今天来给大家总结下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:
每个组件都有属于自己的state
,state
和props
的区别在于前者(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数据流和组件间的沟通总结的更多相关文章
- React的单向数据流与组件间的沟通
今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...
- React数据流和组件间的通信总结
今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- 五、react中父子组件间如何传值
1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
随机推荐
- java.net.SocketException: Connection reset
java.net.SocketException: Connection reset at java.net.SocketInputStream.read(SocketInputStream.java ...
- jdk顺序表笔记
一.AbstractCollection 提供了集合的最大实现 继承该类,必须实现size()和iterator(),因为该类操作集合都是通过iterator 二.fail-fast策略 该策略在集合 ...
- Canvas设置width与height 的问题!
最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...
- [deviceone开发]-openPage的动画效果示例
一.简介do_App的openPage支持16种过场动画,这个示例直观的展示16种动画的效果.适合初学者.二.效果图三.相关下载https://github.com/do-project/code4d ...
- 如何禁止内部viewPager滑动
众所周知,viewPager是能够滑动的,但有时候我们需要禁止它的滑动(微笑地面对*----*). 情况是这样的: activity中有一个viewPager,viewPager中加入3个Fragme ...
- ViewPager之引导页
一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 本文介绍ViewPager最基础的应用:在多个View之间进行切换,亦即ViewP ...
- 巧用git bash
利用git base 实现的仿linux上面的命令,进行一些类linux的操作 .如 vim ls grep .. 例 : 利用grep递归查找当前文件夹中包含php5apache字样的文件
- 关于用sql语句实现一串数字位数不足在左侧补0的技巧
在日常使用sql做查询插入操作时,我们通常会用到用sql查询一串编号,这串编号由数字组成.为了统一美观,我们记录编号时,统一指定位数,不足的位数我们在其左侧补0.如编号66,我们指定位数为5,则保存数 ...
- Oracle 数据库导入导出 dmp文件
转自: http://hi.baidu.com/ooofcu/blog/item/ec5d1f9580d41f007af48077.html 首先询问对方数据库的表空间名称和大小,然后在你的oracl ...
- [笔记]linux用户与用户组
sudo useradd -m john 自动建立主目录 sudo passwd john sudo useradd -g groupusers mike sudo useradd -s /bin/b ...