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

这是我参与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浏览器扩展工具。首先，需要翻墙工具。 大家可以去下载一下 这里

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

有了这个工具之后，就可以看到组件的结构了

在这里插入图片描述