【react】类组件

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类的实例对象
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值