文档章节

 React数据流

d
 dengdeng12
发布于 2017/06/19 11:32
字数 571
阅读 1
收藏 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
07/15
0
0
Flux

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

红薯
2014/07/29
14.8K
0
ReactJS的简单介绍和使用

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

lonelydawn
2016/06/23
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
35分钟前
1
0
fullcalendar重新渲染

uiCalendarConfig.calendars.lesson_calendar.fullCalendar('removeEvents');var ym = uiCalendarConfig.calendars.lesson_calendar.fullCalendar('getView').title;$scope.get_lesson(y......

人来疯啊
39分钟前
1
0
多渠道打包总结

https://www.jianshu.com/p/2130db7584c8 https://blog.csdn.net/u011153817/article/details/50772496...

塔塔米
48分钟前
1
0
android -------- Data Binding的使用 ( 六) 自定义属性

今天来说说DataBinding在自定义属性的使用 默认的android命名空间下,我们会发现并不是所有的属性都能直接通过data binding进行设置,比如margin,padding,还有自定义View的各种属性。 默认...

切切歆语
54分钟前
1
0
收邮件 下载附件

uses IdMessage, IdMessageParts, IdAttachment, IdGlobalProtocols, ...;procedure SaveAttachmentsFromFile(FileName: String)var IdMessage: TIdMessage; MsgPart: Ti......

vga
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部