React - 优点 & 缺点
React 是一个用于构建可组合用户界面的库。它鼓励创建可重用的 UI 组件,这些组件呈现随时间变化的数据。许多人将 React 用作 MVC 中的 V。
React 为你抽象了 DOM,提供更简单的编程模型和更好的性能。React 还可以通过 Node 在服务器端渲染,并且可以使用 React Native 驱动原生应用。React 实现了单向响应式数据流,这减少了样板代码,并且比传统的双向数据绑定更容易理解和推理。
React 的优势
以下是 React 的主要优势 −
性能
易于学习
丰富的第三方组件集合
庞大的社区
SEO 友好
轻松启动 React 项目
丰富的开发者工具
处理大型应用
性能
React 使用 Virtual DOM 概念来检查和更新 HTML 文档。Virtual DOM 是 React 创建的一个特殊 DOM。Virtual DOM 表示当前文档的真实 DOM。每当文档发生变化时,React 会将更新后的 Virtual DOM 与之前的 Virtual DOM 状态进行比较,并仅更新实际/真实 DOM 中的差异。这提高了 HTML 文档渲染的性能。
例如,如果我们创建一个 React 组件,通过 setInterval() 方法定期更新时间来显示当前时间,那么 React 只会更新当前时间,而不是更新整个组件的内容。
易于学习
React 的核心概念可以在一天内学会。React 可以使用 Plain Javascript (ES6) 或 Typescript 进行编码。要开始使用 React,只需要基本的 JavaScript 知识。对于高级开发者,Typescript 提供了类型安全和丰富的语言特性。开发者通过学习 JSX(类似于 HTML)和属性(props),可以在几小时内创建一个 React 组件。学习 React 的状态管理将使开发者能够创建动态组件,当状态变化时更新内容。React 为其组件提供了简单生命周期,可以用于正确设置和销毁组件。
丰富的第三方组件集合
除了核心 React 库(大小仅几 KB)之外,React 社区还提供了大量组件,涵盖从简单 UI 组件到功能完整的 PDF Viewer 组件的各种应用。React 在每个类别中都提供了多种选项。例如,高级状态管理可以使用 Redux 或 MobX 库来实现。Redux 和 MobX 只是用于状态管理的两个流行库。React 有超过 10 个库可以实现相同功能。同样,React 社区在路由、数据网格、日历、表单编程等每个类别中都提供了大量第三方库。
庞大的社区
React 开发者社区是一个庞大的社区,活动丰富。React 社区非常活跃,你可以通过 Google、StackOverflow 等平台在几分钟内获得任何 React 相关问题的答案/解答。
SEO 友好
React 是少数支持 SEO 功能的 JavaScript 库之一。由于 React 组件和 JSX 类似于 HTML 元素,因此可以轻松实现 SEO,而无需大量代码/设置。
轻松启动 React 项目
React 提供了一个 CLI 应用 create-react-app 来创建新的 React 应用。create-react-app 应用不仅创建新应用,还能在本地环境中构建和运行应用,而无需其他依赖。create-react-app 允许开发者选择模板,从而在初始设置时包含更多样板代码。这使开发者只需几下点击即可启动从小型应用到大型应用。
除了 create-react-app 之外,React 社区还提供了 Next.js、Gatsby 等额外工具,使开发者能够在短时间内创建高级应用。
丰富的开发者工具
React 社区提供了基本的开发者工具来提升开发者生产力。React developer tool 支持 Chrome、Edge 和 Firefox 浏览器,使开发者能够选择 React 组件并查看组件的当前状态。它还使开发者能够通过在浏览器开发者选项卡中以组件树的形式显示组件层次结构,从而清晰了解组件视图层次。
处理大型应用
React 使用 composition 将多个组件合并成一个更大的组件,从而允许创建更大规模的组件。React 组件可以创建在单个 JavaScript 文件中,并设置为可导出。这种特性允许将多个组件按模块分组在公共类别下,并在其他地方重用。
React 库的可组合和模块化特性使开发者能够创建大型应用,与其他前端框架相比,这些应用相对容易维护。
React 的缺点
尽管 React 库有很多优点,但它也存在一些缺点。以下是一些缺点 −
缺乏高质量文档
没有标准/推荐的应用开发方式
开发节奏快
需要高级 JavaScript 使用
JavaScript 扩展
仅是一个 UI 库
缺乏高质量文档
React 库在其官方网站上有不错的文档。它涵盖了基本概念并附带了一些示例。尽管这是一个理解 React 基本概念的好起点,但它并没有提供深入且详细的解释以及多个示例。React 社区介入并提供了大量文章,这些文章的复杂度和质量各不相同。但是,它们没有组织在一个地方,让开发者能够轻松学习。
没有或较少标准的应用开发方式
React 只是一个 UI 库,带有少量概念和标准推荐。尽管 React 可以用来创建大型/复杂应用,但没有标准或推荐的方式来创建应用。由于没有标准方式,React 社区使用多种架构来构建他们的应用。开发者可以自由选择适合其应用的方法论。在应用开发初期做出错误选择,会使应用复杂化,并延迟开发进度。
开发节奏快
React 每年会发布几次新版本库。每次发布都会引入一些新功能和一些破坏性变更。开发者需要快速学习并应用新概念来稳定应用。
需要高级 JavaScript 使用
尽管 React 库的核心概念相当简单且易于学习,但高级概念相当复杂,因为它利用了 JavaScript 的高级特性。此外,React 有很多高级概念来应对 HTML / 表单编程中的许多复杂场景。众多高级概念的数量对开发者来说确实是一个学习和掌握的挑战。
JavaScript 扩展
JSX 是 JavaScript 语言的扩展。JSX 类似于 HTML,简化了组件开发。JSX 与 HTML 编程也有一些差异,需要小心正确应用。此外,JSX 需要在浏览器中执行前编译为 JavaScript,这为应用增加了额外步骤/负担。
仅是一个 UI 库
正如我们之前所学,React 只是一个 UI 库,而不是一个框架。创建具有良好架构的 React 应用需要仔细选择和应用额外的第三方 React 库。糟糕的设计可能会在应用开发的后期/最终阶段影响应用。