React 成为 JavaScript UI 框架之王的 7 个理由

React 仍然是 2022 年用于前端 Web 开发的最佳 JavaScript 框架，该框架拥有许多开箱即用的工具，使其使用起来轻而易举。React 由 Facebook 的 Jordan Walke 于 2013 年创建。从那时起，React 已发展成为目前使用最广泛的 JavaScript 框架。React 拥有许多令人惊叹的特性，使其成为理想的使用工具，例如 React Hooks 的强大功能，允许您编写函数式组件，以及围绕 React 构建的庞大社区和海量资源。

在前端 Web 应用程序开发的这个阶段，有很多选项可供选择，有些声称更结构化，而有些则声称更高效。你可能不会完全认同这种说法，但别担心，其他框架可能比 React 做得更好，但我个人认为，就整体性能而言，React 胜过我用过的大多数 JavaScript 框架，React 的开发体验简直是一流的。

您喜欢用面向对象的方法构建 UI 吗？React 拥有基于类的组件，如果您更喜欢函数式编程，React 也允许您使用函数式组件。让我们详细探索一下 React 成为 JavaScript UI 框架之王的一些特性。

React 使用纯 JavaScript。

React 中经常被忽视的一个部分是，React 文件其实就是一个简单的 JavaScript 文件，它导出一个类或一个函数。让我们简化一下，这样你就能理解 React 是多么容易上手。

如果您已安装 npm，只需运行“npx create-react-app app-name”即可。该命令将启动一个 React 应用的入门模板，您可以立即开始编辑。您可以通过在“src”文件夹中创建一个导出函数或类的新 JavaScript 文件，轻松添加您自己的 React 组件。

export default function Component() {
  return(<h1>Hello World</> )
}

上面的代码片段说明了 React 入门是多么简单，我们只需要导出一个返回 some 的函数即可JSX。其实没什么复杂的，除非你不熟悉 JSX。

JSX 是 React 的 JavaScript 扩展，允许我们在 JavaScript 文件中编写 HTML，但不要认为 JSX 只是一种简单的模板语言。使用 JSX 可以将组件逻辑和 UI 保存在一个文件中，而不会使其臃肿。JSX 允许我们通过将 JavaScript 表达式和语句包裹在花括号中来解释执行，它实际上会先进行编译，并且比我们在 JSX 之外编写的实际 JavaScript 代码更快。
建议您在另一篇文章中探讨 JSX。

React 支持基于类或功能组件

React 提供多种方法来构建 UI。如果你喜欢复杂性（请原谅我的讽刺），那么你可以使用基于类的组件。类组件只是一个扩展的类React.Component，它有一个 render 方法，用于构建并返回 UI。

import { Component } from "react";

class App extends Component {
  render() {
    let message = 'Hello World!';
    return (
      <h1>{ message }</h1>
    );
  }
}
export default App;

有些事情应该简单直接，所以我更喜欢使用函数式组件。你只需像前面的例子一样，声明并导出一个返回 UI 的函数即可。所以，无论你喜欢哪种风格，React 都能满足你的需求。

React Hooks

这是 React 的圣杯之一。React Hooks 让你的工作变得如此轻松，旨在简化诸如重新渲染 UI、管理状态、从 DOM 中选取元素等等复杂任务。React Hooks 几乎可以满足你的所有需求，即使没有合适的 Hook，你也可以构建自己的自定义 Hook。

import { useState } from 'react';

const [ count, setCount ] = useState(0);

function App() {
  return (
    <div>
      <p>
          You pressed <b>{ count }</b>
      </p>

      <button
         onClick={setCount(count++)}>
          update count
      </button>
    </div>
  );
};

export default App;

我们在这里使用了一个非常简单的 React Hook，它允许我们更新组件的状态，并在状态发生变化时重新渲染 UI。现在大多数人会说，其他框架也内置了状态管理功能，比如 Svelte 或 Angular，它们默认是响应式的，但这种方式比使用原生 JavaScript 甚至 jQuery 更简洁。

这确保了更少的“肉鸡板”代码，如果不使用钩子或基于类的组件来实现，我们将会编写更多代码。钩子还消除了在组件上监听多个生命周期事件的需要，钩子会在后台为您管理所有这些。

React 是可扩展的

React 的一大优势在于，它可以轻松地与任何 JavaScript 库或框架集成。大多数 JavaScript 模块添加到 React 应用中后，都能立即使用。这为你提供了一个良好的起点，让你可以尽情发挥。你可以随意添加模块，也可以保持简洁，一切由你决定。

还有许多其他框架建立在 React 之上，例如 NextJs、Gatsby 等。

NextJS是一个用于全栈 Web 应用开发的框架，它允许我们使用相同的代码库构建服务端和前端。React 本身并不支持 SEO 机器人索引的应用，但 NextJS 以多种高效的方式解决了这个问题。NextJS 提供服务器端渲染的应用程序，以及可在客户端渲染的预构建 HTML 模板。

Gatsby是 NextJS 的另一个很棒的替代品，它基本上提供与 NextJS 相同的功能，不容小觑。

React 支持多种 UI 设计方法

React 在应用程序架构和设计结构方面也支持多种方法。您可以选择构建应用程序的设计和开发方法，是数据驱动系统还是状态驱动系统？

React 为我们提供的只是构建应用程序的基本框架，我们来决定如何使用 React 构建我们的 Web 应用。您可以决定如何构建组件以及如何与应用程序状态交互。如果您觉得合适，组件可以与应用程序状态紧密耦合。

React 的学习曲线很小

对于 JavaScript 开发者来说，React 的学习曲线几乎为零，优秀的 JavaScript 工程师应该会发现它很容易上手。相比之下，为了使用 Angular 而学习 TypeScript 则不然。别误会，TypeScript 是一款非常棒的工具，我非常喜欢使用它。但从初学者的角度来看，它的学习曲线并不平坦。

由于 React 本质上就是纯 JavaScript，如果你已经熟悉 JavaScript，那么学习 React 会相当简单。但这并不意味着 React 不够成熟，它对专业人士来说足够先进，同时对初学者来说又非常容易上手。

React 拥有超强大的社区

它得到了 Facebook 的支持，并拥有超过 1 亿开发者的生态系统，他们每天都在使用 React。React 在 JavaScript 生态系统中备受青睐，并且仍然是 npm 上下载次数最多的 JavaScript UI 库，npm 下载量超过 14,534,124 次。

留下你对 React 的看法，并告诉我你认为其他框架是否与 React 接近甚至超越 React。我很想看到一两件作品。