分享
是一种美德

学习笔记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、插入到指定的页面元素内部

欢迎大家关注公众号:

赞(2)
转载请注明来源地址:MN乐享 » 学习笔记3-React技术全家桶-组件

评论 抢沙发

评论前必须登录!