此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享。此为第三篇,主要介绍react中的模块与组件。
目录
1.模块与组件
1.1模块
理解:向外提供特定功能的js程序,一般就是一个js文件。
为什么要拆成模块:随着业务逻辑的增加,代码越多越复杂。
作用:复用js,简化js的编写,提高js的运行效率。
1.2组件
理解:用来实现局部功能效果的代码和资源的集合(html,css,image等等)
为什么使用组件:一个界面的功能很复杂,将一群复杂的功能拆分为一个个组件,再使用组件可以组成这个复杂的功能界面。
作用:复用编码,简化项目编码,提高运行效率。
1.3模块化
当应用的js都以模块来编写的,那这个应用就是一个模块化的应用。
1.4组件化
当应用是以多组件的方式实现,那么这个应用就是一个组件化的应用。
2.React面向组件编程
2.1函数式组件
1.在ReactDOM.render生成虚拟dom的时候,因为jsx语言会把小写字母开头的dom名字当作html标签,大写字母开头的dom名字当作组件。所以我们必须将函数式组件的名字首字母大写。
2. ReactDOM.render(<MyComponent/>, 参数2),在使用ReactDOM.render生成虚拟dom的时候,我们函数式组件的名字要用<>包起来,而且必须是闭合的标签。
3.执行ReactDOM.render后,React会解析组件标签,找到MyComponent这个组件,然后发现此组件是被函数定义的,然后调用该函数,将返回的虚拟dom转换为真实dom展示在页面上。
4.babel在编译后开启严格模式,所以原本指向window的this,指向了undefined。
代码如下:
<div id="test"></div>
<script src="https://cdn.staticfile.o