新的一年快开始了,学点新东西吧,从React开始(一)

ReactJS是Facebook出的前端View框架,好东西啊.

看看它的说明:

仅仅是UI

许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈， 但它仍可以作为一个小特征轻易地在已有项目中使用

虚拟DOM

React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持

数据流

React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

我们和其它框架对比下:

Jquery:

Jquery组件化的方式就是写插件,直接Dom操作.没有双向绑定.

Angular:

双向绑定的典型案例,组件化的方式是通过指令.

VUE:

很小巧的一个框架,几十K,省流量.

React:

单向数据流, JSX式语法.

先不说这个单向数据流,我们来看下JSX语法:

var HelloMessage = React.createClass({

render: function() {

return

Hello {this.props.name};

}

});

React.render(, mountNode);

恩,分析下代码:

它声明一个组件,就是定义一个类,然后在Render里写JSX语法,React会自动把它编译成组件的JS,最后通过React.Render来渲染到一个标签上,看上去很简单.

JSX语法非常类似Dom,其实就是Dom扩展了下.可以支持自定义的属性.自定义的属性,被解释成props,在组件内部使用.

当然了,要让这个组件能在页面运行,我们需要引入browser.js和react.js

一个完整的例子:

恩,另外本人建了个学习React的小群,里面也收集了很多资料, 有兴趣一起学习的朋友可以加群:435748765