React学习

React根本上其实就是一个JavaScript库。

它体现了前后分离的思想，将部分组装页面的工作转交给浏览器来完成；不像JSP文件，页面的布局和填入数据是在服务器完成后发送给浏览器的的。

这样做的好处自然有很多：首先，React将DOM&JavaScript封装成模块(组件)，这些组件的可复用性很强，不仅如此，组件也可以让测试和关注分离变得简单。其次，当数据变化的时候，React能够自动更新用户界面，并且仅更新需要更新的部分。

想要进行React的初步学习的测试，可以戳这里：
http://jsfiddle.net/69z2wepo

核心函数1:render

这个函数的功能就是提供一个模块，它就像是乐高玩具的一块积木，用来组装页面。

简单示例：（先给出的是html代码，后给出的是JSX代码。JSX就是JavaScript+XML的意思）

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
ReactDOM.render(
    <div>Hello, world!</div>,
    document.getElementsByClassName('firstContainer')[0]
);

可以看到 class 为 firstContainer 的div的内容被替换掉了，替换成了我们在render中写入的代码：hello world！

另外document.getElementsByClassName(‘firstContainer’)[0]可以替换成任何原生的JavaScript获取**单独某一个（一定是一个Node，因此如果你使用document.getElementsByClassName这样的方法必须要加上[n]）**DOM元素的方法：document.getElementById或者document.getElementsByTagName等都可以。

更复杂一点的例子，我们可以来将这里的<div>Hello, world!</div> 扩充一下。

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
var name = "Emily";
ReactDOM.render(
  <div>
  {
    (function(){
        return <div>Hello, {name}!</div>
    })()
  }
  </div>,
  document.getElementById('container')
);

我们可以看到JSX语法的神奇之处了，在代码中，JS和DOM可以说是混杂在一起的。而JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

核心函数2:React.createClass

这个函数允许我们自己定义需要的组件，定义好的组件可以作为像div这样的标签一样，直接应用于render函数中。

一个简单的栗子：

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/

var HelloWorldBox = React.createClass({
  render: function() {
    return (
      <div className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </div>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById('container')
);

在这个栗子里，HelloWorldBox就是一个最简单的组件。

关于这个组件，我们还可以获取更多信息。例如，使用props

（实例来自React官网）

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentList />,
  document.getElementById('container')
);

在这个栗子中，我们使用React.createClass方法建立了两个组件，我们可以看到，在组件CommentList中，嵌套了Comment：也就是说，CommentList是由多个Comment组成的。我们在CommentList中为Comment定义了一个属性：author。那么，在Comment组件中，就可以通过{this.props.author}读到这个属性，而通过{this.props.children}，则可以读到这个组件的子节点。

接入外部数据：

<div id="container" class="firstContainer">
  <div>replaced</div>
</div>
/*************************************************/

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <Comment author={name}>is an author~</Comment>
    })
  }
  </div>,
  document.getElementById('container')
);

在这里，数组names是外部数据，我们通过建立组件，将这些数据嵌入了网页的DOM中。

组件state

每个组件都有一个属性：state，开发者可以通过调用this.setState()来改变组件的状态。当状态更新之后，组件就会重新渲染自己。state和props都是一个组件的特性，但是不同的是，props是不变的，但是state是可以改变的。

getInitialState()可以设置组件的初始化状态，这个函数在组件的生命周期中仅执行一次。

更新状态：

注：componentDidMount函数是组件的生命周期函数，它是一个在组件被渲染的时候React自动调用的方法，后面会详细讲到。

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </div>
    );
  }
});

这个栗子中，我们通过ajax获取数据，并通过函数this.setState将获取的数据设置为this.state.data。然后，在CommentList中，设置data={this.state.data}，就可以将从服务器获取的数据显示出来。

组件的生命周期

组件的生命周期分为如下三种：

1. Mounting：已插入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM

在组件的生命周期中，有生命周期函数会被自动调用。它们分别是：

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

另外还有两个特殊状态的处理函数：

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

下面这个栗子来自于阮一峰大神的博客：

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

componentDidMount函数在组件插入真实 DOM以后调用，在这个函数里，我们设置了一个定时器，每100毫秒改变一次透明度，直到组件完全透明后，将透明度再设置成1(初始的透明度设置为1)。这样，这个组件聚会不停在被渲染。这样，我们就在页面上得到了一个不停闪烁的hello world字符串。如果我们编写函数：

componentDidUpdate:function(){
    console.log("did update");
}

我们就可以在控制台看到不断的输出。