React学习笔记三-模块与组件的理解

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第三篇，主要介绍react中的模块与组件。

目录

1.模块与组件

1.1模块

1.2组件

1.3模块化

1.4组件化

2.React面向组件编程

2.1函数式组件

 2.2类组件

2.2.1类知识的复习

2.2.2类式组件的学习

---

1.模块与组件

1.1模块

理解：向外提供特定功能的js程序，一般就是一个js文件。

为什么要拆成模块：随着业务逻辑的增加，代码越多越复杂。

作用：复用js，简化js的编写，提高js的运行效率。

1.2组件

理解：用来实现局部功能效果的代码和资源的集合（html，css，image等等）

为什么使用组件：一个界面的功能很复杂，将一群复杂的功能拆分为一个个组件，再使用组件可以组成这个复杂的功能界面。

作用：复用编码，简化项目编码，提高运行效率。

1.3模块化

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

1.4组件化

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

2.React面向组件编程

2.1函数式组件

1.在ReactDOM.render生成虚拟dom的时候，因为jsx语言会把小写字母开头的dom名字当作html标签，大写字母开头的dom名字当作组件。所以我们必须将函数式组件的名字首字母大写。

2. ReactDOM.render(<MyComponent/>, 参数2)，在使用ReactDOM.render生成虚拟dom的时候，我们函数式组件的名字要用<>包起来，而且必须是闭合的标签。

3.执行ReactDOM.render后，React会解析组件标签，找到MyComponent这个组件，然后发现此组件是被函数定义的，然后调用该函数，将返回的虚拟dom转换为真实dom展示在页面上。

4.babel在编译后开启严格模式，所以原本指向window的this，指向了undefined。

代码如下：

<div id="test"></div>

<script src="https://cdn.staticfile.o