React class 组件和函数组件的区别？

[xiaoYuanDun]

CC 有自己的实例，可以在内部维护自己的 state，不能使用 hook，在 concurrent 模式中，componentWillXxx 可能会出错 FC 没有实例，维护 state 需要借助 hook 两者在 render 阶段的 beginWork 中走的也是不同的逻辑

[Moannas]

函数组件特点：

没有组件实例 没有生命周期 没有 state 和 setState，只能接收 props 函数组件是一个纯函数，执行完即销毁，无法存储 state class 组件存在的问题：

大型组件很难拆分和重构，变得难以测试 相同业务逻辑分散到各个方法中，可能会变得混乱 复用逻辑可能变得复杂，如 HOC 、Render Props 所以 react 中更提倡函数式编程，因为函数更灵活，更易拆分，但函数组件太简单，所以出现了hook，hook就是用来增强函数组件功能的。

[yanggengzhen123]

区别： 使用class创建的组件，有自己的私有数据（this.state）和生命周期函数。 使用function函数创建的组件，只有props,没有自己的私有数据和生命周期函数，函数组件用hook的useState定义修改state、用 useEffect代替生命周期。

[loringray]

class 组件：

1. 有 state 和 setState
2. 具有生命周期
3. 具有组件实例

函数组件：

1. 没有 state 和 setState
2. 函数组件是一个纯函数，执行完即销毁，无法存储state
3. 没有生命周期
4. 没有组件实例

大的 class 组件较难拆分和重构，复用逻辑可能变得复杂，如 HOC、Render Props； 所以 react 更提倡函数式编程，而 hook 出现是为增强函数组件功能，因为函数组件较简单了。