react 类组件和函数组件区别

一

1. 类组件需要使用this关键字来访问props和状态，而函数组件则可以直接访问这些值。
2. 原来只有类组件可以使用的特性，比如状态和生命周期方法，现在函数组件通过Hooks也可以使用。
3. 函数组件通常更简洁，更易于测试和理解。
4. 类组件目前仍然支持一些尚未在函数组件中提供的特性，比如错误边界。

二

1. 语法上："函数组件是一个纯函数，它接收一个 props 对象返回一个 react 元素； 类组件需要去继承 React.Component 并且创建 render 函数返回 react 元素，虽然实现的效果相同，但需要更多的代码。"

类是组合寄生继承的语法糖，如果我们需要转译成 ES5 之前的代码，我们需要更多的预置代码，从而导致体积更大。

2. 功能上："之前，在使用场景上，如果存在需要使用生命周期的组件，那么主推类组件；设计模式上，如果需要继承，也是类组件。但现在由于 React hooks 的推出，生命周期概念的淡出，函数组件完全可以取代类组件。其次继承也不是组件最佳的设计模式，官方更推崇"组合优先于继承"的设计概念，所以类组件在这方面的优势也在淡出。"

3. 类组件在未来事件切片与并发模式中，由于生命周期带来的复杂度，并不易于优化。而函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能使用 React 的未来发展。