React类创建组件,通过继承React内置的Component
来实现的
class MyComponent extends React.Component{
render() {
console.log(this)
// render是放在哪里的 —— 类(即:MyComponent)的原型对象上,供实例使用
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
其中,class类里面的render是放在哪里的呢?
类(即:Component)的原型对象上,供实例使用
可是实例在哪里呢,根本没有new MyComponent
去创建实例呀
那是因为在渲染类组件时写了组件标签<MyComponent/>
,React无形之中已经创建了实例,MyComponent
上的原型对象上已经有了render方法
如在控制台输入MyComponent.prototype
可见:
执行了ReactDOM.render之后,发生了什么?
1. React解析组件标签,找到了MyComponent组件
2. 发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用 到原型上的render方法
3. 将返回的虚拟DOM转为真实DOM,随后呈现在页面中
render中的this指向谁?
this指向的是当前调用的MyComponent类的实例对象