淺析React 對(duì)state的理解

更新時(shí)間：2021年09月08日 17:24:21 作者：項(xiàng)哈哈想做前端

state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類本身身上的，是由這個(gè)類締造的實(shí)例身上的。這篇文章主要介紹了React 對(duì)state的理解,需要的朋友可以參考下

如何定義復(fù)雜組件（類組件）與簡(jiǎn)單組件（函數(shù)組件）？

是否具有狀態(tài)（state）

引出問(wèn)題，什么是狀態(tài)？

舉個(gè)例子，今天考試，考砸了，因?yàn)槲覡顟B(tài)不好，是狀態(tài)影響了我的行為。
組件中的狀態(tài)，驅(qū)動(dòng)了頁(yè)面更新，換句話說(shuō)，組件狀態(tài)中存著數(shù)據(jù)，數(shù)據(jù)的改變，驅(qū)動(dòng)頁(yè)面的更新。

在這里插入圖片描述

這里要了解，state狀態(tài)是誰(shuí)身上的狀態(tài)？state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類本身身上的，是由這個(gè)類締造的實(shí)例身上的。

（class)組件實(shí)例上三大屬性之一：state

顯示內(nèi)容

在這里插入圖片描述

實(shí)現(xiàn)一個(gè)需求，通過(guò)點(diǎn)擊頁(yè)面，炎熱/涼爽切換

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入核心庫(kù) -->
    <script src="../js/react.development.js"></script>
    <!-- 擴(kuò)展庫(kù) -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構(gòu)造器中能收到什么數(shù)據(jù)，取決于new的時(shí)候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒(méi)學(xué)到props，但得用著，模仿官網(wǎng)寫
          // 類本身語(yǔ)法
          super(props);
          // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實(shí)例對(duì)象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }
        render() {
          console.log("this:", this);
          return <h1>今天天氣很炎熱</h1>;
        }
      }
      //  2.渲染組件到頁(yè)面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

在這里插入圖片描述

初始化數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入核心庫(kù) -->
    <script src="../js/react.development.js"></script>
    <!-- 擴(kuò)展庫(kù) -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構(gòu)造器中能收到什么數(shù)據(jù)，取決于new的時(shí)候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒(méi)學(xué)到props，但得用著，模仿官網(wǎng)寫，不然無(wú)法執(zhí)行下去
          // 類本身語(yǔ)法
          super(props);
          // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實(shí)例對(duì)象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }
        // state在Weather的實(shí)例對(duì)象身上
        render() {
          console.log("this:", this);
          return <h1>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1>;
        }
      }
      //  2.渲染組件到頁(yè)面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

在這里插入圖片描述

接下來(lái)寫點(diǎn)擊事件，注意，先做一個(gè)錯(cuò)誤示范

 <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構(gòu)造器中能收到什么數(shù)據(jù)，取決于new的時(shí)候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒(méi)學(xué)到props，但得用著，模仿官網(wǎng)寫
          // 類本身語(yǔ)法
          super(props);
          // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實(shí)例對(duì)象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }

        // state在Weather的實(shí)例對(duì)象身上
        render() {
          console.log("this:", this);
          return (
            <h1 onClick={demo()}>
              今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}
            </h1>
          );
        }
      }
      function demo() {
        console.log("demo被調(diào)用");
      }
      //  2.渲染組件到頁(yè)面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>

我在調(diào)用點(diǎn)擊事件時(shí)，寫的是 onClick={demo()}
在控制臺(tái)會(huì)發(fā)現(xiàn)，函數(shù)被立即執(zhí)行了

在這里插入圖片描述

react在new Weather時(shí)，通過(guò)實(shí)例調(diào)用了render方法，想拿到return的值，就要執(zhí)行<h1 onClick={demo()}>今天天氣很{this.state.isHot ? “炎熱” : “涼爽”}</h1>，執(zhí)行到onClick賦值語(yǔ)句時(shí)，就要將demo()函數(shù)調(diào)用的返回值交給onClick作為回調(diào)，demo()的返回值是undifend,也就是把undifend交給onClick作為回調(diào)，**這是錯(cuò)誤的做法，是因?yàn)樵赿emo后加()，導(dǎo)致函數(shù)調(diào)用。**等到點(diǎn)擊時(shí)，就調(diào)用了undifend，react處理了這一過(guò)程，如果是undifend,就沒(méi)有多余動(dòng)作。

常見(jiàn)錯(cuò)誤寫法

  render() {
          console.log("this:", this);
          return (
            <h1 onClick='demo()'>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1>
          );
        }

在這里插入圖片描述

 render() {
          console.log("this:", this);
          return (
            <h1 onclick='demo'>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1>
          );
        }

在這里插入圖片描述

正確寫法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入核心庫(kù) -->
    <script src="../js/react.development.js"></script>
    <!-- 擴(kuò)展庫(kù) -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構(gòu)造器中能收到什么數(shù)據(jù)，取決于new的時(shí)候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒(méi)學(xué)到props，但得用著，模仿官網(wǎng)寫
          // 類本身語(yǔ)法
          super(props);
          // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實(shí)例對(duì)象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }

        // state在Weather的實(shí)例對(duì)象身上
        render() {
          console.log("this:", this);
          return (
            <h1 onClick={demo}>
              今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}
            </h1>
          );
        }
      }
      function demo() {
        console.log("demo被調(diào)用");
      }
      //  2.渲染組件到頁(yè)面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

在這里插入圖片描述

修改

上文已經(jīng)將數(shù)據(jù)渲染到頁(yè)面中，現(xiàn)在想要修改頁(yè)面的數(shù)據(jù)。想要修改數(shù)據(jù)，首先要拿到state中的isHot，先看一段錯(cuò)誤寫法：

 function demo() {
        console.log("demo被調(diào)用");
        // 錯(cuò)誤示范
        const { isHot } = this.state;
        console.log("isHot", isHot);
      }

在這里插入圖片描述

提示xxx of undefined(reading ‘state')，也就是state of undefined，當(dāng)xxx為undefined時(shí)，undefined.state 就會(huì)報(bào)這個(gè)錯(cuò)誤。這里的xxx指的就是this。
來(lái)打印一下this

  function demo() {
        // 錯(cuò)誤示范
        console.log("this", this);
        const { isHot } = this.state;
        console.log("isHot", isHot);
      }

在這里插入圖片描述

來(lái)看一下代碼結(jié)構(gòu)和注釋

在這里插入圖片描述

通過(guò)打印發(fā)現(xiàn)，將自定義函數(shù)放到類的外邊，數(shù)據(jù)雖然能夠正確顯示，但并不能拿到/修改state中的數(shù)據(jù)。

  class Weather extends React.Component {
        /**
         * 構(gòu)造器中能收到什么數(shù)據(jù)，取決于new的時(shí)候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒(méi)學(xué)到props，但得用著，模仿官網(wǎng)寫
          // 類本身語(yǔ)法
          super(props);
          /**
           * 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實(shí)例對(duì)象
           * 16.8之前，state是{}，16.8及之后，是null
           * state在Weather的實(shí)例對(duì)象身上
           */
          this.state = {
            isHot: true,
          };
        }
        // 切換天氣
        demo() {
          console.log("this", this);
          const { isHot } = this.state;
          console.log("isHot", isHot);
        }
        // 渲染
        render() {
          console.log("this:", this);
          return (
            <h1 onClick={demo}>
              今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}
            </h1>
          );
        }
      }

注意，類不是函數(shù)體，不需要寫function

到此這篇關(guān)于淺析React 對(duì)state的理解的文章就介紹到這了,更多相關(guān)React state理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: