freeCodeCamp/guide/chinese/react/functional-components-vs-class-components/index.md

title, localeTitle

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; 

更多信息

• 反应组件
• 功能与类组件
• React中的有状态与无状态功能组件
• State和LifeCycle