1: React 组件 (函数式组件)
1:React提供了两种创建组件方式:
1.1:函数式组件 1.2: 类组件
执行了ReactDOM.render(<myComponent />... 之后, 发生了什么)
1: React 解析组件标签。 找到myComponent 组件
2: 发现组件使用是函数定义, 随后调用该函数, 将返回的虚拟DOM转化为真实DOM, 随后呈现在页面中。
JSX 就是一个语法糖: 就是可以简单的创建虚拟DOM
------------------------------------------------------------------
创建函数时组件:
<div id="test"></div>
// 一定要写text/babel
<script type="text/babel">
// 创建函数式组件
function MyComponent() {
console.log(this); // undefined
// 为什么是undefined, 因为我们写的是jsx 语法, 在经过babel 翻译之后,开启了严格模式
// 禁止指向window 顶层的对象, 在babeljs.cn 在babel js 官网中可以测试
return <h2>我使用函数定义组件, 适用于简单组件的定义</h2>
}
// 2: 渲染组件到页面
ReactDOM.render(MyComponent/>, document.getElementById('test'))
</script>
// 注意: 定义函数式组件首字母必须大写,
调用函数是组件的时候, 必须使用单闭合标签使用。
jsx 就是一个语法糖可以更加简单创建VDOM, 方便 快捷创建VDOM
2: 类的基本知识:
<script>
// 创建一个Person类
class Person {
// 构造方法 == 就是当我们实例化这个类的时候这个构造函数会自动调用
constructor(name, age) {
this.name = name
this.age = age
}
// 一般方法
speak() 方法在类的原型对象上, 供实例调用
通过Person 实例调用speak时, speak中的this就是Persons实例。
speak() {
console.log(`我名字是${this.name}, 我年龄是${this.age}`)
}
}
let p1 = new Person('xxx', 18); // p: 就是一个实例对象 Person: 就是一个类
let p2 = new Person('aaa', 20)
console.log(p1);
console.log(p2);
p1.speak();
p2.speak();
---------------------------------------------------------------------
继承
// 创建一个Student类, 继承Person 类
class Student extends Person {
}
let student = new Student('Bob, 20');
student.speak(); // 继承
</script>
--------------------------------------------------------------------
创建一个Student类, 继承Person 类
class Student extends Person {
constructor(name, age, grade) {
super(); // 子类重写父类的构造方法, 一定要使用super() 关键字
this.name = name
this.age = age
this.grade = grade
}
// 重写父类的speak() 方法
speak() {
console.log(`我名字是${this.name}, 我年龄是${this.age}, 我的成绩是${this.grade}`)
}
}