脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React state理解

浅析React 对state的理解

 更新时间：2021年09月08日 17:24:21   作者：项哈哈想做前端  
state状态是组件实例对象身上的状态，不是组件类本身身上的，是由这个类缔造的实例身上的。这篇文章主要介绍了React 对state的理解,需要的朋友可以参考下

如何定义复杂组件（类组件）与简单组件（函数组件）？

  • 是否具有状态（state）

引出问题，什么是状态？

举个例子，今天考试，考砸了，因为我状态不好，是状态影响了我的行为。
组件中的状态，驱动了页面更新，换句话说，组件状态中存着数据，数据的改变，驱动页面的更新。

在这里插入图片描述

这里要了解，state状态是谁身上的状态？state状态是组件实例对象身上的状态，不是组件类本身身上的，是由这个类缔造的实例身上的。

（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.创建组件
      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.创建组件
      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>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h1>;
        }
      }
      //  2.渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

在这里插入图片描述

接下来写点击事件，注意，先做一个错误示范

 <script type="text/babel">
      // 1.创建组件
      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()}
在控制台会发现，函数被立即执行了

在这里插入图片描述

react在new Weather时，通过实例调用了render方法，想拿到return的值，就要执行<h1 onClick={demo()}>今天天气很{this.state.isHot ? “炎热” : “凉爽”}</h1>，执行到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.创建组件
      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);
      }

在这里插入图片描述

来看一下代码结构和注释

在这里插入图片描述

在这里插入图片描述

通过打印发现，将自定义函数放到类的外边，数据虽然能够正确显示，但并不能拿到/修改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理解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在 React Native 中给第三方库打补丁的过程解析

    在 React Native 中给第三方库打补丁的过程解析

    这篇文章主要介绍了在 React Native 中给第三方库打补丁的过程解析,有时使用了某个React Native 第三方库，可是它有些问题，我们不得不修改它的源码，本文介绍如何修改源码又不会意外丢失修改结果的方法，需要的朋友可以参考下
    2022-08-08
  • 详解React 服务端渲染方案完美的解决方案

    详解React 服务端渲染方案完美的解决方案

    这篇文章主要介绍了详解React 服务端渲染方案完美的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Zustand介绍与使用 React状态管理工具的解决方案

    Zustand介绍与使用 React状态管理工具的解决方案

    本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能
    2024-10-10
  • React Fiber结构的创建步骤

    React Fiber结构的创建步骤

    这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • react-native android状态栏的实现

    react-native android状态栏的实现

    这篇文章主要介绍了react-native android状态栏的实现，使状态栏颜色与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中label标签for报错问题

    解决react中label标签for报错问题

    这篇文章主要介绍了react中label标签for报错问题，解决办法就是react中label标签没有for属性，用htmlFor代替for属性,感兴趣的朋友跟随小编一起看看吧
    2022-02-02
  • 使用react实现手机号的数据同步显示功能的示例代码

    使用react实现手机号的数据同步显示功能的示例代码

    本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Navigation 路由传参的操作代码

    React Navigation 路由传参的操作代码

    这篇文章主要介绍了React Navigation 路由传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论