发布于 2015-02-03 03:17:44 | 1723 次阅读 | 评论: 0 | 来源: PHPERZ
ReactJS 构建用户界面的 JavaScript 库
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
根据他们自己的定义, React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
我第一次读到 React 的时候, 它作为前端 JavaScript 的一个好方案马上打动了我.
用 React 做了些小项目以后, 我的结论是它到底是一个很强大的框架.
这篇文章里, 我要描述怎样尽可能快运行起 React.
React 使用的是特殊的 JavaScript 语法, 叫做 JSX.
主要的目标是提供一个能表示 React 内部的 DOM 的符合直觉的语法糖,
这套内部的 DOM 被 React components 所使用, 是构建 React 应用的城砖.
React 关于 JSX 的官方教程 上其他的用法也很好懂.
你的应用里使用 JSX 有多重方法, 但最终 JSX 代码会被编译到平常的 JavaScript.
第一种, 也是最简单的一种办法, 是引入 React 的 JSXTransformer.js
文件,
这个文件提供了将标记了 JSX 的 JavaScript 代码编译到普通 JavaScript 的方法.
我更喜欢第二种, 就是预先编译好 JSX 代码.
这个通过 React 的 JSX 命令行工具做起来最简单:
$ npm install -g react-tools
$ cd project/
$ jsx --watch src/ build/
这样以后, 使用 JSX 只要在你的 HTML 文件中引用 build/whatever.js
就好了.
搞清楚你想用哪一种处理 JSX 的方案以后, 运行 React 就很平常了.
直接下载 react.js
(或者指向 cdn), 再引用对应文件到 HTML 文档的头部:
<html>
<head>
<script src="react.js"></script>
...
</head>
<body>
...
<script src="mine.js"></script>
</body>
</html>
React 不依赖第三方的类库(比如 jQuery), 所以不用去担心.
只是, 要注意在文档内容加载完成的位置引用你自己的代码文件.
React 当中, components 是构建应用核心的城砖.
component 是各自独立的, 模块化, 在应用当中是动态的 HTML 的表示.
component 经常会是其他 React component 的子模块.
这在下面的文本当中更明确:
/** @jsx React.DOM */
var Thing = React.createClass({
render: function() {
return (
<p>{this.props.name}</p>
);
}
});
var ThingList = React.createClass({
render: function() {
return (
<h1>My Things:</h1>
,
<Thing name="Hello World!" />
);
}
});
React.renderComponent(
<ThingList />,
document.querySelector('body')
);
这个例子里, renderComponent
把一个 component 渲染到给定的 DOM 节点, 启动应用.
如果这是你第一次接触 React, 其他一些东西会让你感到非常奇怪.
不完全是. 你看到的是 JSX 的样子, 这几行看着像 HTML, 实际上不代表 DOM 节点.
实际上, 他们只是语法糖, 表示 React 内部的 DOM, 其中也包含了你前面定义的那些.
花括号里的代码在语法当中被"转义"了.
来看一下预编译后的 ThingList
class:
var ThingList = React.createClass({displayName: 'ThingList',
render: function() {
return (
React.DOM.h1(null, "My Things:"),
Thing( {name:"Hello World!"} )
);
}
});
如果这个版本对你来说更有意义, 那可以说达到预期了.
我刚用 React 的时候, 我非常看不惯 HTML 式的语法.
然而当你的应用一步步变得复杂起来, 你会开始很奇妙地赞赏 JSX 语法了. 比如:
var ComplexThing = React.createClass({
render: function() {
return (
<div className="complexThing">
<Thing name="thing one" />
<Thing name="thing two" />
</div>
,
<a href="back.html">Go Back</a>
);
}
});
// 对比下面, 非 JSX 的版本:
var ComplexThing = React.createClass({displayName: 'ComplexThing',
render: function() {
return (
React.DOM.div( {className:"complexThing"},
Thing( {name:"thing one"} ),
Thing( {name:"thing two"} )
),
React.DOM.a( {href:"back.html"}, "Go Back")
);
}
});
我前面的例子你可能已经注意到陌生的内容了 this.props.name
.
props
是哪里来的? 用来做什么?
每个 React component 都接收传入的属性, 定义在特定 component 实例上的不可变信息.
你可以把 this.props
想象成被传入函数当中的参数.
但是, 因为他们是不可变的, component 被渲染后这些属性就不能被改变了.
然后 state 根据需要被引入了.
出了上边不可变的属性, React 还有个私有属性 this.state
.
当 state 被更新, component 就自动刷新渲染.
/** @jsx React.DOM */
var StatefulThing = React.createClass({
updateName: function(event) {
event.preventDefault();
this.state.name = "Taylor";
},
setInitialState: function() {
return (
{name: "World"}
);
},
render: function() {
return (
<a href="#" onClick={this.updateName}>
My name is {this.state.name}
</a>
);
}
});
React 用驼峰命名法来绑定事件 handler, 用这个函数来处理 event.
有一点注意一下, 目前我们看到所有的例子都没有对你的应用的其他部分做什么设定.
React 仅仅是一个前端开发框架. 跟 Backbone.js 那样的框架不同,
React 希望你自己处理跟服务器获取和发送数据的工作.
这使得 React 作为一个前端的解决方案很好部署, 因为它仅仅要求你给它传入数据.
React 会自己完成其他工作.
希望这篇文章能让你了解到 React 是如何工作的.
如果你想学更多, 我推荐 React 官方的教程, 里面关于 React 的功能做了更广泛的说明.