虚拟DOM + 组件 + 模块化

虚拟DOM

1. 语法: ReactDOM.render(virtualDOM,containerDOM)
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明

• 1) 参数一: 纯js或jsx创建的虚拟dom对象
  
• 2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

模块

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

组件

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

模块化

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

组件化

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

组件的类型与定义

• 函数组件
• 类组件

搞懂组件的定义与使用后，更重要的是要学会根据需求组合或拆分更大或更细的组件

函数组件（无状态组件、UI组件）

是一个纯函数，只用于组件展示，组件只负责根据外部传入的props来展示，书写更简洁，执行效率更高（推荐）

// 定义
function MyComponent(){
    return <h1>函数组件</h1>
}
// 使用
<MyComponent/>
<MyComponent></MyComponent>

类组件（状态组件、容器组件）

类组件有更丰富的特性，如：state状态、生命周期、this等

// 定义
class About extends React.Component{
    render(){
        return <div className="box">类组件</div>
    }
}
// 使用
<About/>