前面的课程中我们已经学习了react的函数式组件和类式组件，对组件算是有了一个大致的了解。接下来我们将进入我们之前所提到的react组件的三大属性的学习之中，react组件的三大属性可以说是一个非常重要的重难点部分了。

回顾

既然是重难点，那么我们肯定还是会很认真详细地去开展下去的。但是想要学习更难的东西，根基也是必须要扎实的，所以我们对前面组件的知识做一个简单的回顾：

  • 模块是向外提供特定功能的js程序

  • 组件是用来实现局部功能效果的代码和资源的集合(包括HTML,CSS,js等等)

  • 使用模块或者组件来编写项目程序就是模块化或者组件化编程

  • 使用模块化或组件化编程来提高复用率和运行效率

  • 组件分为两种

    • 函数式组件
    • 类式组件

  • 函数式组件的本质就是一个函数

    • 创建函数式组件就要定义一个函数
    • 该函数必须要有返回值
    • 函数名就是组件名
    • 函数名首字母必须大写
    • 渲染函数式组件的话一定要把函数式组件写成标签形式，且一定要是闭合标签
    • 渲染函数式组件
      1. react解析组件标签
      2. 发现组件是函数定义的，则调用该函数并将函数返回的虚拟DOM渲染到页面

  • 类式组件的本质就是一个类

    • 创建一个类式组件就要定义一个类
    • 类的构造器方法并不是必须要写的东西
    • 当我们要对某个类的实例进行一系列的初始化操作时才许写构造器方法
    • 创建类式组件时定义的类必须继承自React.Component类
    • 当A类继承了B类之后，如果A类中需要写构造器方法，那么在A类的构造器方法第一步就要调用super方法
    • 类中除了构造器方法以外的方法基本都是一般方法
    • 类中的一般方法存放在类的原型对象上来供实例对象使用
    • 当通过类的实例对象来调用某方法时，会优先从该类的原型对象上查找该方法，如果没有找到，则通过原型链去父类的原型对象上去查找
    • 创建类组件所定义的类并不必须写构造器方法
    • 创建类组件所定义的类必须要有render方法
    • render方法必须要有返回值
    • 渲染类式组件
      1. react解析组件标签
      2. 发现组件是类定义的，实例化该类，并通过实例化的对象调用原型对象上的render方法
      3. 将render方法返回的虚拟DOM渲染到页面

以上便是我们前面课程中所学到的react组件的相关知识。

state是什么

之前的课程中我们提到过react组件有三大属性，但是并没有展开说这三大属性都是什么。今天呢，我们先笼统地先告诉大家三大属性指的就是state,props,refs但是这三大属性具体都是什么呢？我们接下来会慢慢地去深入探讨，今天先学习其中的一个：state

简单组件和复杂组件

在说state之前我们先来聊一聊什么是简单组件，什么又是复杂组件。

这两个词我们在之前的课程没有提到过。通常来说我们用函数式组件都是用来定义简单组件的，而类组件大多都是用来定义复杂组件。

但是这两种组件的区别是什么呢？

我们先给复杂组件下一个定义：什么是复杂组件呢？如果一个组件是有状态的，那么这个组件就是复杂组件，而状态所对应的英文单词就是我们今天要说的state

相对的，如果一个组件没有状态，那么这个组件就是简单组件

什么是状态

既然我们刚刚明白了什么是复杂组件，什么是简单组件。知道了他们的区别就是一个有状态，一个没有状态。那么新的问题又随之诞生了。状态又是什么呢？

我们举个例子：

比如说我们人就拥有状态。

比如说我们最熟悉的场景吧。我们还在学生时代的时候，我们考试突然有一次考得很差。父母和老师都在责备我们，怎么这次这么简单都没考好啊？我们可能会说，我这次状态不好。

所以我们是不是发现了人的状态会影响人的行为。

同样的呢，组件也有状态和人类的状态会影响行为一样，组件的状态会驱动页面。但是这句话是什么意思呢？

我们来回想一下最初我们所说到的。我们在学习react之后，只要给了数据，react就会帮你渲染页面。但是这个数据并不是随便给的，这个数据要按照规矩给到指定的位置。但是这个位置应该在哪？其实就是state我们就是要把数据放到state中，然后react从state里面拿数据渲染到页面上。

所以说组件的状态里面存储着页面上需要的数据，数据的改变与更新就会驱动页面的展示

state在哪？

我们都知道了什么是状态了，但是这个状态在哪呢？

class Test extends React.Component {
    render() {
        console.log(this);
        return <h2>Hello world</h2>
    }
};
ReactDOM.render(<Test/>, document.getElementById("test"));

我们知道当我们渲染页面的时候，react会自动实例化我们的组件类，并且通过实例对象来调用这个类原型对象上的render方法，那么我们在render方法打印一下this看一看：

image-20211214111424961

我们可以看到这个实例对象中包含了我们所说的组件的三大属性，这三大属性也是组件的三大核心属性。而且通过途中我们也可以看出，这三大属性是位于这个组件的实例对象上的。

所以我们可以得出一个结论就是我们所说的组件的三大核心属性其实就是组件实例对象的三大核心属性。因为这三大属性并不是类上的，而是组件类实例化的对象上面的。

而组件有两种，一个是函数式组件，另一个是类式组件。这两种只有类式组件才能生成实例。所以我们所谓的组件三大核心属性的前提是类式组件才拥有这三大核心属性。

总结

  • 组件有简单组件和复杂组件之分
  • 简单组件没有状态
  • 复杂组件有状态
  • 状态里面存储页面所需要的数据，数据更新则驱动页面展示
  • 状态在类组件实例对象上
  • 我们所说的组件的三大属性，实际上是组件实例的三大属性

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/state_introduce/