React中的函数组件与类组件

独上归州2024-10-18 9:30

在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。