React如何定义类组件与函数组件

这篇文章主要讲解了"React如何定义类组件与函数组件"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"React如何定义类组件与函数组件"吧！

引出问题，什么是状态？

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

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

（class)组件实例上三大属性之一：state

显示内容

实现一个需求，通过点击页面，炎热/凉爽切换

初始化数据

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

我在调用点击事件时，写的是 onClick={demo()}
在控制台会发现，函数被立即执行了

react在new Weather时，通过实例调用了render方法，想拿到return的值，就要执行

今天天气很{this.state.isHot ? "炎热" : "凉爽"}

常见错误写法

  render() {          console.log("this:", this);          return (            
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
          );        }

 render() {          console.log("this:", this);          return (            
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
          );        }

正确写法

修改

上文已经将数据渲染到页面中，现在想要修改页面的数据。想要修改数据，首先要拿到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 (            
              今天天气很{this.state.isHot ? "炎热" : "凉爽"}            
          );        }      }

注意，类不是函数体，不需要写function

感谢各位的阅读，以上就是"React如何定义类组件与函数组件"的内容了，经过本文的学习后，相信大家对React如何定义类组件与函数组件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！