React 快速介绍

原文: http://words.taylorlapeyre.me/an-introduction-to-react
作者: Taylor Lapeyre

根据他们自己的定义,React 是"一个用于构建用户界面的 JavaScript 类库".
我第一次读到 React 的时候,它作为前端 JavaScript 的一个好方案马上打动了我.
用 React 做了些小项目以后,我的结论是它到底是一个很强大的框架.
这篇文章里,我要描述怎样尽可能快运行起 React.

JSX: React 的语法

React 使用的是特殊的 JavaScript 语法,叫做 JSX.
主要的目标是提供一个能表示 React 内部的 DOM 的符合直觉的语法糖,
这套内部的 DOM 被 React components 所使用,是构建 React 应用的城砖.
React 关于 JSX 的官方教程上其他的用法也很好懂.

你的应用里使用 JSX 有多重方法,但最终 JSX 代码会被编译到平常的 JavaScript.
第一种,也是最简单的一种办法,是引入 React 的 JSXTransformer.js 文件,
这个文件提供了将标记了 JSX 的 JavaScript 代码编译到普通 JavaScript 的方法.

我更喜欢第二种,就是预先编译好 JSX 代码.
这个通过 React 的 JSX 命令行工具做起来最简单:

$ npm install -g react-tools
$ cd project/
$ jsx --watch src/ build/

这样以后,使用 JSX 只要在你的 HTML 文件中引用 build/whatever.js就好了.

开始运行

搞清楚你想用哪一种处理 JSX 的方案以后,运行 React 就很平常了.
直接下载 react.js (或者指向 cdn),再引用对应文件到 HTML 文档的头部:

<html>
    <head>
        <script src="react.js"></script>
        ...
    </head>
    <body>
        ...
        <script src="mine.js"></script>
    </body>
</html>

React 不依赖第三方的类库(比如 jQuery),所以不用去担心.
只是,要注意在文档内容加载完成的位置引用你自己的代码文件.

Components: React 的城砖

React 当中,components 是构建应用核心的城砖.
component 是各自独立的,模块化,在应用当中是动态的 HTML 的表示.
component 经常会是其他 React component 的子模块.
这在下面的文本当中更明确:

/** @jsx React.DOM */
var Thing = React.createClass({
  render: function() {
    return (


<p>{this.props.name}</p>


    );
  }
});

var ThingList = React.createClass({
  render: function() {
    return (


<h1>My Things:</h1>,<Thing name="Hello World!" />
    );
  }
});

React.renderComponent(
  <ThingList />,document.querySelector('body')
);

这个例子里,renderComponent 把一个 component 渲染到给定的 DOM 节点,启动应用.

如果这是你第一次接触 React,其他一些东西会让你感到非常奇怪.

这是把 HTML.. 写在 JavaScript 里了?

不完全是. 你看到的是 JSX 的样子,这几行看着像 HTML,实际上不代表 DOM 节点.
实际上,他们只是语法糖,表示 React 内部的 DOM,其中也包含了你前面定义的那些.
花括号里的代码在语法当中被"转义"了.
来看一下预编译后的 ThingList class:

var ThingList = React.createClass({displayName: 'ThingList',render: function() {
    return (
      React.DOM.h1(null,"My Things:"),Thing( {name:"Hello World!"} )
    );
  }
});

如果这个版本对你来说更有意义,那可以说达到预期了.
我刚用 React 的时候,我非常看不惯 HTML 式的语法.
然而当你的应用一步步变得复杂起来,你会开始很奇妙地赞赏 JSX 语法了. 比如:

var ComplexThing = React.createClass({
  render: function() {
    return (


<div className="complexThing">
        <Thing name="thing one" />
        <Thing name="thing two" />
      </div>,<a href="back.html">Go Back</a>
    );
  }
});

// 对比下面,非 JSX 的版本:

var ComplexThing = React.createClass({displayName: 'ComplexThing',render: function() {
    return (
      React.DOM.div( {className:"complexThing"},Thing( {name:"thing one"} ),Thing( {name:"thing two"} )
      ),React.DOM.a( {href:"back.html"},"Go Back")
    );
  }
});

Components 和 State

我前面的例子你可能已经注意到陌生的内容了 this.props.name.
props 是哪里来的? 用来做什么?

每个 React component 都接收传入的属性,定义在特定 component 实例上的不可变信息.
你可以把 this.props 想象成被传入函数当中的参数.
但是,因为他们是不可变的,component 被渲染后这些属性就不能被改变了.
然后 state 根据需要被引入了.

出了上边不可变的属性,React 还有个私有属性 this.state.
当 state 被更新,component 就自动刷新渲染.

/** @jsx React.DOM */
var StatefulThing = React.createClass({
  updateName: function(event) {
    event.preventDefault();
    this.state.name = "Taylor";
  },setInitialState: function() {
    return (
      {name: "World"}
    );
  },render: function() {
    return (
      <a href="#" onClick={this.updateName}>
        My name is {this.state.name}
      </a>
    );
  }
});

React 用驼峰命名法来绑定事件 handler,用这个函数来处理 event.

有一点注意一下,目前我们看到所有的例子都没有对你的应用的其他部分做什么设定.
React 仅仅是一个前端开发框架. 跟 Backbone.js 那样的框架不同,
React 希望你自己处理跟服务器获取和发送数据的工作.
这使得 React 作为一个前端的解决方案很好部署,因为它仅仅要求你给它传入数据.
React 会自己完成其他工作.

希望这篇文章能让你了解到 React 是如何工作的.
如果你想学更多,我推荐 React 官方的教程,里面关于 React 的功能做了更广泛的说明.