「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动 」

原文作者： Ashutosh Mishra。原文链接

几个月前，React 发布了它的新文档。在React Docs Beta中强调了功能组件。这是React团队的一个重大举措，因为我们已经知道了React功能组件是未来，因为在16.8中引入了Hooks。

在 Hooks 出现以前，我们主要在React中使用 Class 组件，每次构建复杂的应用程序时都会用到它们。我们需要深入挖掘 React 的起源和这两个组件的历史，找出导致Class组件衰落的原因以及功能组件是怎样成为当今构建 React 应用程序的最优选择。

1.React起源故事

React 于 2013 年 5 月在美国的一次JavaScript 会议上被介绍给全世界。事实证明，它改变了游戏规则，并迅速成为 JavaScript 库之王。它是由Facebook 的软件工程师Jordan Walke 创立的。他还在 2011 年创建了FaxJS，这是 React 的早期原型。

在引入 React 之前，Web 应用程序是使用模板或 HTML 指令构建的。React的不同之处在于将整个用户界面分解为几个小组件，当它们组合在一起时就完成了应用程序的 UI。

在过去十年中，出现了许多前端框架，到目前为止，React 不仅幸存下来，而且蓬勃发展，在使用和流行方面有效地击败了所有其他框架。

过去 5 年流行的主要前端框架的比较

根据 Statista 的数据，React 是2021 年全球开发人员中使用最多的 Web 框架，总份额为 40.14%，而 jQuery 则以 34.43% 的份额落后。

2.什么是Class组件？

正如本文前面所讨论的，React 中的组件是一段代码，负责渲染用户界面的某个部分。有两种类型的组件：

类组件
功能组件

Class Component 使用 ES6 JavaScript 类来创建一个组件。在 16.8 版本引入 Hooks 之前，这是构建 React 应用程序的最常见方式。

import React from "react"; 
class App extends React.Component {
    render() {
    return <h1>I am Class Component</h1>;
    } 
} 
export default App;

要创建类组件，您必须创建一个扩展 React.Component并具有render()函数的类。在 render() 中，你可以像往常一样返回你的JSX 。类组件还可以访问道具、状态和各种生命周期方法，例如：

componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

每个组件都有一个生命周期，它具有三个主要阶段：

安装
更新
卸载

将组件加载到 DOM 中的过程称为挂载。当组件进行一些更改并自行更新时，称为更新。卸载是指从 DOM 中移除某个组件。

所有生命周期方法都用于在组件生命周期的各个阶段与其交互。

3.什么是功能组件？

功能组件是一种使用 JavaScript函数创建 React 组件的组件。

import React from "react"; 
function App() {
    return <h1>I am a Functional Component</h1>; 
} 
export default App;

要创建一个函数式组件，您必须像在 JavaScript 中那样声明一个函数。

上面的代码片段是一个功能组件的例子，它是我们上面看到的类组件的书面版本。您还可以使用 ES6 箭头函数来创建组件。

import React from "react"; 
const App = () => {
    return (
    <h1>
    I am a Functional Component created with ES6 arrow function            </h1> 
    )}
export default App;

你较这两种类型的组件，并且可以亲眼看到函数式组件具有更简单和更清晰的语法。

但是语法并不总是足以跳入某些技术，您还需要一组强大的特性和功能来构建复杂的应用程序，所有这些功能组件最初都缺乏。

所以理论上，开发者可以随意使用类组件或功能组件。但实际上，只有类组件才能构建复杂的功能和应用程序，让开发人员别无选择。

4.功能组件的兴起

在 React Conf 2018 之后一切都发生了变化，“Sophie Alpert 和 Dan Abramov 介绍了 Hooks，随后 Ryan Florence 演示了如何重构应用程序以使用它们。” -React文档

在功能组件中引入 Hooks 的动机是为了解决“五年多来编写和维护成千上万个组件时遇到的问题”。-React文档

使用钩子，我们分离代码不是基于生命周期方法名称，而是基于代码在做什么”——Dan Abramov

钩子之所以受到如此多的关注，是因为它将状态和生命周期方法的力量带入了功能组件。您现在有了 useState 挂钩来处理 setState 方法，并且 useEffect 足以替代许多生命周期方法。不再依赖类组件。

如果熟悉 React 类生命周期方法，可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。 -React文档

在 16.8 版本中共有 10 个内置钩子。

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

并非所有这些钩子都经常使用，大多数时候我们只需要 useState 和 useEffect。但是，如果这 10 个钩子对您来说还不够，React 还为您提供了构建自己的自定义钩子的选项。

5.类组件的未来

我们已经讨论了在钩子出现后类组件的重要性如何降低。但是，类组件不会消失，至少不会很快消失。React 团队自己已经提到，目前没有从 React 中删除类组件的计划。

有大量遗留项目仍在使用类组件，但 React 团队建议对所有较新的项目使用功能组件。所有现代 React 教程也只关注功能组件。此外，React 团队引入新的 beta 文档也证实了他们对 Hooks 在未来 React 应用程序开发中发挥重要作用的未来愿景。

6.结论

这篇文章是对 React 的历史分析。它还研究了功能组件如何击败类组件成为 React 应用程序开发的关键参与者，尽管它被引入为一个低功耗的构建组件，它或多或少只能渲染散布一些道具的静态应用程序。

React 的功能组件即是未来