react class组件 function组件区别

导入React的方式不同

Class组件使用传统的ES6类语法定义，需要继承React.Component类，并在类中使用render()方法返回React元素。示例代码如下：

```javascript import React from 'react'; class MyComponent extends React.Component { render() { return ; } } ```

Function组件使用函数的方式定义，函数的返回值就是组件的渲染结果，不需要继承任何类。示例代码如下：

```javascript import React from 'react'; function MyComponent() { return ; } ```

状态管理不同

Class组件可以通过在constructor中初始化state来管理组件的状态，并通过setState()方法更新状态。示例代码如下：

```javascript import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick() { this.setState(prevState => ({ count: prevState.count + 1 })); } render() { return ( ); } } ```

Function组件使用React的Hooks API来管理状态，可以使用useState()钩子函数来声明和更新状态。示例代码如下：

```javascript import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prevCount => prevCount + 1); }; return ( ); } ```

生命周期方法不同

Class组件拥有比较丰富的生命周期方法，可以用于在组件的不同阶段执行一些操作，如componentDidMount()用于在组件挂载后执行一些初始化操作。示例代码如下：

```javascript import React from 'react'; class MyComponent extends React.Component { componentDidMount() { console.log('Component mounted'); } render() { return ; } } ```

Function组件使用Effect Hook来替代生命周期方法，在函数组件中可以使用useEffect()钩子函数来执行相应的操作。示例代码如下：

```javascript import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { console.log('Component mounted'); }, []); return ; } ```

性能方面的差异

Function组件通常比Class组件具有更好的性能，因为Function组件本身更简洁、轻量，并且React会对Function组件进行优化处理。另外，Function组件也使用了React的新特性，如Hooks API，这些特性可以更好地管理组件的状态和副作用，提高性能和可维护性。

使用场景不同

Class组件在过去是React开发中的主要组件类型，适合复杂的组件结构和需要管理状态的情况。

Function组件则是React Hooks发布之后的推荐用法，适用于简单的、无状态的展示型组件，并且可以更好地处理副作用。同时，Function组件也更容易进行单元测试和重用。

通过对React Class组件和Function组件的比较，可以根据具体的需求和场景选择合适的组件类型，从而更好地进行React开发。

本文链接：https://599cn.com/post/17563.html