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组件传值的更多相关文章
- React组件传值方式总结
1. 子组件向父组件传值 父组件Header: import Nav from 'Nav.js'; class Header extends React.Component { constructor ...
- 编写高性能React组件-传值篇
很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...
- 深入理解React组件传值(组合和继承)
在文章之前,先把这句话读三遍 Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式.注意:组件可以接受任意 props,包括基本数据类型,React 元素以及函数. 来源于React中 ...
- React 组件传值 父传递儿子
10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(pr ...
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- 使用React.cloneElement()给子组件传值
React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
随机推荐
- Linux输入法问题
本篇博文简单介绍一下介绍Linux输入相关问题及解决方案 关于Invalid UTF-8参见https://www.baidu.com/link?url=QDh2Fa1uJcmyiaKZBzAFkNn ...
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.2 Cauchy - Green 应变张量
1. 引理 (极分解): 设 $|{\bf F}|\neq 0$, 则存在正交阵 ${\bf R}$ 及对称正定阵 ${\bf U},{\bf V}$ 使得 $$\bex {\bf F}={\bf ...
- Groovy 设计模式 -- 组合模式
Composite Pattern http://groovy-lang.org/design-patterns.html#_chain_of_responsibility_pattern 组合模式, ...
- [译]Ocelot - Logging
原文 Ocelot使用标准的日志接口ILoggerFactory和ILogger<T>.它们封装在IOcelotLogger 和 IOcelotLoggerFactory中,因为ocelo ...
- EffectiveC++ 第3章 资源管理
我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 3 资源管理 条款13: 以对象管理资源 有时即使你顺 ...
- 【JS】CharToAsciiToBinaryToAsciiToChar
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- Python中__get__, __getattr__, __getattribute__的区别及延迟初始化
本节知识点 1.__get__, __getattr__, __getattribute__的区别 2.__getattr__巧妙应用 3.延迟初始化(lazy property) 1.__get__ ...
- 获取多<a/>标签id值的点击事件
<li> <div class="pic"> <c:if test="${userId != null }"> <a ...
- 51nod 1423 最大二“货” 单调栈
利用单调栈,高效求出每个区间内的最大值和次大值的亦或值. 先正向扫描,利用单调递减栈,若当前栈为空栈,则直接压入栈中,若为非空栈,弹出栈顶元素,每弹出一个元素,则求一次亦或值,保留最大值 接着进行反向 ...
- Find K Closest Elements
Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...