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

Stella981
• 阅读 820

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

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

先介绍单向数据流吧。

React单向数据流:

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

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

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

Props

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

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

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

这里贴出props使用代码:

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

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

接下来说说state

State:

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

一般我们更新子组件都是通过改变state值,将state值通过属性传递给子组件,子组件的获取props值从而达到更新。

我们举个实例吧:

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

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

Props与state:

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

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

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

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

一、父子之间组件沟通(父传子,子传父)

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

* 父组件更新子组件状态 ----->子组件属性  -----子组件获取this.props值----->子组件数据更新

另一种情况是:

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

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

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

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

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

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

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

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

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

二、兄弟组件沟通

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

这里有两种实现方式:

方式一:

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

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

方式二:

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

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

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

在这里直接贴出例子:

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

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
爱丽丝13 爱丽丝13
3年前
React 组件通信之发布订阅模式
React通信react的数据流是单向的,react通信有以下几种方式:父向子通信:传入props子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值父向孙通信:利用context传值。React.createContext()兄弟间通信:​1、找一个相同的父组件,既可以用pr
Stella981 Stella981
2年前
React16.4 开发简书项目 从零基础入门到实战
第1章课程导学本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。11课程导学第2章React初探本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。21React简介22React开发环境准备23工程目录
Stella981 Stella981
2年前
React Portals
Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案。常见场景:对话框、悬浮卡以及提示框!定义一个模态框组件:importReact,{useRef,useEffect,}from'react';importReactDOMfrom'reactdo
Stella981 Stella981
2年前
React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了😁React组件生命周期受控组件与非受控组件多个输入的解决方法Props.children可以传递任何数据包括函数布尔值、Null和Undefined被忽略使用PropTypes进行类型检查(直接参考官方文档)reactredux
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这