React模块与组件
文章目录
前言
加下来我们将进行react模块组件化学习。
提示:以下是本篇文章正文内容,下面案例可供参考
一、模块与组件、模块化与组件化的理解?
1.模块
1)定义:向外提供特定功能的js程序,一般就是一个js文件
2)为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
3)作用:复用js,简化js的编码,提高js运行效率
2.组件
1)定义:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2)为什么:一个界面的功能更复杂
3)作用:复用编码,简化项目编码,提高运行效率
3.模块化
当应用的js都以模块来编写的,这个应用就是一个模块化的应用(比如将index.js拆成a.js b.js等)
4.组件化
当应用是以多组件的方式实现,这个应用就是一个组件化应用
二、开发者工具的安装
1.导入
在这边导入react-dev的包
如果是react写的网站,那么打开会有亮
三、组件的定义
1.函数定义的组件(适用于【简单组件】的定义)
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React函数式组件</title>
</head>
<body>
<div id="test"></div>
<!--引入所依赖的库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
// 1、定义函数式组件
// 首字母要大写
//函数必须有返回值
function Demo() {
return <h1>我是函数式定义的组件(适用于【简单组件】的定义)</h1>
}
//渲染组件到真实DOM
ReactDOM.render(<Demo/>,document.getElementById('test'));
//注意这里的组件要写成标签的形式,而且要大写,要有闭口,因为jsx要求要有闭口
</script>
</body>
</html>
注意:
1)首字母要大写:如果是小写React会默认寻找html里面的标签,大写才会寻找组件
2)函数一定要有return
3)注意这里的组件要写成标签的形式,而且要大写,要有闭口,因为jsx要求要有闭口
执行过程:
1)1、react解析组件标签,找到了Demo组件
2)发现组件是用函数定义的,随后调用改函数,将返回的虚拟Dom转为真实DOM渲染到页面上
2.这里先复习类的相关知识,进入下面链接学习
https://blog.csdn.net/weixin_44003391/article/details/121771714
3.类式组件
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React函数式组件</title>
</head>
<body>
<div id="test"></div>
<!--引入所依赖的库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
// 1、定义类式组件
//1、必须继承React.Component
//组件要大写哦
class Mycomponent extends React.Component{
//2、必须重些render方法,render方法必须有return
//render是放在哪里的?—MyComponent的原型对象上,供实列使用
//render的this是谁?—MyComponent的实列对象
render(){
return <h1>我是类式定义的组件(适用于【复杂组件】的定义)</h1>
}
}
//渲染组件到真实DOM
ReactDOM.render(<Mycomponent/>,document.getElementById('test'));
/*
执行ReactDOM.render(<Mycomponent/>,document.getElementById('test'));之后发生了什么
1、React解析组件标签,找到了Mycomponent组件
2、发现组件是使用类定义的,随后new出来该类的实例,并通过实列调用到原型上的render方法
3、将render返回的虚拟DOM转为真实DOM,随后呈现在页面上
*/
</script>
</body>
</html>
执行ReactDOM.render(,document.getElementById(‘test’))之后发生了什么
1、React解析组件标签,找到了Mycomponent组件
2、发现组件是使用类定义的,随后new出来该类的实例,并通过实列调用到原型上的render方法
3、将render返回的虚拟DOM转为真实DOM,随后呈现在页面上
该处使用的url网络请求的数据。
下一篇我们将探讨类式组件的下面四个属性
总结
在本文章中,我们定义了React两种不同组件的书写定义格式,并且回顾了类的定义方式