文档章节

 React数据流

d
 dengdeng12
发布于 2017/06/19 11:32
字数 571
阅读 1
收藏 0
点赞 0
评论 0

                    React数据流
近期做了一个项目脉冲云,脉冲云是一个基于敏捷思想,提高开发效率的工具;开发/运维一体化的协作平台。脉冲云的前端用的是react技术,下面简单介绍下在开发过程中自己对于react的理解,以及一些运用。

react是单向数据流,数据主要是从父组件通过props传递到子组件。如果父组件接受新的props或者state重新渲染,所有子组件也会重新渲染(如果porp是相同时不想执渲染,可在shouldComponentUpdate(nextProps, nextState)方法做判断如果相同返回false则不会渲染)。state为组件内部值,子组件非必要可不需内部值。

react组件常用更新方式props和state(有时也可调用this.forceUpdate()进行强制刷新)。

props
props可以简单的理解为标签的属性(attribute),props是只读的,不可以在组件内部随意更改。

  render() {
    const { builders} = this.props;
    return (
      <div>
         <FlexTable>
        {
          _.map(list, (builders, index) => {
            return <BuilderCard key={index} builder={builder} />;
          })
        }
        </FlexTable>
      </div>
    );
  }
(子组件BuilderCard就可以接受到父组件传递的props值builder)

state
存在于组件内部的值,只能当前组件调用获取(当组件层次嵌套时,子组件非不要可不需state)。

  render() {
    return (
      <div>
       <input
              type="text"
              className="form-control"
              value={username}
              placeholder="手机号码或Email"
              disabled={fetching}
              onChange={(e) => { this.setState({ username: e.target.value }); }}
            />
      </div>
      );
  }

当子组件发生变化想要通知父组件或者更新其他子组件时,子组件需要通过父组件传递回调函数,子组件触发这个函数用以告知父组件子组件的变化,此时父组件可进行state更新重新渲染继而渲染所有子组件(正好形成一个单项数据流的循环)。

父组件

 {
  handleChange = (e) =>{
    this.setState({text:e});
  }
  render() {
    const {text} = this.state.text;
    return (
      <div>
      <ChildElement text={text} onChange={this.handleChange} />
      </div>
      );
    }
 }

子组件
{
    render() {
      const { onChange } =this.props;
    return (
      <div>
            <input
              type="text"
              className="form-control"
              value={username}
              placeholder="手机号码或Email"
              disabled={fetching}
              onChange={(e) => { onChange(e.target.value) }}
            
            />
      </div>
    );
  }
}

子组件发生变化通知父组件,父组件更新子组件也更新。

 

案例参考:脉冲云

© 著作权归作者所有

共有 人打赏支持
d
粉丝 0
博文 1
码字总数 571
作品 0
郑州
面向未来的前端数据流框架 - dob

我们数据技术产品部有一部分只需要兼容最新版 chrome 对外产品,以及大部分对内产品,都广泛使用了 dob 管理前端数据流,下面隆重介绍一下。 dob 是利用 proxy 实现的数据依赖追踪工具,利用...

黄子毅 ⋅ 2017/11/03 ⋅ 0

React从零开始(4)——表单和列表

表单是前端开发中必不可少的组件,React作为前端框架,如果不能处理表单,就会被亿万的前端工程师吐槽的。然而React对于表单的处理,还是有一些细节上的东西需要关注,接下来我们详细的描述在...

心扬 ⋅ 2017/12/20 ⋅ 0

Flux

Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于 React。Flux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。 Facebook工程经理Tom Occhino说,由于他们“...

红薯 ⋅ 2014/07/29 ⋅ 0

ReactJS的简单介绍和使用

一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很...

lonelydawn ⋅ 2016/06/23 ⋅ 3

用React的属性和状态操作数据

管理数据对任何应用来说都非常重要。在UI中切换数据流是很有挑战性的。现在的web应用一般都具备复杂的UI结构。一个地方的数据变动都会直接或间接的影响到其他地方。对于这种问题,由Knockou...

