模块和组件
模块
- 向外提供特定功能的js程序,一般就是一个js文件
- 随着业务逻辑增加,代码越来越多且复杂,所以要拆分模块
- 作用:复用js,简化js的编写,提高js运行效率
组件:
- 用来实现局部功能效果的代码和资源的集合(html、css、js、img、video、font…)
- 作用:复用编码,简化项目编码,提高运行效率
React面向组件编程
1、使用React开发者工具调试
React Developer Tools 插件概述
- React Developer Tools插件是什么?React Developer
Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome
Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。添加react
developer tools到chrome,是对chrome开发工具的React调试工具。React的开发工具是开源Chrome
DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构(原名WebKit Web Inspector)。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染,以及他们最终渲染组件。
到谷歌应用商店下载React Develop Tools,不过这得访问外网才能获取到。
2、React中定义组件
函数式组件
1)根据jsx语法规则,函数的组件名首字母要大写
2)且标签要闭合例如
3)函数必须要有返回值
ReactDOM.render(<Demo/>,document.getElementById('test'))
主要代码:
//1、创建函数式组件
function Demo(){
return <h1>haha</h1>
}
//2、渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数式组件</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//1、创建函数式组件
function Demo(){
return <h1>haha</h1>
}
//2、渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
运行结果:
如果你安装了React Develop Tools,按F12,页面右边就会出现Compoents(组件),如上图,左边页面渲染的内容“haha"就是Demo组件里面的内容。
类式组件
1)回顾类的基本知识
新建xxx.html,在<script><script/>
里面创建一个类class xx{ }
并且创建该类的实例对象const a = new xx()
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复习类的基本知识</title>
</head>
<body>
<script type="text/javascript">
//创建一个Person类
class Persion{
//构造器方法
constructor(name,age){
//构造器中的this是类的实例对象
this.name = name;
this.age =age;
}
}
//创建一个Persion的实例对象
const p1 = new Person('王一博',24)
const p2 = new Person('肖战',29)
console.log(p1);
console.log(p2);
</script>
</body>
</html>
查看运行结果:
类的一般方法:xx(){}
<script type="text/javascript">
//创建一个Person类
class Persion{
//构造器方法
constructor(name,age){
//构造器中的this是类的实例对象
this.name = name;
this.age =age;
}
//一般方法
speack(){
console.log('我叫',this.name,'我今年',this.age,'岁');
}
}
//创建一个Persion的实例对象
const p1 = new Person('王一博',24)
const p2 = new Person('肖战',29)
console.log(p1);
console.log(p2);
p1.speack();
p2.speack();
</script>
查看运行结果:
继承
//创建一个Student类,继承Person类
class Student extends Person{
}
const s = new Student('肖战',29)
console.log(s);
查看运行结果:
当子类里面的属性多于父类时
//创建一个Student类,继承Person类
class Student extends Person{
constructor(name,age,grade){
//super必须写在this前面,否则报错
super(name, age);
this.grade = grade
}
}
const s = new Student('肖战',29,'努力的演员')
console.log(s);
查看运行结果
总结:
1、类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性时才写。
2、如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的。
3、类中定义的方法,都是放在了类的原型对象上,提供实例去使用。
2)类式组件
执行ReactDOM.render(<MyComponent/>,document.getElementById('test'))
后,React解析组件标签,找到了MyComponent组件,发现组件是使用类定义的,然后new出该类的实例,并通过该实例调用到原型上的render方法,将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
主要代码:
//1、创建类式组件
class MyComponent extends React.Component{
render(){
//render 是放在MyComponent的原型对象上,供实例使用。
//render 中的this是MyComponent的实例对象。
return <h2>类定义组件</h2>
}
}
//2、渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
查看运行结果: