1 组件和模块

1.1 模块

对外提供特定功能的js程序，一般就是一个js文件

• 为什么拆分模块呢？随着业务逻辑增加，代码越来越多，越来越复杂。
• 作用：复用js，简化js，提高js运行效率

1.2 模块化

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

模块化的演变：参考JS模块化

1.3 组件

• 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/images等等)
• 作用：复用编码，简化项目编码，提高运行效率

1.4 组件化

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

组件化的发展：

• Redux 演变过程01：组件化过程
• 前端构建演进

2 开发者工具

chrome浏览器插件React Developer Tools，通过Chrome应用商店或者下载离线插件安装，图标如下所示：

3 React组件

3.1 函数式组件

定义一个简单的函数式组件，代码如下：

在浏览器中通过开发者工具查看，如下图3.1-1所示：

把Demo函数复制到babel.cn在线工具，编译后代码3.2-1-2所示：

"use strict";function MyComponent() {// 此处this undefined babel编译之后开启严格模式console.log(this);return /*#__PURE__*/React.createElement("h2", null, "\u51FD\u6570\u5B9A\u4E49\u7684\u7EC4\u4EF6(\u9002\u7528\u4E8E\u7B80\u5355\u7EC4\u4EF6\u7684\u5B9A\u4E49)");
}

• 开启严格模式后，this不在指向windows
• jsx语法最终被编译为js

3.2 类式组件

定义组件代码如下：

控制台输出：

• React三大属性
  • state
  • props
  • refs

后记

❓QQ:806797785

⭐️源代码仓库地址：https://gitee.com/gaogzhen/react-study

参考：

[1]尚硅谷React教程（2022加更，B站超火react教程）[CP/OL].2020-12-15.p7-p11.