class组件 和 函数组件
无生命周期函数，不需要访问this，代码更简洁
class组件：
- 需要写很多周期函数，而且需要通过this来访问自定义事件和一些实例的api
函数组件：
- 不需要写生命周期函数和this
组件之间很难复用状态逻辑
class组件：
-
React 没有提供将可复用性行为“附加”到组件的途径。
-
class组件中可以通过
Provider,Consumer,render props和高阶组件来实现状态逻辑复用，需要重新组织组件结构，形成组件和代码的嵌套，使代码难以理解。
函数组件：
- Hook 使你在无需修改组件结构的情况下复用状态逻辑。
复杂组件更容易理解
class组件：
-
class组件逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。
-
相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
-
不可能将组建拆分到更小的颗粒度，因为状态逻辑无处不在。不利于单元测试。
函数组件：
- Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
更符合react哲学
class组件：
-
子组件中props和state会随着this的改变取到的内容可能不是子组件想用的内容，需要通过一次解构，将this.props或者this.state的值存下来，这样才能保证此次要渲染的内容无误。
-
因为props本身不会改变，所以对于函数组件来说，取到的props不会随着this的改变而改变。
函数组件：
-
函数式组件获取了render所需要的值。
-
React设计理念就是，UI 在概念上就是当前应用状态的一个渲染函数，我们的事件处理程序(render) 本质上就是一个拥有特定 props 和 state 的特定渲染。
