文档章节

 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
07/15
0
0
用于 React 的数据流架构 - Flux

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

匿名
2014/07/29
0
0
用React的属性和状态操作数据

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

小丑丁丁
06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker部署springboot项目

安装docker 菜鸟教程 springboot项目 maven依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001......

yimingkeji
今天
10
0
ios多个target

1.建立3个target,分别为heroone,heroone test,heroone dev;分别为正式环境,test环境,dev环境 2.注意取消掉autocreate以防止名字不对,分别以Duplicate的方式建立另外两个scheme 3.创建...

HeroHY
今天
5
0
php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部