2 面向组件编程
2.1 两类组件
1. 函数式组件——适用于简单组件
- 简单组件——无state
// 1. 创建函数式组件——首字母大写
function Demo(){
console.log(this); // undefined
// babel翻译完开启严格模式,所以为 undefined
return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2>
}
// 函数调用: Demo()
// 2. 渲染组件到页面——react调用
ReactDOM.render(<Demo/>, document.getElementById('test'));
执行ReactDOM.render()之后,发生了什么?
- React解析组件标签,找见Dome组件
- 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,呈现在页面
2. 类式组件——适用于复杂组件
- 复杂组件——有state
<script type="text/babel">
// 1. 创建类式组件
class MyComponent extends React.Component {
render() {
// render是放在类的原型对象上,供实例使用
// render中的this是—— MyComponent的实例对象
console.log(this);
return <h2>我是用函数定义的组件(适用于复杂组件的定义)</h2>
}
}
// 2. 渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'));
</script>
执行了ReactDOM.render之后,发生了什么?
- React解析组件标签,找到了MyComponent组件
- 发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render上
- 将render返回的虚拟DOM转为真实DOM,随后呈现在页面上
2.1_ 补充_类的基本知识
<script type=text/javascript>
// 创建一个Person类
class Person {
// 构造器方法
constructor(name, age){
// 构造器中的this是指——类的实例对象
this.name = name;
this.age = age;
}
// 一般方法
speak(){
// 放在了类的原型对象上 _proto_
// 通过person实例调用speak时,speak中的this就是person实例
console.log(`我叫${
this.name},我年龄是${
this.age}`);
}
}
// 创建一个Person的实例对象
const p1 = new Person('tom', 10);
const p2 = new Person('fas', 30);
console.log(p1);
console.log(p2);
p1.speak();
p2.speak();
</script>