欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析React 對state的理解

 更新時間：2021年09月08日 17:24:21   作者：項哈哈想做前端  
state狀態(tài)是組件實例對象身上的狀態(tài)，不是組件類本身身上的，是由這個類締造的實例身上的。這篇文章主要介紹了React 對state的理解,需要的朋友可以參考下

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

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

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

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

在這里插入圖片描述

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

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

顯示內容

在這里插入圖片描述

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

在這里插入圖片描述
在這里插入圖片描述

<!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 {
        /**
         * 構造器中能收到什么數據，取決于new的時候，傳的是什么數據
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網寫
          // 類本身語法
          super(props);
          // 構造函數中this指向構造函數實例對象
          // 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>

在這里插入圖片描述

初始化數據

<!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 {
        /**
         * 構造器中能收到什么數據，取決于new的時候，傳的是什么數據
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網寫，不然無法執(zhí)行下去
          // 類本身語法
          super(props);
          // 構造函數中this指向構造函數實例對象
          // 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 {
        /**
         * 構造器中能收到什么數據，取決于new的時候，傳的是什么數據
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網寫
          // 類本身語法
          super(props);
          // 構造函數中this指向構造函數實例對象
          // 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ā)現，函數被立即執(zhí)行了

在這里插入圖片描述

react在new Weather時，通過實例調用了render方法，想拿到return的值，就要執(zhí)行<h1 onClick={demo()}>今天天氣很{this.state.isHot ? “炎熱” : “涼爽”}</h1>，執(zhí)行到onClick賦值語句時，就要將demo()函數調用的返回值交給onClick作為回調，demo()的返回值是undifend,也就是把undifend交給onClick作為回調，**這是錯誤的做法，是因為在demo后加()，導致函數調用。**等到點擊時，就調用了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 {
        /**
         * 構造器中能收到什么數據，取決于new的時候，傳的是什么數據
         * new Weather并不是我們操作的，而是react操作的
         */
        constructor(props) {
          // 還沒學到props，但得用著，模仿官網寫
          // 類本身語法
          super(props);
          // 構造函數中this指向構造函數實例對象
          // 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>

在這里插入圖片描述

修改

上文已經將數據渲染到頁面中，現在想要修改頁面的數據。想要修改數據，首先要拿到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ā)現，將自定義函數放到類的外邊，數據雖然能夠正確顯示，但并不能拿到/修改state中的數據。

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

注意，類不是函數體，不需要寫function

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

相關文章

  • 在?React?Native?中給第三方庫打補丁的過程解析

    在?React?Native?中給第三方庫打補丁的過程解析

    這篇文章主要介紹了在?React?Native?中給第三方庫打補丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結果的方法，需要的朋友可以參考下
    2022-08-08
  • 詳解React 服務端渲染方案完美的解決方案

    詳解React 服務端渲染方案完美的解決方案

    這篇文章主要介紹了詳解React 服務端渲染方案完美的解決方案，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Zustand介紹與使用 React狀態(tài)管理工具的解決方案

    Zustand介紹與使用 React狀態(tài)管理工具的解決方案

    本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能
    2024-10-10
  • React Fiber結構的創(chuàng)建步驟

    React Fiber結構的創(chuàng)建步驟

    這篇文章主要介紹了React Fiber結構的創(chuàng)建步驟，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下
    2021-04-04
  • react-native android狀態(tài)欄的實現

    react-native android狀態(tài)欄的實現

    這篇文章主要介紹了react-native android狀態(tài)欄的實現，使狀態(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • 詳解react-native-fs插件的使用以及遇到的坑

    詳解react-native-fs插件的使用以及遇到的坑

    本篇文章主要介紹了react-native-fs插件的使用以及遇到的坑，詳細的介紹了react-native-fs安裝使用，具有一定的參考價值，有興趣的可以了解一下
    2017-09-09
  • 關于react-router的幾種配置方式詳解

    關于react-router的幾種配置方式詳解

    本篇文章主要介紹了關于react-router的幾種配置方式詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 解決react中l(wèi)abel標簽for報錯問題

    解決react中l(wèi)abel標簽for報錯問題

    這篇文章主要介紹了react中l(wèi)abel標簽for報錯問題，解決辦法就是react中l(wèi)abel標簽沒有for屬性，用htmlFor代替for屬性,感興趣的朋友跟隨小編一起看看吧
    2022-02-02
  • 使用react實現手機號的數據同步顯示功能的示例代碼

    使用react實現手機號的數據同步顯示功能的示例代碼

    本篇文章主要介紹了使用react實現手機號的數據同步顯示功能的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React Navigation 路由傳參的操作代碼

    React Navigation 路由傳參的操作代碼

    這篇文章主要介紹了React Navigation 路由傳參,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08

最新評論