React的demo详细讲解一

　　前两篇博客都是从宏观上理解React和认识一些基本的工具。从这篇开始就进入React的具体学习。想先看看它是什么样子的，最快的方式就是从demo入手。这个demo来自官网。借助这个demo讲解其中的知识点。demo中贯穿的知识点会比较多，分多篇进行描述。

　　一、demo实现的效果
　　github地址：https://github.com/reactjs/react-tutorial/。可将代码下载到本地。我这里使用的服务器是Node。进入react-tutorial文件夹下。可通过执行命令看到基本的效果页面。

npm install
node server.js

　　访问：http://localhost:3000/ 可看到效果如图：

　　demo是关于评论的。上面标注的是评论列表。每一项包括评论作者和评论内容。下面标注的是发表评论的表单。可输入作者和内容通过post按钮进行发表评论。发表的评论则能添加到上面的列表中。

　　二、demo基本的组件结构
　　组件结构：
　　- CommentBox
　　　　- CommentList
　　　　　　- Comment
　　　　　　- Comment
　　　　- CommentForm
　　对应的HTML结构如图：

　　通过观察已有demo的结构，我们看一下基本的组件定义代码：

//代码段1：创建组件CommentBox
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});

//代码段2：创建组件CommentList
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
//代码段3：创建组件CommentForm
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});


//代码段4：绑定到DOM节点上
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);

　　结构上应该很明白了。这里主要想说三个知识点：1JSX 2.ReactDOM.render方法 3.组件的定义语法。

　　1.JSX
　　JSX即JavaScript XML语法。有一个简单的预编译器，可以将语法糖转换成纯的JavaScript。比如上面代码段1：我们在javaScript代码中直接写

<div className="commentBox">Hello ,World!</div>

 

　　其实解析后的<div></div>代码是这样：

React.createElement('div', {className: "commentBox"},"Hello, world!")

　　注意：使用JSX语法后，必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。<script type="text/babel"></script>　

　　2.ReactDOM.render方法

　　该方法的定义：

ReactComponent render( ReactElement element, DOMElement container, [function callback] )

　　ReactDOM.render() 实例化根组件，启动框架，注入标记到原始的 DOM 元素中，作为第二个参数提供。对于本教程 ReactDOM.render 保持在脚本底部是很重要的。ReactDOM.render 应该只在复合组件被定义之后被调用。这里的实例可以对照JAVA语言里的类的实例化来理解。

　　

　　3.组件的定义语法
　　ReactElement类型通过函数React.createElement()创建，接口定义如下：

ReactElement createElement( string/ReactClass type, [object props], [children ...] )

　　第一个参数可以接受字符串（如“p”，“div”等HTML的tag）或ReactClass，第二个参数为传递的参数，第三个为子元素，可以为字符串和ReactElement。

　　React的核心是ReactElement类型，但是精髓确实ReactComponent，即组件。但是组件的创建却并不简单，我们通过React.createClass创建ReactClass类，它是ReactComponent的构造函数，不同于正常的对象创建，组件的创建由React接管，即我们无须对其实例化（new MyComponent（））。相对于ReactElement的无状态，ReactComponent是有状态的，先看接口定义：

ReactClass createClass(object specification)

　　传入的spec参数必须包含render方法，用于渲染虚拟DOM，render返回ReactElement类型；另外还有一些getInitialState和生命周期方法，可以根据需要定义。