小丑丁丁 ⋅ 06/19 ⋅ 0

《React-Native系列》React-Native实战系列博客汇总

从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴。 今天把博客汇总如下: 《React-Native系列》1、初探React-Native 《React-Native系列》2、RN与native交互与数据传递...

hsbirenjie ⋅ 2016/11/07 ⋅ 0

React系列——React主要内容简介

React主要有四个主要内容构成,下面分别来介绍一下: 第1章 1、Virtual DOM 1.1、虚拟DOM是React的基石。 之所以引入虚拟DOM,一方面是性能的考虑。Web应用和网站不同,一个Web应用 中通常会...

龙马行空 ⋅ 2016/03/16 ⋅ 0

图解 redux 和 react 的关系

最近研究了下redux项目里的example里面的目录结构,发现里面文件夹比较多,概念也比较多,所以画图整理一下; 以examples中的real-world为例,文件结构长这个样子: 先简单看一下redux和rea...

oschina ⋅ 2016/04/18 ⋅ 3

React 16.0.0-beta.1 发布,Facebook 开源的 JavaScript 库

React 16.0.0-beta.1 已发布,React 是 Facebook 开源的用于构建高效、灵活的用户界面的 JavaScript 库。 更新内容请关注发行首页。 下载地址: Source code (zip) Source code (tar.gz) >>>...

两味真火 ⋅ 2017/07/27 ⋅ 7

从React官方文档看refs的使用和未来

React先进的开发思想一直为社区所称道,基于数据流的设计极大地简化了前端开发成本。但如同官方文档所述,web开发中有很多场景需求是脱离数据流的,典型的如处理文本输入框聚焦(focus)。为此...

ssssyoki ⋅ 2017/05/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring表达式语言(SpEL)

1、SpEL引用 Spring EL在bean创建时执行其中的表达式。此外,所有的Spring表达式都可以通过XML或注解的方式实现。下面将使用Spring表达式语言(SpEL),注入字符串,整数,Bean到属性。 SpEL的...

霍淇滨 ⋅ 33分钟前 ⋅ 0

Gradle使用阿里云镜像

gradle 生命周期中有一个初始化( Initialization )的过程,这个过程运行在 build script 之前,我们可以在这个地方做一点系统全局的设置,如配置仓库地址。 你可以在以下几个位置实现仓库地址...

明MikeWoo ⋅ 41分钟前 ⋅ 0

appium+python3.6

1.安装jdk1.8(不知道为啥只识别1.8,1.10不识别,所以为了少折腾,迁就安装1.8) http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置 JAVA_HOME:...

Kampfer ⋅ 59分钟前 ⋅ 0

详解Apache 日志分割教程

一、日志切割 安装cronolog CentOS 5.3中编译安装Apache日志默认是不切割的,需要用用工具Cronnolog进行日志切割。 1.下载及安装 wget http://cronolog.org/download/cronolog-1.6.2.tar.gz ...

dragon_tech ⋅ 今天 ⋅ 0

Keepalived介绍

负载均衡器(Load Balancer, LB )是一组能够将IP数据流以负载均衡形式转发到多台物理服务器的集成软件。有硬件负载均衡器和软件负载均衡器之分,硬件负载均衡器主要是在访问网络和服务器之间...

寰宇01 ⋅ 今天 ⋅ 0

java8-Collections and Streams

stream和集合的区别是什么? 1.在计算的时候处理不同, 2.every element should be computed in the memory and then to be part of collections stream Stream apis filter with a predica......

writeademo ⋅ 今天 ⋅ 0

Confluence 6 重新获得附件指南

每一个文件在恢复上传到 Confluence 的时候必须单独重命名,你可以通过下面说明的 3 个方法中选择一个进行操作: 选择 A - 通过文件名恢复附件 如果你知道你需要恢复的每一个文件名,尤其是你...

honeymose ⋅ 今天 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 今天 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 今天 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部