react类组件和函数组件有何不同？

在 React 16.8版本（引入钩子）之前，使用基于类的组件来创建需要维护内部状态或利用生命周期方法的组件（即componentDidMount和shouldComponentUpdate）。基于类的组件是 ES6 类，它扩展了 React 的 Component 类，并且至少实现了render()方法。

类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

函数组件是无状态的（同样，小于 React 16.8版本），并返回要呈现的输出。它们渲染 UI 的首选只依赖于属性，因为它们比基于类的组件更简单、更具性能。

函数组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 注意：在 React 16.8版本中引入钩子意味着这些区别不再适用

不同点：

一、设计思想

• 类组件的根基是 OOP(面向对象编程)，所以它会有继承，有内部状态管理等
• 函数组件的根基是 FP(函数式编程)，与数学中的函数思想类似，所以假定输入和输出存在某种关联的话，那么相同输入必定会有相同的输出

所以相对于类组件，函数组件会更加的纯粹，简单，更利于测试，这就是它们本质上的区别

二、设计模式

在设计模式上，类组件是可以实现继承的，而函数组件没有继承能力

但是在react中官方是不推荐使用继承的，因为继承的灵活性更差，细节屏蔽的过多，所以就有了 组合高于继承 的铁律

三、使用场景

• 在不使用 Recompose 和 Hooks 的情况，如果需要使用生命周期，那么就用类组件，限定场景比较固定
• 但在 recompose 或 Hooks 的加持下，这样的边界就模糊化啦，类组件和函数组件的能力边界是完全相同的，都可以使用类似生命周期的能力

四、未来的发展趋势

由于 React Hooks 的诞生，现在 函数组件成了React 社区主推的方案

React 团队从 Facebook的实际业务场景触发，通过探索时间切片和并发模式，以及考虑性能的进一步优化和组件间更合理的代码拆分后，认为 类组件的模式并不能很好地适应未来的趋势，它们给出了以下3个原因：

1. this 的模糊性
2. 业务逻辑耦合在生命周期中
3. React 的组件代码缺乏标准的拆分方式

而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织和复用，且能更好的适用于时间切片和并发模式

总结

react 中 class组件和函数组件区别：

1. class组件是有状态的组件，可以定义state状态，函数组件无状态
2. class组件有生命周期的，函数组件无生命周期
3. class组件是有this对象，函数组件没有this对象
4. 组件调用： class组件实例化后调用render方法调用，函数组件直接调用的。
5. class组件内部的话，render方法return返回渲染jsx模板，函数组件直接返回即可
6. ref获取子组件的对象，class组件可以直接获取到的，函数组件无法直接获取到。
7. 绑定bind改变this指向，只适用于class组件