（三）复习类相关知识
# 🥥一、类式组件
类式组件适用于【复杂组件】的定义，类式组件需要用到 js 相关的类知识
# 🥠二、定义一个类式组件，继承 React 自带的 React.Component 类
// 1.创建类式组件 必须要继承 React 中自带的 React.Component
class Demo extends React.Component {
}- 类式组件的三个必要条件
- 必须继承
React自带的React.Component类 - 必须调用
render这个方法 render方法必须有返回值
// 1.创建类式组件 必须要继承 React 中自带的 React.Component
class Demo extends React.Component {
render() {
return <h2>我是类式组件</h2>
}
}
// 2. 渲染到组件到页面
ReactDom.render(<Demo/>, document.getElmentById('test'))# 🍥三、解决几个问题
- 上述代码中类的
render函数是放在哪里的？ - 放在
Dome的原型对象上，共实例使用，那么实例在哪里呢？ - ReactDom.render(, ....) 执行了这个
react帮我们new了 - 执行
ReactDom.render()之后发生了什么 React解析组件标签，找到了Demo组件- 发现组件是使用类定义的，随后
new出来改类的实例，并通过改该实例调用到原型上render方法 - 将
render返回的虚拟dom转换为真实dom，随后呈现在页面中 render中的this是谁？Demo的实例对象，或者说是Demo的组件实例对象
// 1.创建类式组件 必须要继承 React 中自带的 React.Component
class Demo extends React.Component {
render() {
return <h2>我是类式组件</h2>
console.log('render中的this', this)
}
}
// 2. 渲染到组件到页面
ReactDom.render(<Demo/>, document.getElmentById('test'))
# 🦐四、我们需要用到的组件三大属性
- props
- refs
- state
- 下面图中这些方法，都是继承于
react自带的React.Component类
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年12月31日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
