新的一年快开始了,学点新东西吧,从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(
恩,分析下代码:
它声明一个组件,就是定义一个类,然后在Render里写JSX语法,React会自动把它编译成组件的JS,最后通过React.Render来渲染到一个标签上,看上去很简单.
JSX语法非常类似Dom,其实就是Dom扩展了下.可以支持自定义的属性.自定义的属性,被解释成props,在组件内部使用.
当然了,要让这个组件能在页面运行,我们需要引入browser.js和react.js
一个完整的例子:
恩,另外本人建了个学习React的小群,里面也收集了很多资料, 有兴趣一起学习的朋友可以加群:435748765