学习笔记3-React技术全家桶-组件

## 模块与组件、模块化与组件化的理解

### 模块：

​   理解：向外提供特定功能的js程序（一个js文件就是一个模块）

​   为什么要拆成模块：业务量增加的话，代码会越来越多，并且变得更加复杂，维护成本会提高

​   作用：将js变更为可复用的文件，简化js的编写及提高js的运行效率

### 组件

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

​   为什么要用组件：一个页面的功能更加复杂

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

### 模块化

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

### 组件化

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

## React 面向组件编程

### 组件的定义方式：

    1、函数式组件

        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后，发生了什么：

                1、React解析组件标签，找到了<MyComponent/>组件

                2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，之后呈现在页面中。

    2、类式组件

        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后，发生了什么：

                1、React解析组件标签，找到了<MyComponent/>组件

                2、发现组件是使用类定义的，随后new 出该类的实例，并通过该实例调用到原型上的render方法。

                3将render返回的虚拟DOM转为真实DOM，之后呈现在页面中。

        类的基本知识复习：

             总结：

             1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写

             2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的

             3、类中所定义的方法，都是放在类的原型对象上，供实例去使用

### 注意

    1、组件名必须首字母大写

    2、虚拟DOM元素只能有一个根元素

    3、虚拟DOM元素必须有结束标签

### 渲染类组件标签的基本流程：

    1、React内部会创建组件实例对象

    2、调用render()得到的虚拟DOM，并解析为真实DOM

    3、插入到指定的页面元素内部