React

参考资料：

React 官网
阮一峰教程
菜鸟教程
React 初识
===
React 是一个用于构建用户界面的 JAVASCRIPT 库。
主要用于构建UI， 是 MVC** (模型(model)－用户界面(view)－控制器(controller))**中的 V（用户界面）。

JSX

React 使用JSX语法，它允许HTML与javascript混写。
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
遇到代码块（以 { 开头），就用 JavaScript 规则解析。

  <h1> {this.props.title} </h1>

ReactDOM.render()

该方法是React的基本法，它可以将模板（下面的element以及component）转为HTML语言，再插入到指定的DOM中。
Element （元素）
===
描述的是你希望在屏幕中显示的内容

  const element=<h1> hello world </h1>;
  ReactDom.render(
    element,
    document.getElementById('root')
  )

我们可以将该元素传递给DOM节点，通过ReactDOM.render()

React element 是不可改变的，在它创建了之后，它的属性，子元素都不能改变。如果非要改，就只能重新创建一个新的元素。

  function tick(){
    const element = (
            <div>
                 <h2>It is {new Date().toLocaleTimeString()}.</h2> 
            </div>
         );
  ReactDOM.render(
            element,
            document.getElementById('root')
        );
  }
  {/*每一次执行setInterval都会创建一个新的元素*/}
  setInterval(tick, 1000);

Components and Props（组件和属性）

组件可以把UI（用户界面）分成许多独立的小块来单独考虑。
它可以接收任意形式的输入和 返回一个React element

定义一个组件有两种方式 （从React 角度来看这两种方法是相同的）

  function Welcome(props){
      return <h1>Hello, {props.name}</h1>;
    }  {/*js的函数形式*/}

  class Welcome extends React.Component{
    render(){
            return <h1>Hello, {this.props.name}</h1>;
          }
    }   {/*ES6中的类来定义*/}

  const element = <Welcome name="Sara" />;
  ReactDOM.render(
        element,
        document.getElementById('root')
    );

注意：
组件的名字只能用大写字母开头，否则会报错
组件类只能包含一个顶层标签，否则也会报错。

比如定义多个组件

  function App () {
        return (
                <div>
                      <Welcome name="Sara" />
                      <Welcome name="Cahal" />
                      <Welcome name="Edite" />
                </div>
            );
    }

    ReactDOM.render(
          <App />
          document.getElementById('root')
      );

组件必须返回一个单一的根元素，所以我们用一个<div>元素来包含所有的 <Welcome /> element ，否则会报错。
在返回的根元素中（比如上面的<div >）,我们可以尽可能将有联系的部分合成一个组件。

注意：
定义一个function内的函数不能改变它的输入，比如下面第一种可以第二种不行。

  function sum(a, b) {
       return a + b;
      }
  function withdraw(account, amount) { 
    account.total -= amount;
      }

State and Lifecycle（状态和生命周期）

在一开始时说“React element在一旦创建了之后，它的属性，子元素都不能改变。如果非要改，就只能重新创建一个新的元素。”所以每一次时间改变都要重新把element传递给DOM。但实际上，大多数React只执行一次 ReactDOM.render() ，所以引入State 。

React把组件看做是状态机，一开始有一个初始的State。通过与用户的交互导致State改变后，自动调用组件内的this.render 方法，再次渲染组件。

  var LikeButton = React.createclass({
      getInitialState:function()  {
          return {liked:false};
       },
      
      handleClick: function (event)  {
          this.setState({liked:!this.state.liked});
      }
    
      render: function()  {
          var text = this.State.liked ?"like" : "unliked";
          retuen  (
              <p onClick={this.handleClick}>
                  你<b>{text}</b>我。点我切换状态。
              </p>
          );
      }
  });

 ReactDOM.rennder(
    <LikeButton />,
    document.getElementById('root') 
  );

注意：
设置State的只能使用setState({comment: 'Hello'}); 方法

实现组件的生命周期
组件的周期分为三个状态
* Mounting 已插入真实DOM
* Updating 正在被重新渲染
* Unmounting 已移出真实DOM
React为每个状态都提供了两种处理函数，will函数在进入状态前调用，did函数在进入状态之后调用。共计五种：
* componentWillMount ()
* componentDidMount ()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()

比如，我们当一个组件在一开始提交到DOM时可以设置一个不断更新State的计时器（timer）

  componentDidMount()  {
      this.timerID = setInterval( 
      () => this.tick(), 
      1000 
      );
  }

当该组件从DOM中移除时可以清除这一个定时器

  componentWillUnmount() {
      clearInterval(this.timerID);
  }