React组件使用的简单介绍

最新推荐文章于 2025-04-08 00:05:07 发布

原创最新推荐文章于 2025-04-08 00:05:07 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #组件

本文深入讲解React中组件的创建方式，包括使用函数和类创建组件的详细步骤与注意事项，为React初学者提供实用指南。

React组件

::1.使用函数创建组件::

// 1 使用函数名称来作为组件标签的名称
// 2 约定函数组件必须有返回值，若不渲染任何内容就返回null
// 	若渲染内容就要返回一个值，一般就是JSX结构
// 3 函数组件名称必须以大写字母开头。 React内部根据首字母开头是不是大写来判断一个组件
// 如果组件没有子节点可以使用单标签
// 5 推荐使用小括号包裹返回的JSX结构，从而避免js中自动插入分号
function Hello() {return (<div>I'm a option</div>)	}
ReactDOM.render(<Hello><Hello>,document.getElementById('root'))

::2.使用类创建组件::
::es6中的class::

/*
ES6中的class关键字，用来实现JS中的面向对象
在ES6之前通过构造函数+圆形来实现面向对象

*/
// 构造函数
function Person(name) {
this.name = 'name'
}
// 方法放在原型中
Person.prototype.say = function() {
	console.log('hello,I'm' + this.name)
}
// 创建实例对象
const	p1 = new Person()

// 创建类
class Person{
	// 	构造函数
	constructor(naem) {
		this.name = naem
}
	say() {
		console.log('hello')
}
}
// 类的实例对象
const p = new Person('rose')

::继承::
要实现继承至少有2个类，一个子类一个父类

// 语法： class 子类名称 extends 父类名称 {}
// 创建父类
class Preson{
	constructor(name) {
		this.name = name
	}
}
// 创建子类
class Chinese extends Person {
	constructor(name) {
		// 注意，如果手动定制了construstor()，那么必须在第一行手动调用				super	()
		//  super() 	表示父类的构造函数，在当前子类中，就表示Person			的construstor
		// 对于同名的属性，子类会覆盖父类的属性
		super(name)
		this.age = 19
	}
}
const c = new Chinese('雄霸')
console.log(c.name)

::创建类组件::

// 1 约定 类组件中必须提供render方法
// 2 约定 render 方法必须有返回值
class Hello extends React.Component{
	render(){
		return(
			<h1>组件</h1>
		)
	}
}
ReactDOM.render(</Hello>,'root')