这是我参与8月更文挑战的第12天，活动详情查看:8月更文挑战

1. 模块

向外提供特定功能的 js 程序，一般就是一个 js 文件。
为什么要拆成模块：随着业务逻辑增加，代码越来越复杂。
作用：复用 js ，简化 js 的编写，提高 js 的运行效率。

模块全称：js模块，只是拆分 js

2. 组件

在这里插入图片描述

理解：所有实现头部功能的 html css js font img video等文件。为什么：因为一个页面的功能很复杂。作用：复用编码，简化项目编码，提高运行效率。

3. 模块化

当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用。

4. 组件化

当应用是以多组件的方式实现，这个应用就是一个组件话的应用。

5. 函数式组件

我们就先写个函数然后将它渲染到界面

// 1.创建函数式组件
function demo(){
    return <h2>我是函数式组件，适用于简单的定义</h2>
}
// 渲染组件到界面
ReactDOM.render(demo, document.getElementById('root'))

在这里插入图片描述界面是空白页，并且它报错说不是标签，那么我们给它改成组件标签。

// 渲染组件到界面
ReactDOM.render(<demo/>, document.getElementById('root'))

依旧报错，那么错在哪里呢？我们上个文章说到了，组件的标签首字母要大写。在这里插入图片描述将首字母改为大写

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 1.创建函数式组件
function Demo(){
    return <h2>我是函数式组件，适用于简单的定义</h2>
}
ReactDOM.render(<Demo/>, document.getElementById('root'))

我们可以看出效果出来了。在这里插入图片描述思考一下，这是个函数吗？答案肯定是。那是谁调用的呢？我们自己调用了吗？没有。是 React 帮我们调用的。

我们关注一下此时组件的 this 指向问题：我们打印一下此时的 this

function Demo(){
    console.log(this)
    return <h2>我是函数式组件，适用于简单的定义</h2>
}

此时的 this 是 undefined 在这里插入图片描述那么为什么呢？因为我们整个函数经过了 babel 的转换处理。并且这个过程是严格模式，在严格模式中，禁止自定义函数中的 this 指向window。因此变成了undefined。

我们去babel官网验证一下在这里插入图片描述可以看到，确实经历了严格模式。还有我们的中文变成乱码了？其实不是乱码，只是换了一种编码格式。

这个过程经历了什么？

首先，React解析组件标签，找到Demo组件。
发现组件是使用函数定义的，随后调用该函数，讲返回的虚拟DOM转为真实DOM，随后呈现在页面上。

6. react dev tools

这是React浏览器扩展工具。首先，需要翻墙工具。大家可以去下载一下这里在这里插入图片描述

在这里插入图片描述有了这个工具之后，就可以看到组件的结构了

React--3: 组件和模块及函数式组件