细说React(一)

React 是近期非常热门的一个前端开发框架。 这篇文章将介绍如何使用 React 来创建用户界面,希望能够起到抛砖引玉的效果。

"React,  A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"

正如官网的介绍,一个框架,Just the UI。React的API相对于庞大Angular来说比较简单,但是精简的 API 不是意味着没有一定的学习成本,我们还是需要对此框架进行一定的理解。 闲话不多说,让我们进入正题。首先,让我们来了解下 React 中使用到的一些术语。

React 术语

  • React Elements

    代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。

  • Components

    封装 React Elements, 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块,例如 分页,侧栏导航等。

  • JSX

    JSX 是 React 定义的一种 JavaScript 语法扩展,类似于 XML 。 JSX 是可选的, 我们完全可以使用 JavaScript 来编写 React 应用, 不过 JSX 提供了一套更为简便的方式来写 React 应用。

  • Virtual DOM

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI, 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

  • DOM Diff

    React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。

DEMO 环境准备

首先,在 React Download 页面 下载 Starter Kit,解压到某个地方。

进入到解压后的 build 目录,新建一个 index.html 文件,并且引用 react.js , react-dom.js(0.14版本之前react和react-dom没有分家,0.14之后将两者分开,react-dom只提供了一个渲染的方法)和 JSXTransformer.js(官方现不建议使用JSXTransformer.js,建议使用babel,配合ES6,写起来非常爽) 后就可以开始编写 React 应用了。需要注意如果使用 JSX, 那么 script 标签的 type 应该更改为 text/jsx

<html>
  <head>
    <meta charset="utf-8" >
    <title>demo</title>
  </head>
  <body>
    <script src="react.js"></script>
   <script src="react-dom.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx" src="app.js"></script> </body> </html>

第一个 React Element

创建一个 Element 只需调用 React.createElement 方法,并传入元素信息即可。例如:

var div = React.createElement('div', null, "Hello React");
// 使用 JSX var div = <div>Hello React</div>

创建之后就可以调用 React.render 方法渲染到页面上:

ReactDOM.render(div, document.body);

第一个 React Component

React Component 抽象出相同 UI 组件的结构和逻辑。 通过调用 React.createClass 方法来创建一个 Component,并传入一个带有 render 方法的对象类型的参数。

var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="iissnan" />, document.body);

我们看到 React.createClass 接收了一个对象,并将这个方法返回赋值给 HelloMessage, 最后调用 ReactDOM.render 方法将这个新建的 Component 渲染到页面上。从这个例子看来,一个 Component 与 Element 并无太大的差别。 事实上, Component 已经准备好了,我们可以增添一些结构和功能来扩展这个 Component 。

Props

在上一个例子中,可以看到有一个特殊的引用: this.props.name。 这个引用称之为 Props,可以将他想象成 Component 的设置选项。

在使用上, Props 类似于 HTML 中的属性:

ReactDom.render(<HelloMessage name="foo" />, document.body);

在 Component 内部,通过 this.props.name 来引用这个 Props

var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});

需要注意的是, Props 仅用来定制 Component, 这些数据不应该被改动。 如果涉及到需要做改动的数据, 得考虑使用state

Stateful Component

State 数据代表 Component 的状态, 用于维护 Component 内部的状态。 当 State 发生改变之后, React 将会重新渲染 UI 。调用 与 Props 类似, State 数据通过 this.state 访问:

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
          <div>Hello {this.props.name}</div>
          <span>{response}</span>
          <button onClick={this.greet}>Hi</button>
        </div>
    );
  }
});

ReactDOM.render(<Greeting name="foo" />, document.body);

这个例子中加了几个函数,我们一一来看下。 首先是 getInitialState , 这个方法在 Component 初始化的时候被调用, 返回 Component 初始时的状态数据。例子中,我们设置了 Component 初始时的 greeted 为 false
然后是 greet 方法,这个方法被调用之后将修改状态数据 greeted 为 true

当 State 发生改变后, React 将 Component 渲染到 Virtual DOM,新的 Virtual DOM 与 旧版本的进行比对,检查出改变的部分并更新浏览器的 DOM。 在这个例子中,当按钮被点击后, greeted状态数据发生了变化,UI 跟随着更新。

组合

结合 Props 和 State,我们就可以使用 Component 来创建完整的应用。

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});

var users = ["foo", "bar", "baz"];

var GreetingApp = React.createClass({
  render: function () {
    var greetings = this.props.users.map(function (user) {
      return <Greeting name={user} />;
    });

    return <div>{greetings}</div>;
  }
});

ReactDOM.render(<GreetingApp users={users} />, document.body);

最后

打个小广告,github上提供demo演示,项目地址--react学习,欢迎star!希望能对你有所帮助!


posted @ 2016-02-04 15:27  theWalker  阅读(1424)  评论(0编辑  收藏  举报