从16.8版本开始，钩子是React的新增功能。它们解锁了无类组件中的有用功能。使用Hooks，React不再需要生命周期方法(例如componentDidMount管理状态)。这鼓励了关注点的分离，因为组件无法管理自己的状态。在类组件中放置大量状态管理会增加复杂性。这使得有状态组件更难以维护。Hooks试图通过提供关键功能来缓解此问题。

以下是基本的挂钩：

• useState：用于在无生命周期方法的情况下更改无类组件中的状态
• useEffect：用于执行渲染后的功能，对于触发Ajax请求非常有用
• useContext：用于切换组件上下文数据，甚至在组件外部

优点：

• 减轻状态管理的复杂性
• 支持功能组件
• 鼓励分离关注点

缺点：

功能组件是一种无需类组件即可创建JSX标记的声明方式。它们包含功能范式，因为它们不管理生命周期方法中的状态。这强调了没有太多逻辑的UI标记。由于组件依赖道具，因此变得更容易测试。道具与渲染输出具有一对一的关系。

这是React中功能组件的样子：

优点：

缺点：

创建React应用(Create React App)

• 上下文数据切换可以指数化认知负荷
• 网站：reactjs.org
• 仓库：github.com/facebook/react
• GitHub星级：140,000+
• 开发人员：Facebook
• 当前版本：16.12
• 贡献者：1,300+
  1. const SimpleComponent = ({isInit, data}) => 
  2. <> 
  3.   {useEffect(() => {!isInt && loadAjaxData()})} 
  4.   {data} 
  5. </> 
  • 仅关注UI
  • 可测试的组件
  • 考虑组件时减少认知负荷
  • 没有生命周期方法