|
| 1 | +--- |
| 2 | +id: displaying-data-zh-CN |
| 3 | +title: 显示数据 |
| 4 | +layout: docs |
| 5 | +permalink: displaying-data-zh-CN.html |
| 6 | +prev: why-react-zh-CN.html |
| 7 | +next: jsx-in-depth.html |
| 8 | +--- |
| 9 | + |
| 10 | +通过用户界面，最基础可以做的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。 |
| 11 | + |
| 12 | +## 开始 |
| 13 | + |
| 14 | +让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件，代码内容如下： |
| 15 | + |
| 16 | +```html |
| 17 | +<!DOCTYPE html> |
| 18 | +<html> |
| 19 | + <head> |
| 20 | + <title>Hello React</title> |
| 21 | + <script src="http://fb.me/react-{{site.react_version}}.js"></script> |
| 22 | + <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script> |
| 23 | + </head> |
| 24 | + <body> |
| 25 | + <div id="example"></div> |
| 26 | + <script type="text/jsx"> |
| 27 | +
|
| 28 | + // ** 在这里替换成你的代码 ** |
| 29 | +
|
| 30 | + </script> |
| 31 | + </body> |
| 32 | +</html> |
| 33 | +``` |
| 34 | + |
| 35 | +在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。 |
| 36 | + |
| 37 | +```javascript |
| 38 | +/** @jsx React.DOM */ |
| 39 | + |
| 40 | +var HelloWorld = React.createClass({ |
| 41 | + render: function() { |
| 42 | + return ( |
| 43 | + <p> |
| 44 | + Hello, <input type="text" placeholder="Your name here" />! |
| 45 | + It is {this.props.date.toTimeString()} |
| 46 | + </p> |
| 47 | + ); |
| 48 | + } |
| 49 | +}); |
| 50 | + |
| 51 | +setInterval(function() { |
| 52 | + React.renderComponent( |
| 53 | + <HelloWorld date={new Date()} />, |
| 54 | + document.getElementById('example') |
| 55 | + ); |
| 56 | +}, 500); |
| 57 | +``` |
| 58 | + |
| 59 | +## 被动更新 (Reactive Updates) |
| 60 | + |
| 61 | +在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。 |
| 62 | + |
| 63 | +我们想到的方法是除非不得不操作 DOM ，React 是不会去操作 DOM 的。**它用一种更快的内置仿造的 DOM 来操作差异，为你计算出出效率最高的 DOM 改变**。 |
| 64 | + |
| 65 | +对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。 |
| 66 | + |
| 67 | +## 组件就像是函数 |
| 68 | + |
| 69 | +React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。 |
| 70 | + |
| 71 | +> 注意: |
| 72 | +> |
| 73 | +> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。 |
| 74 | +
|
| 75 | +## JSX 语法 |
| 76 | + |
| 77 | +我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。 |
| 78 | + |
| 79 | +我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。 |
| 80 | + |
| 81 | +**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `<a href="http://facebook.github.io/react/">Hello React!</a>`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。** |
| 82 | + |
| 83 | +JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。 |
| 84 | + |
| 85 | +JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。 |
| 86 | + |
| 87 | +最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。 |
0 commit comments