[A] 模块与组件，模块化与组件化的理解
模块
1. 向外提供特定功能的js程序，一般就是一个js文件，其本质是一系列的js语句集合
2. 为什么要拆分模块，随着业务逻辑的增加，代码量会越来越大且更复杂
3. 作用：复用js，简化js的编写，提高计算的执行效率
模块化：
当应用的js由若干得到模块拆分组合而成。则该项目为模块化的
组件：
1. 用来实现局部功能效果的代码和资源的集合(html，js，image...等)，其本质是一系列资源的集合
2. 之所以需要拆分组件，是因为一个页面的功能会很复杂，拆分组件会逻辑清晰
3. 作用：实现代码复用，简化项目编码，提高运行效率
[B] react中的组件
函数式组件：
即组件被定义为一个函数，该函数的返回值为一个html标签，通过组件引用的方式调用这个函数
示例：
function Demo() {
return <div>hello, woshi Carrey</div>
}
const dom = document.getElementById('box')
ReactDOM.render(<Demo/>, dom)
注：
函数名必须首字母大写
类组件： 即组件被定义为一个拓展类，拓展React.Component 示例：
class MyComponent extends React.Component {
render() {
return <div>我是类组件</div>
}
}
const dom = document.getElementById('box')
ReactDOM.render(<MyComponent/>, dom)
注：
1. 函数名必须首字母大写
2. 拓展类里面，必须有一个render方法，用于返回当前类所定义的组件内容
3. render中的this指的就是当前拓展类的实例化的对象
4. ReactDOM.render(<MyComponent/>, dom)做了什么
(1) React解析组件，找到了MyComponent组件
(2) 发现该组件是通过类定义的，随后通过new方法实例化该类的实例，并通过调用实例调用到原型上的render方法
(3) 将render返回的虚拟DOM转为真实的DOM，随后呈现在页面上
[C] js中class类的知识点复习 1. 基础语法
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
speak() {
console.log(`我是${this.name}, 今年${this.age}岁了`)
}
}
2. 类中的方法是挂载在类的原型对象上的，供类的实例化对象使用
3. 类中的方法(如speak)内部是默认采用严格模式书写的, 因此若单独提取出类中的方法(如 var a = p.show; a())，其内部的this指向undefined
标签：render,dom,模块化,age,js,002,开发,组件
From： https://www.cnblogs.com/carreyBlog/p/16776264.html