快捷導(dǎo)航

淺談React之狀態(tài)(State)

更新時(shí)間：2018年09月19日 14:13:33 作者：張培躍

這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在React當(dāng)中，當(dāng)你更新組件的state，然后新的state就會(huì)重新渲染到頁面中。在這個(gè)時(shí)候不需要你操作任何DOM。你也可以認(rèn)為組件在React當(dāng)中是一個(gè)狀態(tài)機(jī)（State Machines）。當(dāng)用戶進(jìn)行操作時(shí)會(huì)實(shí)現(xiàn)不同的狀態(tài)，然后再渲染到你的頁面中，讓你的頁面與數(shù)據(jù)始終保持一致。

如何定義State

定義一個(gè)合適的State，是正確創(chuàng)建組件的第一步。State必須能代表一個(gè)組件UI呈現(xiàn)的完整狀態(tài)集，即組件的任何UI改變，都可以從State的變化中反映出來；同時(shí)，State還必須是代表一個(gè)組件UI呈現(xiàn)的最小狀態(tài)集，即State中的所有狀態(tài)都是用于反映組件UI的變化，沒有任何多余的狀態(tài)，也不需要通過其他狀態(tài)計(jì)算而來的中間狀態(tài)。

組件中用到的一個(gè)變量是不是應(yīng)該作為組件State，可以通過下面的4條依據(jù)進(jìn)行判斷：

1.這個(gè)變量是否是通過Props從父組件中獲??？如果是，那么它不是一個(gè)狀態(tài)。

2.這個(gè)變量是否在組件的整個(gè)生命周期中都保持不變？如果是，那么它不是一個(gè)狀態(tài)。

3.這個(gè)變量是否可以通過其他狀態(tài)（State）或者屬性(Props)計(jì)算得到？如果是，那么它不是一個(gè)狀態(tài)。

4.這個(gè)變量是否在組件的render方法中使用？如果不是，那么它不是一個(gè)狀態(tài)。這種情況下，這個(gè)變量更適合定義為組件的一個(gè)普通屬性，例如組件中用到的定時(shí)器，就應(yīng)該直接定義為this.timer，而不是this.state.timer。

如果對(duì)狀態(tài)不好理解的朋友，你可以認(rèn)為狀態(tài)即是數(shù)據(jù)！

State 與 Props 區(qū)別

props 是組件對(duì)外的接口，state 是組件對(duì)內(nèi)的接口。組件內(nèi)可以引用其他組件，組件之間的引用形成了一個(gè)樹狀結(jié)構(gòu)（組件樹），如果下層組件需要使用上層組件的數(shù)據(jù)或方法，上層組件就可以通過下層組件的props屬性進(jìn)行傳遞，因此props是組件對(duì)外的接口。組件除了使用上層組件傳遞的數(shù)據(jù)外，自身也可能需要維護(hù)管理數(shù)據(jù)，這就是組件對(duì)內(nèi)的接口state。根據(jù)對(duì)外接口props 和對(duì)內(nèi)接口state，組件計(jì)算出對(duì)應(yīng)界面的UI。

主要區(qū)別：

State是可變的，是一組用于反映組件UI變化的狀態(tài)集合；
而Props對(duì)于使用它的組件來說，是只讀的，要想修改Props，只能通過該組件的父組件修改。
在組件狀態(tài)上移的場(chǎng)景中，父組件正是通過子組件的Props, 傳遞給子組件其所需要的狀態(tài)

現(xiàn)在我們先來通過ES6類React.Component完成一個(gè)通過點(diǎn)擊按鈕對(duì)DIV進(jìn)行顯示與隱藏的操作，效果如下：

咱們先將頁面進(jìn)行初始化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
  <div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 為當(dāng)前狀態(tài)添加isShow屬性
      this.state={
        // 值為true顯示，false為隱藏。默認(rèn)值為true。
        isShow:true
      }
    }
    render(){
      //返回組件的初始內(nèi)容
      return <div>
        <input type="button" value="顯示與隱藏"/>
        <div id="myDiv">我在這里呀！</div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

到目前為止，頁面已經(jīng)初始化完畢了。在上面的代碼中為state添加了一個(gè)默認(rèn)值為true的屬性isShow。isShow用來控制div的顯示與隱藏！當(dāng)isShow為true時(shí)顯示，為false時(shí)隱藏

接下來要完成的二件事。

第一件事是要為按鈕增加一個(gè)點(diǎn)擊事件，事件與changeState方法進(jìn)行綁定。當(dāng)點(diǎn)擊按鈕時(shí)改變isShow的狀態(tài)，也就是要為 isShow進(jìn)行取反操作。

注意：

1、onClick中的c要大寫。
2、onClick后跟的方法不要用引號(hào)包裹，而是用{}
3、在ES6的class中React是不會(huì)自動(dòng)綁定this的，所以需要自己通過bind綁定。
4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法來進(jìn)行設(shè)置。

第二件事是要為id為myDiv的DIV增加一個(gè)style屬性，該屬性要根據(jù)isShow的狀態(tài)來對(duì)DIV進(jìn)行顯示與隱藏

注意：

1、style的值不要用雙引號(hào)，而是用{}，否則會(huì)報(bào)錯(cuò)

最終版代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 為當(dāng)前狀態(tài)添加isShow屬性
      this.state={
        // 值為true顯示，false為隱藏。默認(rèn)值為true。
        isShow:true
      }
    }
    changeState(){
      //此處不能直接修改isShow的值。而是需要借助setState方法！
      this.setState({
        //取反操作
        isShow:!this.state.isShow
      });
    }
    render(){
      //返回組件的初始內(nèi)容
      return <div>
        {/*在ES6的class中React是不會(huì)自動(dòng)綁定this的，所以需要自己綁定*/}
        <input type="button" value="顯示與隱藏" onClick={this.changeState.bind(this)} />
        <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}>
          我在這里呀！
        </div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

由上面的示例可以發(fā)現(xiàn)，當(dāng)你改變isShow的狀態(tài)時(shí)，div也會(huì)發(fā)生相對(duì)應(yīng)的變化！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: