使用class关键字创建组件

简介: 一、最基本的组件结构二、用class关键字创建组件三、两种创建组件方式的对比

使用class关键字创建组件

目录

一、最基本的组件结构

二、用class关键字创建组件

三、两种创建组件方式的对比

 

一、最基本的组件结构


基于class关键字创建组件

//如果要使用class定义组件,必须让自己的组件,继承自React.component

class 组件名称extends React.component{

 

//在组件内部,必须有render函数,作用:渲染当前组件对应的虚拟DOM结构

render(){

 

//render函数中,必须返回合法的JSX虚拟DOM结构

return<div>这是class创建的组件</div>

 

二、用class关键字创建组件


//class关键字创建组件

class Movie extends React.Component{

 

//render函数的作用,是渲染当前组件所对应的虚拟DOM元素

render(){

 

//return null

return<div>

这是Movie组件

</dimage.png

const user = {

 name:zs

 age:22

 gender:’男’

}

reactDOM.render(<div>

  123

{/*<Hello name=(user,name) age=(user,age)></Hello> */}

{/* <Hello {user}></Hello> */}

</div>,document.getElementById(app))

 

三、两种创建组件方式的对比


1.用构造函数创建出来的组件,叫做“无状态组件”

2.class关键字创建出来的组件,叫做“有状态组件”

3.什么情况下使用有状态组件?什么情况写使用无状态组件?

 

//有状态组件和无状态组件之间的本质区别就是:有无sate属性

相关文章
|
16天前
|
设计模式
在实际开发中,什么时候应该使用 `new` 关键字,什么时候应该使用 `Object.create()` 方法?
【10月更文挑战第29天】`new` 关键字适用于创建具有特定类型和初始化逻辑的对象实例,以及实现基于原型链的继承;而 `Object.create()` 方法则适用于基于现有对象创建相似对象、避免构造函数的副作用、创建具有特定原型链的对象等场景。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象,以实现更高效、更灵活的代码结构。
|
5月前
|
存储 Java
JavaSE——方法(2/2)-方法重载、return关键字在方法中单独使用
JavaSE——方法(2/2)-方法重载、return关键字在方法中单独使用
35 4
|
6月前
|
程序员 C++
为什么c++要引入class关键字
总之,C++引入 `class`关键字是为了支持面向对象编程,通过封装、继承、多态和抽象等特性,提供了更强大、灵活和可维护的编程工具,使得程序开发更加高效和可扩展。这使C++成为一种强大的编程语言,广泛用于各种应用领域。
65 1
|
6月前
|
存储 Java
在Java中,定义一个类首先需要使用`class`关键字
【4月更文挑战第6天】在Java中,定义一个类首先需要使用`class`关键字
71 1
|
6月前
|
存储 C语言 C++
C/C++静态static属性/用法
C/C++静态static属性/用法
40 0
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
145 0
|
JavaScript 前端开发 开发者
使用 class 关键字创建组件|学习笔记
快速学习使用 class 关键字创建组件
109 0
使用 class 关键字创建组件|学习笔记
CLASSPATH环境属性
CLASSPATH环境属性自制脑图
69 0
CLASSPATH环境属性
|
JavaScript 开发者
veu 中通过属性绑定为元素设置 class 类样式 | 学习笔记
快速学习 veu 中通过属性绑定为元素设置 class 类样式
173 0
veu  中通过属性绑定为元素设置 class 类样式  |  学习笔记
|
JavaScript 前端开发 开发者
class-创建类并通过 constructor 挂载实例属性|学习笔记
快速学习 class-创建类并通过 constructor 挂载实例属性
227 0