詳解react中的state的簡(jiǎn)寫方式

更新時(shí)間：2021年08月13日 14:48:34 作者：h周杰偷

React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過(guò)與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來(lái)初始化的，本文重點(diǎn)給大家介紹react中的state的簡(jiǎn)寫方式，感興趣的朋友一起看看吧

前言

什么是state

我們都說(shuō)React是一個(gè)狀態(tài)機(jī)，體現(xiàn)是什么地方呢，就是體現(xiàn)在state上，通過(guò)與用戶的交互，實(shí)現(xiàn)不同的狀態(tài)，然后去渲染UI,這樣就讓用戶的數(shù)據(jù)和界面保持一致了。state是組件的私有屬性。

在React中，更新組件的state，結(jié)果就會(huì)重新渲染用戶界面(不需要操作DOM),一句話就是說(shuō)，用戶的界面會(huì)隨著狀態(tài)的改變而改變。

PS: state 只能在本組件中去初始化，并且 state 只能被本組件去修改和仿問(wèn)，不能被外部仿問(wèn)和修改，所以也可以說(shuō)，state 是組件私有的。

下面介紹下react的state的簡(jiǎn)寫方式吧。

state是react中用來(lái)初始化的。this.state 應(yīng)該被視為一個(gè)組件的私有屬性，我們的react的state的寫法方式式有兩種的一種是我們?cè)诠倬W(wǎng)上看到的用constructor(構(gòu)造器)

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

但是在類組件中在使用state時(shí) 類會(huì)繼承了React.Component

class Appt extends React.Component{
         //我們定義在這里的state就和上面的方法是一樣的
         //	類中可以直接寫賦值語(yǔ)句
              state={aff:1}
 
             render(){  
                 console.log(this);
                 //這個(gè)this就繼承了React.Component
                 // 這里的this是當(dāng)前組件的實(shí)例對(duì)象
                 return (
                     <div>
                       123
                     </div>
                 )
             }
       }

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

相信大家都想看看這個(gè)this打印的是何物不急向下看

在這里插入圖片描述

這個(gè)是我們的簡(jiǎn)寫的state的打印this的結(jié)果我們接著看我們官網(wǎng)的方式打印的this的結(jié)果，

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

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

打印結(jié)果是兩種方式效果是一樣的

在這里插入圖片描述