hello word

在上例的body中，有一個(gè)div，id是example, 然后由react的渲染器把h2標(biāo)簽渲染到該div中。

ReactDOM.render（DOM節(jié)點(diǎn)，被插入的父節(jié)點(diǎn)）;

這一句代碼是最常用也是非常必要的一句。 這句中有個(gè)很重要的地方就是html語(yǔ)法和js語(yǔ)法的混寫(xiě)，這是jsx語(yǔ)法的特點(diǎn)，在jsx語(yǔ)法里，遇到 尖括號(hào)就按照html來(lái)解析，遇到花括號(hào)就按照js語(yǔ)法去解析。下面這個(gè)例子更能說(shuō)明jsx語(yǔ)法的寫(xiě)法：

 var list = ["word","man","boy"];
  ReactDOM.render(
          

            {
              list.map(function (name){
              return 
 hello {name}
               })
          }
          
,document.getElementById('example'));

最終的結(jié)果是：

hello word

hello man

hello boy

這里有一點(diǎn)需要說(shuō)明的是 ReactDOM.render 渲染器的第一個(gè)參數(shù)里，有且只能有一個(gè)頂級(jí)節(jié)點(diǎn)，不能有多個(gè)并列，否則會(huì)報(bào)錯(cuò)。JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開(kāi)這個(gè)數(shù)組的所有成員。

var list = [
word
,
man
,
boy
];
  ReactDOM.render(
{list}
,document.getElementById('example'));

最終結(jié)果是：

word

man

boy

React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標(biāo)簽一樣，在網(wǎng)頁(yè)中插入這個(gè)組件。React.createClass 方法就用于生成一個(gè)組件類(lèi)：

var HelloWord = React.createClass({
    render:function(){
        return 
hello {this.props.name}
    }
});
 ReactDOM.render(,document.getElementById('example'));

最終結(jié)果是：

hello 喵星人

上例中用React.createClass創(chuàng)建了一個(gè)組件類(lèi)HelloWord,這里有一點(diǎn)需要注意：組件類(lèi)名字的首字母必須是大寫(xiě)的,否則會(huì)報(bào)錯(cuò)。React.createClass接收一個(gè)對(duì)象，對(duì)象中必須有render屬性，render屬性的值一般都是寫(xiě)成一個(gè)函數(shù)，然后返回一個(gè)DOM對(duì)象，別忘了上面說(shuō)的，這個(gè)DOM對(duì)象有且只能有一個(gè)頂級(jí)節(jié)點(diǎn)，否則會(huì)報(bào)錯(cuò)。

我們?cè)谏厦娴拇a的return 里會(huì)看到有這么一段：this.props.name，然后在ReactDom.render中的第一個(gè)參數(shù)里會(huì)看到標(biāo)簽有一個(gè)屬性name="喵星人",這里需要記住的一點(diǎn)是name="喵星人"看上去就像在對(duì)函數(shù)傳參數(shù)，而this.props.name就是對(duì)參數(shù)的接收。

添加組件屬性，有一個(gè)地方需要注意，就是 class 屬性需要寫(xiě)成 className ，for 屬性需要寫(xiě)成 htmlFor ，這是因?yàn)?nbsp;class 和 for 是 JavaScript 的保留字。

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)。

var NotesList = React.createClass({
  render: function() {
    return (
      

      {
        this.props.children.map(function (child) {
          return 
{child}
;
        })
      }
      
    );
  }});ReactDOM.render(
  
    hello
    world
    
main
  ,
  document.getElementById('example'));

最終運(yùn)行結(jié)果：

1. hello

2. world

3. main

2 和3之間的換行是因?yàn)閜標(biāo)簽會(huì)自帶一個(gè)換行，li標(biāo)簽也會(huì)有一個(gè)換行，所以中間就有了一個(gè)空白行.

組件免不了要與用戶(hù)互動(dòng)，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開(kāi)始有一個(gè)初始狀態(tài)，然后用戶(hù)互動(dòng)，導(dǎo)致?tīng)顟B(tài)變化，從而觸發(fā)重新渲染 UI

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' : 'haven\'t liked';
    return (
      
        You {text} this. Click to toggle.
      

    );
  }});ReactDOM.render(
  ,
  document.getElementById('example'));

最終結(jié)果：

You haven't liked this. Click to toggle.

當(dāng)在文字上點(diǎn)擊時(shí)會(huì)變成：

You like this. Click to toggle.

然后一直點(diǎn)擊就會(huì)在兩句英文之間來(lái)回切換。

這里需要注意的是 getInitialState 是React默認(rèn)的屬性，需要返回一個(gè)對(duì)象，可以是NULL或者其他，表示初始狀態(tài)，返回的對(duì)象中可以不止有一個(gè)屬性，修改這些狀態(tài)可以使用react提供的方法this.setState(對(duì)象), 這里的對(duì)象可以只修改初始狀態(tài)中的某一個(gè)屬性，也可以同時(shí)修改多個(gè)。當(dāng)任何一個(gè)狀態(tài)改變的時(shí)候react就會(huì)重新調(diào)用 render屬性所指向的函數(shù)，也就意味著會(huì)重新渲染該組件。

組件的生命周期分成三個(gè)狀態(tài)：

Mounting：已插入真實(shí) DOM

Updating：正在被重新渲染

Unmounting：已移出真實(shí) DOM

React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)。

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用

shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

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 (
      
        Hello {this.props.name}