发布于 2015-10-31 12:17:51 | 1536 次阅读 | 评论: 0 | 来源: PHPERZ
在使用React.createClass()创建任意组件时，我们都需要给它定义render函数。
/*** @jsx React.DOM */
var APP = React.createClass({
render:function(){
return (
<h1>Hello React</h1>
<Widget />
)
}
});
render方法在被调用时首先会检查所在实例化对象下面定义的this.props和this.state属性，然后将其数据添加到对应的DOM中去。 函数内部的返回值可以包含其他的原生DOM对象，例如<div />， 也可以是React.DOM.div对象，另外还有一些其他的自定义组件。
查看一下React.createClass()方法的源码，你会发现它在被执行时，首先检查render方法是否存在，如果没定义则会报错。
invariant(
Constructor.prototype.render,
'createClass(...): Class specification must implement a `render` method.'
);
如果你不想要渲染任何东西，可以将返回值设置为null或者false. 在这种情况下React实际会渲染一个<noscript>标签，然后在执行diff算法时会被用到。
最后一个需要注意的是在组件创建完成后，一定要记得调用React.renderComponent(<APP />, document.body)将我们所创建的内容真正渲染到页面中。
下面是一个完整的例子。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Render Method</title>
<script src="../javascripts/react-0.11.1.js"></script>
<script src="../javascripts/JSXTransformer-0.11.1.js"></script>
</head>
<body>
<script type="text/jsx">
/*** @jsx React.DOM */
var APP = React.createClass({
render:function(){
return (
<div>
<h1>Hello World</h1>
<b>bold</b>
</div>
)
}
});
React.renderComponent(<APP />, document.body)
</script>
</body>
</html>
在实际的使用过程中，经常会遇到一种错误。如果我们这里的return内容中，没有选择将h1和b标签内容写在div内，React将会报错。反之，如果最外层有一个或者多个标签时则不会报错。
但是有一种情况下可以不用在最外层用一个标签包裹，那就是返回的内容是单行的。例如return <h1>hi</h1>. 初步推测是由JSX在解析时的需要。
总结以上两点，得出一个基本结论，在使用render方法时，尽量确保只返回一个节点(节点内可包含任意数目子节点)。而且大多数情况下使用()括号将返回结果包住。