react学习(9)类式组件
作者:
哆啦C梦的百宝箱 | 来源:发表于
2022-08-11 11:32 被阅读0次 <script type="text/babel">
//创建类式组件
class MyComponent extends React.Component {
render(){
return <h1>我是一个类式组件(适用于复杂组件的定义)</h1>
}
}
//渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'));
</script>
知识点
- 首先声明的组件类需要继承React.Component这个react的内置类。同时需要写一个render函数,类的方法在类的原型对象上。所以我们需要知道这个render函数,定义在MyComponent的原型对象上。render里面的this则指向的就是类的实例,也可以成为组件的实例。
- 写ReactDOM.render后发生了什么。
- React解析组件标签,找到了MyComponent这个组件。
- 发现组件是用类定义的,随后new出来该类的实例,并通过该实例调用到类原型上的render方法。这些都是react帮我们做的。
- 将render返回的虚拟的DOM转化为真实DOM,呈现在页面。
本文标题:react学习(9)类式组件
本文链接:https://www.haomeiwen.com/subject/oonnwrtx.html
网友评论