展示数据
视图最基本的任务就是展示数据.React使得数据的展示变得简单,并且当数据发生变化时自动更新界面.
开始
看个最简单的例子.创建一个 hello-react.html 文件,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Your code goes here! **
</script>
</body>
</html>
文本剩下的内容围绕在上面的这个模板里注释部分应该写的JavaScript代码以及JSX代码
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
响应式更新
在浏览器里打开 hello-react.html ,在文本框里输入你的名字.注意,React只改变视图的时间部分 - 你输入的名字还在,虽然你没有写任何代码来指定这个行为,但React已经识别了你的需求,帮你做了正确的处理.
React识别它的方法是: 如果没有必要,React就不会操作DOM.它使用了一个内部的虚拟DOM来比较差异,为你计算出最高效的改变DOM的方法.
这个组件的数据输入被称为 props - “properties”的缩写.他们会被传入JSX语法的属性里.(比如上面这个例子的 date 属性).注意,props 在组件内是不能被改变的,所以,不要给 this.props 赋值.
组件就像函数
React组件非常简单.你可以认为他们就是简单的函数,函数带有props和state(后面会说到)这和两个参数,然后负责渲染HTML.有了这个概念,组件就很容易理解了.
注意: 有一个限制,React组件只能渲染一个根节点.如果你想要返回多个节点,他们必须被包在一个根节点里.
JSX 语法:
我们十分确定,比起”模板”和”展示逻辑”,组件可以更好的分离关注点.我们认为,html和渲染html的代码,他们是紧密相连的.展示逻辑通常非常复杂,而使用模板引擎来展示它则变得更难以处理.
我们发现,最有效的解决这个问题的办法就是,直接从javascript代码来生成HTML和组件数.这样就好像是使用一种富有表达力的编程语言来创建视图.
为了让它变得更简单,我们加入了一种简单的,可选的类似HTML的语法来创建这些React树节点.
JSX允许你使用HTML语法来创建JavaScript对象.使用原生的JavaScript来生成一个节点可以这样写:
React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')
使用JSX语法后变成这样:
<a href="https://facebook.github.io/react/">Hello!</a>
可以看到,这使得创建React应用变得简单,并且是开发者喜欢的语法,但每个人都有自己的工作流程,所以并不是一定要在React里使用JSX语法**
JSX非常小.了解更多关于JSX的知识,查看:JSX in depth,或者查看在线转换: the Babel REPL
JSX和HTML非常相似,但是不完全相同.查看JSX gotchas,里面包含他们的主要不同点.
Babel提供了许多帮助你使用JSX的方法,从命令行工具到Ruby on Rails的集成都有.选择最适合你的方式.
不使用JSX
JSX完全是可选的,你在写React的时候,不一定要使用JSX,你完全可以通过 React.createElement 方法,使用纯Javascript来创建React元素,它包含了标签的名字或组件,一个属性对象,以及任意数量的子组件作为参数传入.
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
方便起见,你可以把创建自定义组件的函数赋值给一个函数,以便于获取调用.
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
React已经有内置的工厂函数来生成一些常用的标签:
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);