前言

什麼是state

我們都說React是一個狀態機，體現是什麼地方呢，就是體現在state上，通過與使用者的互動，實現不同的狀態，然後去渲染UI,這樣就讓使用者的資料和介面保持一致了。state是元件的私有屬性。

在React中，更新元件的state，結果就會重新渲染使用者介面(不需要操作DOM),一句話就是說，使用者的介面會隨著狀態的改變而改變。

PS: state 只能在本元件中去初始化，並且 state 只能被本元件去修改和仿問，不能被外部仿問和修改，所以也可以說，state 是元件私有的。

下面介紹下react的state的簡寫方式吧。

state是react中用來初始化的。this.state 應該被視為一個元件的私有屬性，我們的react的state的寫法方式式有兩種的一種是我們在官網上看到的用constructor(構造器)

 constructor(props) {
    super(props);
    this.state = {
      value: null,};
  }

但是在類元件中在使用state時 類會繼承了React.Component

class Appt exaLQDrAMUTtends React.Component{
         //我們定義在這裡的state就和上面的方法是一樣的
         //	類中可以直接寫賦值語句
              state={aff:1}
 
             render(){  
                 console.log(this);
                 //這個this就繼承了React.Component
                 // 這裡的this是當前元件的例項物件
                 return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,document.getElementById('app')
       )

相信大家都想看看這個this列印的是何物 不急向下看

這個是我們的簡寫的state的列印this的結果我們接著看我們官網的方式列印的this的結果，

 class Appt extends React.Component{
        constructor(props) {
            super(props)
            console.log(this,11);
           // 這個是我們正常的一個初始化state的方法
            this.state={
                num: 456
            }
        }
             render(){  
                 return (
                     <div>
                       123
                     <
 
/div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,document.getElementById('app')
       )

列印結果是兩種方式效果是一樣的

State: 總結

state 是元件物件最重要的屬性. 值是物件(可以包含多個key-value 的組合)

到此這篇關於react的state的簡寫方式的文章就介紹到這了,更多相關react的state內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！