类组件和函数组件的比较

[kangkang123269]

区别

1. 语法差异：类组件是使用 ES6 class 语法创建的，而函数组件是使用函数声明的方式创建的。

2. 生命周期：类组件可以使用 React 生命周期方法（如 componentDidMount、componentDidUpdate、componentWillUnmount 等），而函数组件可以使用 useEffect Hook 来实现类似的效果。

3. 状态管理：类组件可以使用 state 和 props 来管理状态和传递数据，而函数组件可以使用 useState 和 props 来实现同样的功能。

4. 代码复杂度：通常来说，函数组件比类组件更简洁、更易于理解和维护，因为它们没有 this 指针，没有生命周期方法等，代码复杂度更低。

5. 性能差异：由于类组件需要创建实例对象，因此在一些特定场景下，类组件的性能可能比函数组件差一些，但在现代 React 中，React 已经对函数组件进行了很多优化，使得它们的性能和类组件相当，甚至更好。

react函数组件的性能为什么比类组件要好

React 函数组件相较于类组件具有更好的性能主要是因为以下两个方面：

1. 没有实例对象：函数组件没有实例对象，也就不需要绑定 this 指针或者创建实例对象，这样可以节省一定的内存开销。

2. 采用钩子函数：React 函数组件采用了钩子函数的方式来管理组件的状态和生命周期，例如 useEffect、useState、useMemo 等 Hook，这些钩子函数可以更好地实现组件的逻辑复用，也更加灵活和简洁。

函数组件做了哪些优化？

React 函数组件的性能优化主要是通过以下几种方式实现的：

1. 使用 React.memo()：React.memo() 是一个高阶组件，用于缓存组件的渲染结果，如果组件的 props 没有变化，则直接返回缓存的结果，避免重复渲染。这个方法类似于 PureComponent，但是适用于函数组件。

2. 使用 useCallback() 和 useMemo()：useCallback() 和 useMemo() 都是 React 的钩子函数，它们用于缓存函数的引用和计算结果，避免重复计算。使用 useCallback() 缓存回调函数，可以避免每次渲染都重新创建函数对象；使用 useMemo() 缓存计算结果，可以避免每次渲染都重新计算。

3. 避免不必要的渲染：在函数组件中，每次调用组件都会重新渲染，但是有些情况下，我们希望避免不必要的渲染，可以通过 React.memo() 或 shouldComponentUpdate() 等方法来判断组件是否需要重新渲染。

4. 使用动态导入：在需要加载大量组件的情况下，可以使用动态导入来延迟组件的加载时间，这样可以减少页面加载时间，提高用户体验。

[kangkang123269]

面试版

1. 语法差异：类组件是class，函数组件是function
2. 生命周期：类组件可以使用react的生命周期，而函数组件useEffect hook函数能达到一样的效果
3. 状态管理：类组件可以使用state和props分别来状态管理和传递数据，函数组件可以用useState和props实现一样的效果
4. 代码复杂度：函数组件比类组件更简洁、更便于维护，且没有this，没有生命周期，代码复杂度更低。
5. 性能方面：类组件需要创建实例对象，需要创建this，这样会有一定的内存开销；函数组件hook函数做了很多优化，效果更好。