React根本上其实就是一个JavaScript库。
它体现了前后分离的思想,将部分组装页面的工作转交给浏览器来完成;不像JSP文件,页面的布局和填入数据是在服务器完成后发送给浏览器的的。
这样做的好处自然有很多:首先,React将DOM&JavaScript封装成模块(组件),这些组件的可复用性很强,不仅如此,组件也可以让测试和关注分离变得简单。其次,当数据变化的时候,React能够自动更新用户界面,并且仅更新需要更新的部分。
想要进行React的初步学习的测试,可以戳这里:
http://jsfiddle.net/69z2wepo
核心函数1:render
这个函数的功能就是提供一个模块,它就像是乐高玩具的一块积木,用来组装页面。
简单示例:(先给出的是HTML代码,后给出的是JSX代码。JSX就是JavaScript+XML的意思)
<div id="container" class="firstContainer">
<div>replaced</div>
</div>
/*************************************************/
ReactDOM.render(
<div>Hello,world!</div>,document.getElementsByClassName('firstContainer')[0]
);
可以看到 class 为 firstContainer 的div的内容被替换掉了,替换成了我们在render中写入的代码:hello world!
另外document.getElementsByClassName(‘firstContainer’)[0]可以替换成任何原生的JavaScript获取**单独某一个(一定是一个Node,因此如果你使用document.getElementsByClassName这样的方法必须要加上[n])**DOM元素的方法:document.getElementById或者document.getElementsByTagName等都可以。
更复杂一点的例子,我们可以来将这里的<div>Hello,world!</div>
扩充一下。
<div id="container" class="firstContainer">
<div>replaced</div>
</div>
/*************************************************/
var name = "Emily";
ReactDOM.render(
<div>
{
(function(){
return <div>Hello,{name}!</div>
})()
}
</div>,document.getElementById('container')
);
我们可以看到JSX语法的神奇之处了,在代码中,JS和DOM可以说是混杂在一起的。而JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
核心函数2:React.createClass
这个函数允许我们自己定义需要的组件,定义好的组件可以作为像div这样的标签一样,直接应用于render函数中。
一个简单的栗子:
<div id="container" class="firstContainer">
<div>replaced</div>
</div>
/*************************************************/
var HelloWorldBox = React.createClass({
render: function() {
return (
<div className="helloWorldBox">
Hello,world! I am a helloWorldBox.
</div>
);
}
});
ReactDOM.render(
<HelloWorldBox />,document.getElementById('container')
);
在这个栗子里,HelloWorldBox就是一个最简单的组件。
关于这个组件,我们还可以获取更多信息。例如,使用props
(实例来自React官网)
<div id="container" class="firstContainer">
<div>replaced</div>
</div>
/*************************************************/
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
ReactDOM.render(
<CommentList />,document.getElementById('container')
);
在这个栗子中,我们使用React.createClass方法建立了两个组件,我们可以看到,在组件CommentList中,嵌套了Comment:也就是说,CommentList是由多个Comment组成的。我们在CommentList中为Comment定义了一个属性:author。那么,在Comment组件中,就可以通过{this.props.author}读到这个属性,而通过{this.props.children},则可以读到这个组件的子节点。
(待续)