一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
前言
今天我们来继续学习React,这篇文章讲的是react的两种定义方式，以及面向组件编程的知识点。其实大家学习过其他框架的小伙伴可能会觉得react也不难，但是有的小伙伴却会觉得难度有的高，其实大家不要担心，它真的不难。只要大家用心，努力的学，都可以学会的，要是同样在学习react的小伙伴一起来看看吧。
两种组件定义区别、组件与模块理解
Ⅰ-react中定义组件
①函数式声明组件
执行了ReactDOM.render(.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
②类式组件(下面的实例都是指类组件)
执行了ReactDOM.render(.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
组件中的render是放在哪里的？
MyComponent的原型对象上，供实例使用。
组件中的render中的this是谁？
MyComponent的实例对象 <=> MyComponent组件实例对象。
Ⅱ-模块与模块化
① 模块
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
- 作用:复用js,简化js的编写,提高js运行效率
② 模块化
当应用的js都以模块来编写,这个应用就是一个模块化的应用
Ⅲ-组件与组件化
① 组件
- 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
- 为什么要用组件:一个界面的功能复杂
- 作用:复用编码,简化项目编码,提高运行效率
② 组件化
当应用是以多组件的方式实现,这个应用就是组件化的应用
React面向组件编程
- 使用React开发者工具调试
React Developer Tools
- 注意
a) 组件名必须是首字母大写
b) 虚拟DOM元素只能有一个根元素
c) 虚拟DOM元素必须有结束标签 < />
- 渲染类组件标签的基本流程
a) React内部会创建组件实例对象
b) 调用render()得到虚拟DOM,并解析为真实DOM
c) 插入到指定的页面元素内部
总结：来到面向对象了，大家现实中也有对象了吗？哈哈哈，开玩笑的。大家只要好好努力，什么都会有的。react难度也不高，大家不应该有心理负担，一步步来，加油！
