2.0 KiB
2.0 KiB
title | localeTitle |
---|---|
Functional Components vs Class Components | 功能组件与类组件 |
功能组件与类组件
React中主要有两个组件:
- 功能组件
- 类组件
功能组件
- 功能组件是基本的JavaScript功能。这些通常是箭头函数,但也可以使用常规
function
关键字创建。 - 有时被称为“哑”或“无状态”组件,因为它们只是接受数据并以某种形式显示它们;那就是他们主要负责渲染UI。
- React生命周期方法(例如,
componentDidMount
)不能用于功能组件。 - 功能组件中没有使用渲染方法。
- 这些主要负责UI,通常只是表示(例如,Button组件)。
- 功能组件可以接受和使用道具。
- 如果您不需要使用React状态,则应该支持功能组件。
import React from "react";
const Person = props => (
<div>
<h1>Hello, {props.name}</h1>
</div>
);
export default Person;
类组件
- 类组件使用ES6类并在React中扩展
Component
类。 - 有时称为“智能”或“有状态”组件,因为它们倾向于实现逻辑和状态。
- 可以在类组件内使用React生命周期方法(例如,
componentDidMount
)。 - 您将props传递给类组件并使用
this.props
访问它们
import React, { Component } from "react";
class Person extends Component {
constructor(props){
super(props);
this.state = {
myState: true;
}
}
render() {
return (
<div>
<h1>Hello Person</h1>
</div>
);
}
}
export default Person;