JavaScript class和function的区别
待整理：
一
二
Class 组件和 Function 组件是 React 中创建组件的两种主要方式。他们在语法和功能上有一些不同。以下分点是 Class 组件和 Function 组件在不同方面的对比：
1. 语法结构
Class 组件：
import React, { Component } from 'react';class MyComponent extends Component {render() {return <div>Hello, World!</div>;}
}export default MyComponent;
Function 组件：
import React from 'react';const MyComponent = () => {return <div>Hello, World!</div>;
};export default MyComponent;
2. 状态管理
Class 组件：
- 使用
this.state来存储组件的状态，并用this.setState()方法来更新它。
Function 组件：
- 使用
useStateHook 来添加状态的功能。
import React, { useState } from 'react';const MyComponent = () => {const [myState, setMyState] = useState(initialState);// ...
};
3. 生命周期方法
Class 组件：
- 提供了
componentDidMount、componentDidUpdate、componentWillUnmount等生命周期方法。
Function 组件：
- 通过
useEffectHook 可以实现类似的功能。
import React, { useEffect } from 'react';const MyComponent = () => {useEffect(() => {// 类似于 componentDidMount 和 componentDidUpdate:return () => {// 类似于 componentWillUnmount};}, [dependencies]);// ...
};
4. 对 Hooks 的支持
Class 组件：
- 不能使用 Hooks。
Function 组件：
- 可以使用 Hooks。
5. this 关键字
Class 组件：
- 需要用到
this关键字来访问属性和方法。
Function 组件：
- 不需要用到
this关键字。
6. 性能
-
Function 组件：通常来说，由于没有生命周期方法和实例化的过程，函数组件在性能上略有优势。
-
Class 组件：相对来说，类组件在某些情况下可能会稍微慢一些，但在大多数场景下这不会成为问题。
7. 可读性和复杂度
-
Function 组件：由于 Hooks 的引入，Function 组件通常更加简洁，可读性更强。
-
Class 组件：在处理复杂状态逻辑和生命周期方法时，可能需要更多的模板代码。
结论
-
Function 组件：随着 React Hooks 的引入，Function 组件变得更加强大和灵活，能够实现类似 Class 组件的大多数功能，并且代码更加简洁。
-
Class 组件：虽然 Function 组件变得越来越流行，但 Class 组件仍然在许多现有的项目和库中被广泛使用。
在创建新的组件时，推荐使用 Function 组件，但在维护老的项目时，你依然可能需要熟悉和理解 Class 组件。