1.0 浏览器安装React开发者调试工具
React Developer Tools：谷歌、火狐、微软Edge浏览器都有。
我用的是微软Edge浏览器。
image.png
当我打开一般页面时：
image.png
右上角的工具图标是灰色，未激活状态，说明这个页面不是React页面。
某团的官网和React中文官网都可以显示彩色图标。
image.png
安装扩展之后，按F12可以看到和之前相比多了2个标题栏：
image.png
2.0 面向组件编程
2.1 函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
</body>
</html>
2.1 类式组件
2.1.1 类
首先明白类的相关知识。
<script type="text/javascript">
//创建一个Person类
class Person {}
const p1 = new Person();
const p2 = new Person();
console.log(p1)
</script>
这是最简单的使用，当然，这里的p1、p2没有什么区别。
<script type="text/javascript">
//创建一个Person类
class Person {
constructor(name, age) {
//构造器中的this指的就是——类的实例对象
this.name = name;
this.age = age;
}
}
const p1 = new Person('tom', 18);
const p2 = new Person('jerry', 19);
console.log(p1)
console.log(p2)
</script>
image.png
利用类的构造器，就可以对类进行数据初始化。
<script type="text/javascript">
//创建一个Person类
class Person {
constructor(name, age) {
//构造器中的this指的就是——类的实例对象
this.name = name;
this.age = age;
}
//一般方法
speak() {
//speak方法放在——类的原型对象上，供实例使用
//通过Person实例调用speak时，speak中的this就是Person实例
console.log(`我叫${this.name}，我的年龄是${this.age}。`)
}
}
const p1 = new Person('tom', 18);
const p2 = new Person('jerry', 19);
console.log(p1)
console.log(p2)
p1.speak();
p2.speak();
</script>
image.png
<script type="text/javascript">
//创建一个Person类
class Person {
//构造器方法
constructor(name, age) {
//构造器中的this是谁？—— 类的实例对象
this.name = name
this.age = age
}
//一般方法
speak() {
//speak方法放在了哪里？——类的原型对象上，供实例使用
//通过Person实例调用speak时，speak中的this就是Person实例
console.log(`我叫${this.name}，我年龄是${this.age}`);
}
}
//创建一个Student类，继承于Person类
class Student extends Person {
}
const s1 = new Student('小李子', 15);
console.log(s1);
</script>
image.png
继承的基本使用，可以不写构造器。
<script type="text/javascript">
//创建一个Person类
class Person {
//构造器方法
constructor(name, age) {
//构造器中的this是谁？—— 类的实例对象
this.name = name
this.age = age
}
//一般方法
speak() {
//speak方法放在了哪里？——类的原型对象上，供实例使用
//通过Person实例调用speak时，speak中的this就是Person实例
console.log(`我叫${this.name}，我年龄是${this.age}`);
}
}
//创建一个Student类，继承于Person类
class Student extends Person {
constructor(name, age, grade) {
super(name, age)
this.grade = grade
this.school = '红黄蓝幼儿园'
}
//重写从父类继承过来的方法
speak() {
console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
this.study()
}
study() {
//study方法放在了哪里？——类的原型对象上，供实例使用
//通过Student实例调用study时，study中的this就是Student实例
console.log('我很努力的学习');
}
}
const s1 = new Student('小李子', 15, '高一');
console.log(s1);
s1.speak();
s1.study();
</script>
image.png
使用起来和java（C#）的继承没什么区别。
总结：
- 必须有super
- super必须放在所有属性之前。
- 类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
- 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
- 类中所定义的方法，都放在了类的原型对象上，供实例去使用。
2.1.2 类式组件
函数式组件：函数名就是组件名。
类式组件：类名就是组件名。
<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component {
render(){
//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
总结
1.必须要继承父类React.Component
2.必须要写render(){}
3.在看不到的地方相当于执行了 new MyComponent()，react帮忙new了一个实例。
image.png
END
网友评论