模块化与组件化

此处内容与Vue2 组件化编程大同小异，仅作 React 学习记录用

模块

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

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

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

组件

用来实现局部功能效果的代码和资源的集合(html/css/js/image 等)

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

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

模块化

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

组件化

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

功能界面的组件化编码流程（通用）

1. 拆分组件：拆分界面、抽取组件
2. 实现静态组件：使用组件实现静态页面效果
3. 实现动态组件：动态显示初始化数据
   1. 数据类型
   2. 数据名称
   3. 保存在哪个组件
4. 交互（绑定事件监听开始）

组件书写规范

1. 组件名必须首字母大写
2. 虚拟 DOM 元素只能有一个根元素
3. 虚拟 DOM 元素必须有结束标签

渲染类组件标签基本流程

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

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

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

执行了 ReactDOM.render 之后发生了什么：

React 解析组件标签，找到 Component 组件

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

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