首頁 > 文章 > web前端 > react的狀態有哪些？ react狀態的詳細介紹（附完整實例）

react的狀態有哪些？ react狀態的詳細介紹（附完整實例）

寻∝梦原創: 2018-09-11 14:13:071420瀏覽

本篇文章主要的介紹了關於react組件的狀態詳解，有興趣的可以點進來一起看看關於react狀態的文章詳情吧

#React元件免不了不停的要與使用者互動,一開始有一個初始狀態，然後在與使用者互動的過程中，使用者的每個動作都可能觸發狀態機的變化，新的狀態由不同的React 元素展現。 React 的一大創新,就是將元件看成是一個狀態機State Machines,當狀態發生改變時, React會在最有效的方式下更新DOM,重新渲染頁面,讓使用者介面和資料保持一致。
一、state工作原理
1、1 儲存狀態
React在this.state中儲存元件的狀態。
1、2 設定狀態的初始值
有兩種設定this.state初始值的方法：
如果建立元件使用React.createClass方式,就用getInitialState方法初始化狀態，例如

　　var scoreComponent=React.createClass({
    getInitialState:function(){
    return{
    score:0
    };
    }
    ......
    });
　如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
    constructor(props){
    super(props);
    this.state ={score:60};
        }
    ...}

1.3 改變元件狀態的方法
使用this.setState(data,callback)改變狀態的值,這個方法可以把data合併到this.state，並且重新渲染了元件。 data參數可以是物件也可以是傳回包含要更新欄位的物件的函數。可選的 callback會在元件重渲染後被呼叫。 this.setState 方法就修改狀態值，每次修改以後，自動呼叫 this.render 方法，再次渲染元件。（想看更多就到PHP中文網React參考手冊欄位學習）

#1.4 state應該包含什麼樣的資料
UI互動會導致改變的資料。
1.5 state不應包含什麼樣的資料
1、計算的資料
2、元件
3、從props複製的資料
state應保含最原始的數據，例如說時間，格式化應該交給展現層去做。
元件應在render方法裡控制。
二、state的開發實例
1、計算點擊的次數

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React状态机</title>
 <script type="text/javascript" src="js/react.min.js" ></script>
 <script type="text/javascript" src="js/react-dom.min.js" ></script>
 <script type="text/javascript" src="js/browser.min.js" ></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel">
      var BtnButton = React.createClass({
        getInitialState: function() {
          return {count: 0};
        },
        handleClick: function(event) {
          this.setState({count:this.state.count+1});
        },
        render: function() {
          var text =this.state.count ;
          return (
            <p onClick={this.handleClick}>
              获取点击的次数<br />
                 <span>{text}</span>
            </p> 
          );
        }
      });
      ReactDOM.render(
        <BtnButton />,
        document.getElementById(&#39;example&#39;)
      );
    </script>
  </body>
</html>

以上實例中創建了BtnButton 元件，getInitialState 方法用於定義初始狀態，也就是一個對象，這個物件可以透過this.state 屬性讀取。當使用者點擊元件，導致狀態變化，this.setState 方法就會修改狀態值，每次修改以後，自動呼叫 this.render 方法，再次渲染元件。
這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react的狀態有哪些？ react狀態的詳細介紹（附完整實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：什麼是react？ react主要是做什麼的？（問答篇）下一篇：什麼是react？ react主要是做什麼的？（問答篇）

看更多