首頁 >web前端 >js教程 >react的函數有哪些？ react函數的詳細解析（附實例）

react的函數有哪些？ react函數的詳細解析（附實例）

寻∝梦原創: 2018-09-11 15:55:133145瀏覽

這篇文章主要講述的就是關於react該如何學習的介紹，現在讓我們一起來看文章的正文內容吧

React根本上其實就是一個JavaScript函式庫。

它體現了前後分離的思想，將部分組裝頁面的工作轉交給瀏覽器來完成；不像JSP文件，頁面的佈局和填入數據是在伺服器完成後發送給瀏覽器的的。

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

核心函數1:render

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

簡單範例：（先給的是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的內容被替換掉了，替換成了我們在render中寫入的程式碼：hello world！

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

更複雜一點的例子，我們可以來將這裡的e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3 擴充。

<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 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到程式碼區塊（以 { 開頭），就用 JavaScript 規則解析。

核心函數2:React.createClass

這個函數允許我們自己定義需要的元件，定義好的元件可以作為像p這樣的標籤一樣，直接應用於render函數中。

一個簡單的栗子：

<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;)
);

在這個栗子裡，HelloWorldBox就是一個最簡單的元件。

關於這個元件，我們還可以獲得更多資訊。例如，使用props

（實例來自React官網）

<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;)
);

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

存取外部數據：

<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;)
);

在這裡，數組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: &#39;json&#39;,
      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>
    );
  }
});

這個栗子中，我們透過ajax取得數據，並透過函數this.setState將取得的數據設定為this.state.data。然後，在CommentList中，設定data={this.state.data}，就可以將從伺服器取得的資料顯示出來。（想看更多就到PHP中文網React參考手冊欄位學習）

元件的生命週期

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

Mounting：已插入真實DOM
#Updating：正在重新渲染
##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 (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

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

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

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

React根本上其實就是一個JavaScript函式庫。

它體現了前後分離的思想，將部分組裝頁面的工作轉交給瀏覽器來完成；不像JSP文件，頁面的佈局和填入數據是在伺服器完成後發送給瀏覽器的的。

這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react的函數有哪些？ react函數的詳細解析（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Reactjs的生命週期是什麼？ reactjs生命週期的詳細介紹下一篇：Reactjs的生命週期是什麼？ reactjs生命週期的詳細介紹

看更多