react学习之组件与生命周期函数

                                                                              react学习之组件与生命周期函数

1.组件

   组件就像是js中的函数一样，它接收任意的输入，并且返回一个react元素，这些元素被返回在我们的屏幕上给展示出来。

2.组件的分类

   组件分为无状态组件（函数组件）和有状态组件（类组件），他们两者的区别是显然的那就是有无状态

3.无状态组件

  其语法就和函数的书写方式类似，因此在这里我将其称为函数组件。

上面就是一个函数组件的表达形式，很显然的就可以看出，在这个函数组件中我们传递了一个参数props，如果我们要去调用这个组件就可以通过这个参数去调用

4.有状态组件

其书写方式与类的书写方式类似，因此在这里我将其称为类组件

上面的类组件，你可以看出其采用了书写类的方式去进行描述，这种语法表示是es6中的表达方式。在学过面向对象变成的语言时，这种以类的形式书写的语法随处可见。其与函数组件不同的是，你需要将你想要展示的内容放在render方法之中。

那么为什么要这样去将组件分为有状态组件与无状态组件呢？下面的这个例子就很自然而然的表达出原因

在上面的这个例子中，我们可以看出我们的目的是将时间实时的展示在页面上，也可以很自然而然的知道，这种方式是在实时的更新整个组件，这样做的话就大大的降低了性能，降低了运行速度，这种方式显然是不可取的。那么就有了接下来的这种形式

在这个例子中，涉及到了很多新的知识点，接下来我会去进行讲解，在这里你需要明白一点的是。在上面的这个例子中，我们并不是实时的去更新整个组件，而只是去实时的去更新里面的时间，然后将其返回给组件，最后再呈现到页面上，这样做的好处就是相比与函数组件所采用的形式，我们大大的提高了其性能。

那么在上面的这个例子中，我们又产生了两个问题，第一个就是生命周期函数，另外一个就是constructor函数与state.

constructor方法与state

constructor是写在类组件中的一个方法，在这里你只需要明白其中的state。state的中文意思就是state，这也是我们为什么叫其为有状态组件的原因。state可以理解为用于存放组件中所有需要我们去改变的变量。它存放的便是你要去改变的变量的初始值，state里面存放的数据为一个对象，所以你里面书写你得变量时，要采用对象的形式去赋值。还要明白的一点它只能是只读的状态你不能去改变它。那么有一个问题就会随之产生了，我们将怎样去改变state呢，因此这里我们就要说setState

setState

从其名字就可以很清楚明白的看出，其的作用就是用来更改state值，在这里需要明白的就是这点即可。接下来我们就来说说什么是生命周期函数

生命周期函数

从其名字就可以看出，生命周期函数其存在肯定是存在在某个状态的，那么在这里我们就可以给出其定义，在某个特定的时间执行的函数。

对于生命周期的分类又分为几种，那么在这里我们我们明白里面的componentDidMount与componentWillUnMount，它们两个的执行时间即可。componentDidMount的执行时间是在JSX渲染之前，componentWillUnMount是在JSX执行完整个过程的最后一刻执行。明白这个，上面的例子就可以很清楚了，首先我们将获取到的时间的在JSX渲染之前执行，然后就将其里面改变state的值，之后在整个渲染执行完之后就去关闭这个计时器。

只读的state

在这我们可以看到，在官方的文档中写道，this.state唯一存在的地方就constructor当中，如果想去改变state的值，就得去采用上面的第二形式。

以上便是对于整个组件与声明周期函数的定义与其部分函数的内容