本篇文章主要講述的就是關(guān)于react該如何學(xué)習(xí)的介紹，現(xiàn)在讓我們一起來看文章的正文內(nèi)容吧

React根本上其實(shí)就是一個(gè)JavaScript庫。

它體現(xiàn)了前后分離的思想，將部分組裝頁面的工作轉(zhuǎn)交給瀏覽器來完成；不像JSP文件，頁面的布局和填入數(shù)據(jù)是在服務(wù)器完成后發(fā)送給瀏覽器的的。

這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模塊(組件)，這些組件的可復(fù)用性很強(qiáng)，不僅如此，組件也可以讓測試和關(guān)注分離變得簡單。其次，當(dāng)數(shù)據(jù)變化的時(shí)候，React能夠自動更新用戶界面，并且僅更新需要更新的部分。

核心函數(shù)1:render

這個(gè)函數(shù)的功能就是提供一個(gè)模塊，它就像是樂高玩具的一塊積木，用來組裝頁面。

簡單示例：（先給出的是html代碼，后給出的是JSX代碼。JSX就是JavaScript+XML的意思）

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

可以看到 class 為 firstContainer 的p的內(nèi)容被替換掉了，替換成了我們在render中寫入的代碼：hello world！

另外document.getElementsByClassName(‘firstContainer’)[0]可以替換成任何原生的JavaScript獲取**單獨(dú)某一個(gè)（一定是一個(gè)Node，因此如果你使用document.getElementsByClassName這樣的方法必須要加上[n]）**DOM元素的方法：document.getElementById或者document.getElementsByTagName等都可以。

更復(fù)雜一點(diǎn)的例子，我們可以來將這里的<p>Hello, world!</p> 擴(kuò)充一下。

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

我們可以看到JSX語法的神奇之處了，在代碼中，JS和DOM可以說是混雜在一起的。而JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。

核心函數(shù)2:React.createClass

這個(gè)函數(shù)允許我們自己定義需要的組件，定義好的組件可以作為像p這樣的標(biāo)簽一樣，直接應(yīng)用于render函數(shù)中。

一個(gè)簡單的栗子：

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
  render: function() {    return (
      <p className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </p>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById(&#39;container&#39;)
);

在這個(gè)栗子里，HelloWorldBox就是一個(gè)最簡單的組件。

關(guān)于這個(gè)組件，我們還可以獲取更多信息。例如，使用props

（實(shí)例來自React官網(wǎng)）

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

在這個(gè)栗子中，我們使用React.createClass方法建立了兩個(gè)組件，我們可以看到，在組件CommentList中，嵌套了Comment：也就是說，CommentList是由多個(gè)Comment組成的。我們在CommentList中為Comment定義了一個(gè)屬性：author。那么，在Comment組件中，就可以通過{this.props.author}讀到這個(gè)屬性，而通過{this.props.children}，則可以讀到這個(gè)組件的子節(jié)點(diǎn)。

接入外部數(shù)據(jù)：

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var names = [&#39;Alice&#39;, &#39;Emily&#39;, &#39;Kate&#39;];
ReactDOM.render(
  <p>
  {
    names.map(function (name) {      return <Comment author={name}>is an author~</Comment>
    })
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

在這里，數(shù)組names是外部數(shù)據(jù)，我們通過建立組件，將這些數(shù)據(jù)嵌入了網(wǎng)頁的DOM中。

組件state

每個(gè)組件都有一個(gè)屬性：state，開發(fā)者可以通過調(diào)用this.setState()來改變組件的狀態(tài)。當(dāng)狀態(tài)更新之后，組件就會重新渲染自己。state和props都是一個(gè)組件的特性，但是不同的是，props是不變的，但是state是可以改變的。

getInitialState()可以設(shè)置組件的初始化狀態(tài)，這個(gè)函數(shù)在組件的生命周期中僅執(zhí)行一次。

更新狀態(tài)：

注：componentDidMount函數(shù)是組件的生命周期函數(shù)，它是一個(gè)在組件被渲染的時(shí)候React自動調(diào)用的方法，后面會詳細(xì)講到。

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 (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </p>
    );
  }
});

這個(gè)栗子中，我們通過ajax獲取數(shù)據(jù)，并通過函數(shù)this.setState將獲取的數(shù)據(jù)設(shè)置為this.state.data。然后，在CommentList中，設(shè)置data={this.state.data}，就可以將從服務(wù)器獲取的數(shù)據(jù)顯示出來。（想看更多就到PHP中文網(wǎng)React參考手冊欄目中學(xué)習(xí)）

組件的生命周期

組件的生命周期分為如下三種：

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

2. Updating：正在被重新渲染

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

在組件的生命周期中，有生命周期函數(shù)會被自動調(diào)用。它們分別是：

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

另外還有兩個(gè)特殊狀態(tài)的處理函數(shù)：

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

下面這個(gè)栗子來自于阮一峰大神的博客：

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 (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

componentDidMount函數(shù)在組件插入真實(shí) DOM以后調(diào)用，在這個(gè)函數(shù)里，我們設(shè)置了一個(gè)定時(shí)器，每100毫秒改變一次透明度，直到組件完全透明后，將透明度再設(shè)置成1(初始的透明度設(shè)置為1)。這樣，這個(gè)組件聚會不停在被渲染。這樣，我們就在頁面上得到了一個(gè)不停閃爍的hello world字符串。如果我們編寫函數(shù)：

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

我們就可以在控制臺看到不斷的輸出。

React根本上其實(shí)就是一個(gè)JavaScript庫。

它體現(xiàn)了前后分離的思想，將部分組裝頁面的工作轉(zhuǎn)交給瀏覽器來完成；不像JSP文件，頁面的布局和填入數(shù)據(jù)是在服務(wù)器完成后發(fā)送給瀏覽器的的。

這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模塊(組件)，這些組件的可復(fù)用性很強(qiáng)，不僅如此，組件也可以讓測試和關(guān)注分離變得簡單。其次，當(dāng)數(shù)據(jù)變化的時(shí)候，React能夠自動更新用戶界面，并且僅更新需要更新的部分。

本篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)React使用手冊欄目中學(xué)習(xí)），有問題的可以在下方留言提問。

以上是react的函數(shù)有哪些？react函數(shù)的詳細(xì)解析（附實(shí)例）的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！