Reactjs 快速入门介绍

jopen 10年前

React.js介绍

根据他们自己的定义, React.js 是非死book 推出的一个用来构建用户界面的 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, 其中也包含了你前面定义的那些.
花括号里的代码在语法当中被"转义"了.
来看一下预编译后的ThingListclass:

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 的功能做了更广泛的说明.