1、模块

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

2、组件

• 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等
• 为什么要用组件： 一个界面的功能更复杂
  3 作用：复用编码, 简化项目编码, 提高运行效率

3、模块化

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

4、组件化

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

5、组件的创建方式

  5-1、方法1、函数式组件

  注意：

• 组件名字首字母必须大写（函数名即组件名）
• 函数必须有返回值
• 必须用组件标签，不能直接写组件名字
• 又名无状态组件，没有state

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果：

  5-2、方式2：类式组件

  注意：

• 必须继承React.Component这个类
• 类中必须要有render这个方法
• render必须有返回值

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

运行结果：