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

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

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

這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模組(元件)，這些元件的可重複使用性很強(qiáng)，不僅如此，元件也可以讓測(cè)試和關(guān)注分離變得簡(jiǎn)單。其次，當(dāng)資料變化的時(shí)候，React能夠自動(dòng)更新使用者介面，並且僅更新需要更新的部分。

核心函數(shù)1:render

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

簡(jiǎn)單範(fàn)例：（先給的是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)容被替換掉了，替換成了我們?cè)趓ender中寫(xiě)入的程式碼：hello world！

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

更複雜一點(diǎn)的例子，我們可以來(lái)將這裡的<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語(yǔ)法的神奇之處了，在程式碼中，JS和DOM可以說(shuō)是混雜在一起的。而JSX 的基本語(yǔ)法規(guī)則：遇到 HTML 標(biāo)籤（以 < 開(kāi)頭），就用 HTML 規(guī)則解析；遇到程式碼區(qū)塊（以 { 開(kāi)頭），就用 JavaScript 規(guī)則解析。

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

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

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

<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è)最簡(jiǎn)單的元件。

關(guān)於這個(gè)元件，我們還可以獲得更多資訊。例如，使用props

（實(shí)例來(lái)自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：也就是說(shuō)，CommentList是由多個(gè)Comment組成的。我們?cè)贑ommentList中為Comment定義了一個(gè)屬性：author。那麼，在Comment元件中，就可以透過(guò){this.props.author}讀到這個(gè)屬性，而透過(guò){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ù)，我們透過(guò)建立元件，將這些數(shù)據(jù)嵌入了網(wǎng)頁(yè)的DOM中。

元件state

每個(gè)元件都有一個(gè)屬性：state，開(kāi)發(fā)者可以透過(guò)呼叫this.setState()來(lái)改變?cè)臓顟B(tài)。當(dāng)狀態(tài)更新之後，元件就會(huì)重新渲染自己。 state和props都是一個(gè)元件的特性，但是不同的是，props是不變的，但是state是可以改變的。

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

更新?tīng)顟B(tài)：

註：componentDidMount函數(shù)是元件的生命週期函數(shù)，它是一個(gè)在元件被渲染的時(shí)候React自動(dòng)呼叫的方法，後面會(huì)詳細(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è)栗子中，我們透過(guò)ajax取得數(shù)據(jù)，並透過(guò)函數(shù)this.setState將取得的數(shù)據(jù)設(shè)定為this.state.data。然後，在CommentList中，設(shè)定data={this.state.data}，就可以將從伺服器取得的資料顯示出來(lái)。 （想看更多就到PHP中文網(wǎng)React參考手冊(cè)欄位學(xué)習(xí)）

元件的生命週期

元件的生命週期分為以下三種：

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

2. #Updating：正在重新渲染

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

在元件的生命週期中，有生命週期函數(shù)會(huì)被自動(dòng)呼叫。它們分別是：

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è)栗??子來(lái)自於阮一峰大神的博客：

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ù)裡，我們?cè)O(shè)定了一個(gè)定時(shí)器，每100毫秒改變一次透明度，直到元件完全透明後，將透明度再設(shè)定成1(初始的透明度設(shè)定為1)。這樣，這個(gè)元件聚會(huì)不停在被渲染。這樣，我們就在頁(yè)面上得到了一個(gè)不停閃爍的hello world字串。如果我們寫(xiě)函數(shù)：

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

我們就可以在控制臺(tái)看到不斷的輸出。

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

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

這樣做的好處自然有很多：首先，React將DOM&JavaScript封裝成模組(元件)，這些元件的可重複使用性很強(qiáng)，不僅如此，元件也可以讓測(cè)試和關(guān)注分離變得簡(jiǎn)單。其次，當(dāng)資料變化的時(shí)候，React能夠自動(dòng)更新使用者介面，並且僅更新需要更新的部分。

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

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