什么是react单向数据流? react with什么意思

5844℃ IRA

什么是react单向数据流?react with什么意思

react 单向数据流是什么意思

在React中,数据的流向是单向的——从父节点传递到子节点,因为组件是简单而且易于把握的,他们只需从父节点获取props渲染即可,如果顶层组件的某个prop改变饿了,React会递归的向下便利整棵组件树,重新渲染所有使用这个属性的组件。

对react的单向数据流动怎么理解的

在React中,数据的流向是单向的——从父节点传递到子节点

为什么React.js这么火

Angular和React不属于同一类的东西,Angular是一个框架,而React更多是负责UI视图部分,大家普遍认为React是MVC中的V。

那么到底为什么React.js一下子就火起来了呢?个人觉得可能主要是因为以下几个因素所导致的:

单向数据绑定

就在满世界夸赞双向Data Binding好的时候,React说我默认只支持单向数据流,因为在冯诺依曼体系中,数据就是单向流动的。这么一来,小伙伴们都震惊了,纷纷去Google双向和单向数据绑定的区别。单向绑定确实相比之下要更加轻,但事实上呢,双向绑定的需求也确实是存在的,比如:用户填写表单的时候,填写的值就需要更新到Model中,所以,React其实也有通过addon React Link来提供这个功能。只是他默认是不支持双向数据绑定的。

虚拟DOM

关于虚拟DOM的好坏,业界众说纷纭,这里不做评价。但单从这个概念本身起码让大家觉得是个新东西。所谓虚拟DOM就是说,在React中如下这段代码:

1

React.render(

2

<div className="commentBox">

3

Hello, world! I am a CommentBox.

4

</div>

5

);

这里的div其实和DOM中的div完全是两码事儿了,只不过React提供了和DOM类似的Tag和API,事实上React会通过他自己的逻辑去转化为真正的DOM。所以,把这种重做虚拟DOM。

那么这样做有什么好处呢?最明显的一点好处就是React所谓的dom diff,能够实现delta级别的dom更新。当有数据变动导致DOM变动时,React不是全局刷新,而是通过它内部的dom diff算法计算出不同点,然后以最小粒度进行更新。这也是React号称性能好的原因。

其次,还有一点非常好的地方就在于,有了虚拟DOM就可以让UI脱离设备,换句话说,只要有对应的转化关系,如:虚拟DOM -> 浏览器DOM,就能进行渲染。React Native就是一个很好的例子,它把虚拟DOM转化为Native UI组件,这样理论上就解决了DOM在移动端性能的问题。当然,缺点也是有的,比如:就无法和已有的原生DOM组件进行兼容。

JSX

JSX其实本质上是一种新的语言,只不过它设计成JavaScript一种扩展,所以,其语法绝大部分都和JavaScript一样。而同时它搭配一个JSX Transform的工具可以将JSX编译为原生的JavaScript。

那么这样做好处是什么呢?当然了,首要任务就是让你写代码方便点,否则想想每次都要React.createElement也是醉了!

其次呢,另一个好处就是它可以让你书写ES6之类的语法,就和CoffeeScript是一个道理,最终它会翻译到浏览器兼容的语法。

react.js什么是受控组件

属性的表单组件元素其内部是不会维护自己状态state,组件的value值一旦设置某个具体值就始终是这个值,所以需要调用者来控制组件value的改变。

TAG: 数据流