React中的函数组件与类组件

在React中,有两种不同的组件形式:函数组件和类组件。它们的写法并不相同。

函数组件

React的函数组件是一个只接受 props 参数并返回元素的 JavaScript 函数(该props与Vue中props一样是只读的,且都是父组件传递给子组件的数据)。

js 复制代码
export function MyComponent(props) { // 不同于Vue中的函数组件(有props和ctx两个参数)
  return <h1>{ props.hobby }</h1>;
}

函数式组件自身没有任何状态(state)生命周期方法,只接受其父组件传递的数据(props)。

类组件

类组件使用class关键字定义,组件名格式必须是大驼峰 ,且继承于React.component

js 复制代码
class MyComponent extends React.Component {
	constructor(props) {
		super(props); // 也可以接受props
		this.state = {} // 组件的状态(响应式状态)
		// 必须为类组件中的方法显示绑定this(法一),否则在经过babel的转化后(严格模式下)函数方法的this指向undefined
		this.[methodName1] = this.[methodName1].bind(this);
	}
	[methodName1]() {} // 类组件的方法
	// 箭头函数没有自己的this,因此会使用上层作用域的this
	[methodName2] = () => {}
	[methodName3]() {} 
	// render函数中的this默认指向组件实例
	render() { // 类组件固定方法,返回要渲染的内容(jsx)
		return (
			<> // 等同于<Fragment></Fragment>,不过Fragment上可以写key
				<h1>Hello, { this.props.name }</h1>
				<button onClick={this.[methodName1]}>点击按钮</button>
				{/* 或者在jsx中为类组件中的方法显示绑定this(法一) */}
				{/* <button onClick={this.[methodName1].bind(this)}>点击按钮</button> */}
				<button onClick={this.[methodName2]}>点击按钮</button>
				<button onClick={() => this.[methodName3]()}>点击按钮</button>
			</>
		);
  }
}

因此,函数组件和类组件的主要区别是:函数组件没有任何状态(state)和生命周期方法(因为生命周期方法来源于React.component),且函数组件中不会使用this。不过,函数组件可以在使用React中的Hooks时使用state

相关推荐
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ2 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫2 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250743 小时前
Web入门常用标签、属性、属性值
前端