组件与模块_React

前面几节课时学习了react的使用以及jsx的规则，并且做了一个小的练习Demo，为了更好应对未来的复杂度较高的开发，接下来我们来学习组件与模块

基本概念

模块

向外提供特定功能的js程序，一般就是一个js文件
随着业务逻辑的增加，代码越来越多通过模块来复用js简化编写并提高运行效率

组件

用来实现局部功能效果的代码和资源集合(HTML,CSS,JS,img,font,viedo等等)
通过组件来复用编码，简化整个项目的编码

模块化与组件化

当应用的js都是用模块来编写的，那么这个应用就是一个模块化应用
当应用都是用组件编写的，那么这个应用就是一个组件化应用

`React`面向组件编程

在上文我们介绍了react组件化和模块化的基本概念，接下来我们就要开始学习react面向组件编程，或许前面的一些概念大家还不怎么理解。但是我不爱解释这些枯燥的概念知识。我们在接下来的学习中来慢慢理解和消化这些概念。

但是在学习面向组件编程之前，接我们来看一下，用组件化开发的准备工作。

安装React Developer Tool

创建组件(定义组件)

react官方提供了两种形式的组件：

函数式组件
类式组件

顾名思义，利用函数定义出来的组件就是函数式组件，用类定义出来的组件就是类式组件。

我们这节课先来学习函数式组件

我们还是依然回到我们之前的那种代码形式，先引入react,react-dom,react得在react-dom之前引入，还要引入babel，然后创建一个<script type="text/babel">标签在标签里写代码。

但是，我们来回忆一下，以往我们写代码都是怎么写？分两个步骤对吧？

创建虚拟DOM
渲染虚拟DOM到页面

但是现在我们要用组件了，就不能再像之前那么写了，当然也还是两步。

创建函数式组件
渲染组件到页面

那么什么是函数式组件？函数定义的组件，那本质上就是一个函数啊，也就是说我们第一步先定义一个函数出来。

function demo(){}

像这样，我来先做一个空demo。但是这样写很明显不合理。为什么呢？组件的定义是什么？组件是用来实现局部功能效果的代码和资源集合。也就意味着一个组件中或许会包含着HTML、CSS、js等等内容。但是我们现在这个空的demo里面什么都没有，那这个组件没有意义啊。

我们最终是要把组件来转换成页面的，那么这个组件最低的要求是不是得有HTML啊，不然页面上展示什么呢？所以说最基本的，这个demo要有一个返回值。

function demo() {
    return <h2>函数式组件</h2>
}

再看一下，这样编写，使得组件有了最起码的HTML结构，这样就比刚才的样子要合理多了。但是这样写依然还是不对。

当然我们直接这么说不对，也无凭无据的，怎么就知道不对呢？那我们现在就当不知道这么写对不对，我们就当这么写是对的，然后尝试一下来渲染这个组件。

// 1.创建函数式组件
function demo(){
    return <h2>函数式组件</h2>;
}
// 2. 渲染组件到页面
ReactDOM.render(demo, document.getElementById("test"));

当我们打卡浏览器之后发现，页面上啥都没有，而且控制台里面还报错了。

报错信息告诉我们函数是不可以作为react的节点的，也就是说react不支持渲染函数，然后后面的信息也告诉我们，你可能是返回了一个组件，如果想要渲染组件的话，得写成标签形式。也就是说我这边应该来渲染demo标签

// 1.创建函数式组件
function demo(){
    return <h2>函数式组件</h2>;
}
// 2. 渲染组件到页面
ReactDOM.render(<demo/>, document.getElementById("test"));

那可能有人要问了，这下我们也按照官方的要求写成标签来渲染了，这次就对了吧？那咱们先来看看渲染出来的效果再说。我们也不知道这样行不行。那就先试一下。

还是报错了？这个错误是不是很眼熟啊？咱们在jsx规则那一节是不是就说过？首字母小写的标签react会认为是HTML标签，只有首字母大写的标签react才会认为那是组件。

那这下大家知道该怎么办了吧？既然我们要用组件，那就把首字母大写呗：

// 1.创建函数式组件
function Demo(){
    return <h2>函数式组件</h2>;
}
// 2. 渲染组件到页面
ReactDOM.render(<Demo/>, document.getElementById("test"));

现在我们再来看一下这一次对不对

这一次就没有问题了，而且控制台也没有报错，那么这便是一个规范的函数式组件的定义。

现在我们回头看一下这个代码。这是函数式组件，定义函数时函数名首字母得大写，渲染时要把函数写成标签形式，而且要闭合标签。

但是我们从始至终有调用过这个函数吗？我们并没有去手动调用，但是在渲染组件的话react会自动调用这个函数。

另外还有一个问题，这个函数里的this指向的是什么？那我们在控制台打印一下看看：

显示为undefined这是为什么呢？我们的这些代码是不是都要由babel来转化啊，当babel将jsx语法全部转化成js语法自后，会自动开启严格模式。严格模式的一个特点就是禁止自定义的函数中的this指向window所以说，这里的this指向的就是undefined。

但是可能大家还是会好奇，我们渲染组件到底是怎么工作的？

实际上呢，执行了ReactDOM.render(<Demo/>,...)之后：

react解析了组件标签，找到了Demo组件。
发现组件是函数式组件，随后调用该函数，将返回的虚拟DOM映射成真实DOM并渲染到页面

以上便是创建函数式组件的方法。

总结

向外提供特定功能的js程序，一般就是一个js文件叫做模块
用来实现局部功能效果的代码和资源集合(HTML,CSS,JS等等)叫做组件
当应用使用组件和模块进行编程，就叫组件化和模块化
组件分为函数式组件和类式组件
函数式组件的本质就是一个函数
类式组件本质就是一个类
定义组件首字母必须大写
定义函数式组件必须有返回值
渲染组件必须写成标签形式

以上便是本节课的主要内容。

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/component/

组件与模块

基本概念

模块

组件

模块化与组件化

React面向组件编程

创建组件(定义组件)

总结

`React`面向组件编程