002 模块化开发

[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