文档章节

 React数据流

d
 dengdeng12
发布于 2017/06/19 11:32
字数 571
阅读 2
收藏 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
0
React从零开始(4)——表单和列表

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

心扬
2017/12/20
0
0
React 回忆录(二)为什么使用 React?

Hi 各位,欢迎来到 React 回忆录!👋 在本章中,我将介绍 React 框架的五大特点:虚拟DOM,组件化,声明式代码,单向数据流和纯粹的JavaScript语法。但在介绍这五大特点之前,让我们先简要...

libinfs
2018/07/15
0
0
用于 React 的数据流架构 - Flux

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

匿名
2014/07/29
0
0
ReactJS的简单介绍和使用

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

lonelydawn
2016/06/23
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
7分钟前
1
0
集合练习

package package1;import java.util.ArrayList;import java.util.Collection;import java.util.HashMap;import java.util.List;import java.util.ListIterator;import java.ut......

小橙子的曼曼
10分钟前
0
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linux-tao
32分钟前
1
0
在 Ubuntu 上为 CentOS 编译 Rust 程序

现在 CentOS 8 还没出来,最新的是 CentOS 7.6,上面搭载的 glibc 版本是 2.17,都已经是 2012 年那时候的版本了。 现在开发者比较常用的桌面 Linux 系统,比如 Ubuntu / Debian / Mint / A...

helloclia
42分钟前
10
0
Android Multimedia框架总结(一)MediaPlayer介绍之状态图及生命周期

前言:从本篇开始,将进入Multimedia框架,包含MediaPlayer, Camera, Surface, MediaRecord, 接下来几篇都是MediaPlayer相关。同样看下Agenda如下: MediaPlayer的状态图 Idle 状态 End 状态...

天王盖地虎626
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部