淺析React 對state的理解

更新時間：2021年09月08日 17:24:21 作者：項哈哈想做前端

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

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

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

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

舉個例子，今天考試，考砸了，因為我狀態(tài)不好，是狀態(tài)影響了我的行為。
組件中的狀態(tài)，驅動了頁面更新，換句話說，組件狀態(tài)中存著數(shù)據(jù)，數(shù)據(jù)的改變，驅動頁面的更新。

在這里插入圖片描述

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

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

顯示內容

在這里插入圖片描述

實現(xiàn)一個需求，通過點擊頁面，炎熱/涼爽切換

在這里插入圖片描述

<!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>
    <!-- 引入核心庫 -->
    <script src="../js/react.development.js"></script>
    <!-- 擴展庫 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉換jsx轉為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構造器中能收到什么數(shù)據(jù)，取決于new的時候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網(wǎng)寫
          // 類本身語法
          super(props);
          // 構造函數(shù)中this指向構造函數(shù)實例對象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }
        render() {
          console.log("this:", this);
          return <h1>今天天氣很炎熱</h1>;
        }
      }
      //  2.渲染組件到頁面
      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>
    <!-- 引入核心庫 -->
    <script src="../js/react.development.js"></script>
    <!-- 擴展庫 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉換jsx轉為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構造器中能收到什么數(shù)據(jù)，取決于new的時候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網(wǎng)寫，不然無法執(zhí)行下去
          // 類本身語法
          super(props);
          // 構造函數(shù)中this指向構造函數(shù)實例對象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }
        // state在Weather的實例對象身上
        render() {
          console.log("this:", this);
          return <h1>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1>;
        }
      }
      //  2.渲染組件到頁面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

在這里插入圖片描述

接下來寫點擊事件，注意，先做一個錯誤示范

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

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

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

在這里插入圖片描述

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

常見錯誤寫法

  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>
    <!-- 引入核心庫 -->
    <script src="../js/react.development.js"></script>
    <!-- 擴展庫 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 轉換jsx轉為js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1.創(chuàng)建組件
      class Weather extends React.Component {
        /**
         * 構造器中能收到什么數(shù)據(jù)，取決于new的時候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網(wǎng)寫
          // 類本身語法
          super(props);
          // 構造函數(shù)中this指向構造函數(shù)實例對象
          // 16.8之前，state是{}，16.8及之后，是null
          this.state = {
            isHot: true,
          };
        }

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

在這里插入圖片描述

修改

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

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

在這里插入圖片描述

提示xxx of undefined(reading ‘state')，也就是state of undefined，當xxx為undefined時，undefined.state 就會報這個錯誤。這里的xxx指的就是this。
來打印一下this

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

在這里插入圖片描述

來看一下代碼結構和注釋

在這里插入圖片描述

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

  class Weather extends React.Component {
        /**
         * 構造器中能收到什么數(shù)據(jù)，取決于new的時候，傳的是什么數(shù)據(jù)
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網(wǎng)寫
          // 類本身語法
          super(props);
          /**
           * 構造函數(shù)中this指向構造函數(shù)實例對象
           * 16.8之前，state是{}，16.8及之后，是null
           * state在Weather的實例對象身上
           */
          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

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

您可能感興趣的文章:

React
state

詳解React 元素渲染
這篇文章主要介紹了React 元素渲染的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
React?Context原理深入理解源碼示例分析
這篇文章主要為大家介紹了React?Context原理深入理解源碼示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
字節(jié)封裝React組件手機號自動校驗格式FormItem
這篇文章主要為大家介紹了字節(jié)封裝React組件手機號自動校驗格式FormItem，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
React避坑指南之useEffect 依賴引用類型問題分析
這篇文章主要介紹了React避坑指南之useEffect 依賴引用類型問題分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
一看就懂的ReactJs基礎入門教程-精華版
現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發(fā)深深的吸引了我，下面來跟我一起領略ReactJs的風采吧~~ 文章有點長，耐心讀完，你會有很大收獲哦
2021-04-04
React useEffect的理解與使用
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合
2022-12-12
ReactiveCocoa代碼實踐之-UI組件的RAC信號操作
這篇文章主要介紹了ReactiveCocoa代碼實踐之-UI組件的RAC信號操作的相關資料,需要的朋友可以參考下
2016-04-04
關于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關于React Native報Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞錯誤，本文給大家分享解決方案,需要的朋友可以參考下
2021-05-05
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
React中redux的使用詳解
Redux 是一個狀態(tài)管理庫,它可以幫助你管理應用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個應用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧
2023-12-12