• 显示数据
    • 开始
    • 被动更新 (Reactive Updates)
    • 组件就像是函数
    • JSX 语法
    • 没有 JSX 的 React

    显示数据

    用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。

    开始

    让我们看一个非常简单的例子。新建一个名为 hello-react.html 的文件,代码内容如下:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8" />
    5. <title>Hello React</title>
    6. <script src="https://fb.me/react-0.14.7.js"></script>
    7. <script src="https://fb.me/react-dom-0.14.7.js"></script>
    8. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    9. </head>
    10. <body>
    11. <div id="example"></div>
    12. <script type="text/babel">
    13. // ** 在这里替换成你的代码 **
    14. </script>
    15. </body>
    16. </html>

    在接下去的文档中,我们只关注 JavaScript 代码,假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。

    1. var HelloWorld = React.createClass({
    2. render: function() {
    3. return (
    4. <p>
    5. Hello, <input type="text" placeholder="Your name here" />!
    6. It is {this.props.date.toTimeString()}
    7. </p>
    8. );
    9. }
    10. });
    11. setInterval(function() {
    12. ReactDOM.render(
    13. <HelloWorld date={new Date()} />,
    14. document.getElementById('example')
    15. );
    16. }, 500);

    被动更新 (Reactive Updates)

    在浏览器中打开 hello-react.html ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间, 任何你在输入框输入的内容一直保留着,即使你没有写任何代码来完成这个功能。React 为你解决了这个问题,做了正确的事。

    我们想到的方法是除非不得不操作 DOM ,React 是不会去操作 DOM 的。它用一种更快的内置仿造的 DOM 来操作差异,为你计算出出效率最高的 DOM 改变

    对这个组件的输入称为 props - “properties”的缩写。得益于 JSX 语法,它们通过参数传递。你必须知道在组件里,这些属性是不可改变的,也就是说 this.props 是只读的

    组件就像是函数

    React 组件非常简单。你可以认为它们就是简单的函数,接受 propsstate (后面会讨论) 作为参数,然后渲染出 HTML。正是应为它们是这么的简单,这使得它们非常容易理解。

    注意:

    只有一个限制: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们必须被包含在同一个节点里。

    JSX 语法

    我们坚信组件是正确方法去做关注分离,而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外,展示逻辑通常是很复杂的,通过模板语言实现这些逻辑会产生大量代码。

    我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。

    为了使这变得更简单,我们做了一个非常简单、可选类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。

    JSX 让你可以用 HTML 语法去写 JavaScript 函数调用 为了在 React 生成一个链接,通过纯 JavaScript 你可以这么写:

    javascript React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello React!')

    通过 JSX 这就变成了

    <a href="https://facebook.github.io/react/">Hello React!</a>

    我们发现这会使搭建 React 应用更加简单,设计师也偏向用这用语法,但是每个人可以有它们自己的工作流,所以JSX 不是必须用的。

    JSX 非常小;上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多,请看 深入理解 JSX。或者直接使用Babel REPL观察变化过程。

    JSX 类似于 HTML,但不是完全一样。参考 JSX 陷阱 学习关键区别。

    [Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具。

    没有 JSX 的 React

    JSX完全是可选的;你无需在 React 中必须使用 JSX。你可以通过 React.createElement 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,每三个是子节点。

    1. var child1 = React.createElement('li', null, 'First Text Content');
    2. var child2 = React.createElement('li', null, 'Second Text Content');
    3. var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
    4. ReactDOM.render(root, document.getElementById('example'));

    方便起见,你可以创建基于自定义组件的速记工厂方法。

    1. var Factory = React.createFactory(ComponentClass);
    2. ...
    3. var root = Factory({ custom: 'prop' });
    4. ReactDOM.render(root, document.getElementById('example'));

    React 已经为 HTML 标签提供内置工厂方法。

    1. var root = React.DOM.ul({ className: 'my-list' },
    2. React.DOM.li(null, 'Text Content')
    3. );