前端框架React.js入门介绍

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本文来自糖黄的csdn博客，http://blog.csdn.net/zyd383329144

转帖请注明。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

由于近期项目原由，碰巧有机会接触了一下近来火热的一款前端框架——react.js

由于项目排期较紧，匆忙地写了将近几千行代码，对于Facebook所推的基于flux架构的这一套前端玩法有了一个大致的把握。

目前网上所找到的绝大多数react相关文章，特别是中文社区中的大部分，要么只是接触了些皮毛就跑来沽名钓誉，要么是随便粘来粘去，良莠不齐实在不敢恭维。

在项目期间自己为此“上了不少当”，也踩了不少坑。所以决定以此篇作为开始，写一系列有关react的blog，众神轻喷。

首先介绍下，单纯的react框架（我认为甚至不该被称为框架）只是扮演了传统MVC架构思想中的V层的角色，所以很多人拿它和Angular进行比较，这是没有意义的，

真要比也是拿React+Flux+(jasmine或其他js单测工具)一阵套工作框架去和angular对比。

当然，我们可以理解为react更年轻，一切都还只是开始。

看过官网的朋友都知道，react提出了component（组件）的概念，是组合模式非常典型的实践。

component抽象了view层的业务，这对于在项目中代码量上来后的可读性、扩展性、可维护性及可复用性都是十分有利的。

下面拿出一个我自己写的小组件举例：

</pre><pre name="code" class="javascript">var TopBar = React.createClass({

  getDefaultProps: function() {
    return {
      title : '',
      backUrl : ''
    }
  },

  render: function() {
    return (
      <div className="passport-common-top-bar">
        <h1>{this.props.title}</h1>
        <div className="back">
          <a href={this.props.backUrl}></a>
        </div>
      </div>
    );
  }
});

这是一个移动端页面中上方装饰条，通常的设计稿中这类组件的结构、表现以及内部的逻辑都是一样的，变化的只是中间的描述文字以及左边返回标签所连接的跳转地址而已，因此我们可以将其抽象为以上组件，以便于在业务中进行重复调用。调用时的代码如下：

我们将想要渲染的内容以这种形式传入组建即可，对于调用者来说它只是个黑盒，我们并不关心其内部实现。

以上介绍的只是一个基于react实现的非常简单的功能性组件，在这个组件中我们看到了react组件中最为重要的两个变量之一——prop。

这是一个静态变量，通常用于且仅仅用于外部组件调用当前组件时传入的数据，在传入之后我们不建议对其进行任何值的改变（在开发版的react类库下，如果改变prop，console里会报一个warn告诉你最好不要这么做），因为真正用来做这样事情的是state，也就是刚才所提到的react组件中最为重要的变量中的另一个。

说到state，其实它只是一个com内部的动态属性，（网上竟然有技术博客把这个扯到了汇编原理中的FSM有限状态机，真是听风就是雨）需要提示的一点是任何state值的改变都会触发组件的render方法对自身进行重绘，这其实也是一个react项目中view层最最关键的知识点了，state用活了以后理论上你的项目是不需要jquery这种东西去操作DOM节点的，这一点在后续文章中会具体讲。

state的用法如下：

getInitialState: function() {
    return {
      mobile: '',
      password: '',
      confirmPassword: '',
      errmsg: ''
    };
  },

组件中的这个函数初始化了一个组件中初始状态时各个state值

this.setState({
        errmsg : 'error!'
      });

在代码逻辑中以这种方式动态地变化state值，随之触发render重绘。

以上所述内容基本上是实现一个react组件所必备的相关方式，更多的玩法和实践会在今后的文章中提及。