- ReactJS 教程
- ReactJS - 首页
- ReactJS - 简介
- ReactJS - 路线图
- ReactJS - 安装
- ReactJS - 特性
- ReactJS - 优点与缺点
- ReactJS - 架构
- ReactJS - 创建 React 应用
- ReactJS - JSX
- ReactJS - 组件
- ReactJS - 嵌套组件
- ReactJS - 使用新创建的组件
- ReactJS - 组件集合
- ReactJS - 样式
- ReactJS - 属性 (props)
- ReactJS - 使用属性创建组件
- ReactJS - props 验证
- ReactJS - 构造函数
- ReactJS - 组件生命周期
- ReactJS - 事件管理
- ReactJS - 创建一个事件感知组件
- ReactJS - 在 Expense Manager APP 中引入事件
- ReactJS - 状态管理
- ReactJS - 状态管理 API
- ReactJS - 无状态组件
- ReactJS - 使用 React Hooks 进行状态管理
- ReactJS - 使用 React Hooks 进行组件生命周期管理
- ReactJS - 布局组件
- ReactJS - 分页
- ReactJS - Material UI
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 非受控组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - 键 (Keys)
- ReactJS - 路由
- ReactJS - Redux
- ReactJS - 动画
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - 表格
- ReactJS - 使用 Flux 管理状态
- ReactJS - 测试
- ReactJS - CLI 命令
- ReactJS - 构建和部署
- ReactJS - 示例
- Hooks
- ReactJS - Hooks 简介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定义 Hooks
- ReactJS 高级
- ReactJS - 可访问性
- ReactJS - 代码分割
- ReactJS - Context
- ReactJS - 错误边界
- ReactJS - 转发 Refs
- ReactJS - 片段 (Fragments)
- ReactJS - 高阶组件
- ReactJS - 与其他库集成
- ReactJS - 性能优化
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - 不使用 ES6 ECMAScript 的 React
- ReactJS - 不使用 JSX 的 React
- ReactJS - 调和 (Reconciliation)
- ReactJS - Refs 和 DOM
- ReactJS - 渲染 Props
- ReactJS - 静态类型检查
- ReactJS - Strict Mode
- ReactJS - Web Components
- 附加概念
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - 轮播图
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
- ReactJS 有用资源
- ReactJS - 快速指南
- ReactJS - 有用资源
- ReactJS - 讨论
ReactJS - 优点与缺点
React 是一个用于构建可组合用户界面的库。它鼓励创建可重用的 UI 组件，这些组件呈现随时间变化的数据。许多人使用 React 作为 MVC 中的 V。
React 为您抽象了 DOM，提供了更简单的编程模型和更好的性能。React 还可以使用 Node 在服务器端渲染，并且可以使用 React Native 驱动原生应用。React 实现单向反应式数据流，这减少了样板代码，并且比传统数据绑定更容易理解。
ReactJS 的优点
以下是 ReactJS 的主要优点：
性能
易于学习
大量的第三方组件
大型社区
SEO友好
轻松启动 React 项目
丰富的开发者工具
处理大型应用
性能
React 使用虚拟 DOM (Virtual DOM) 概念来检查和更新 HTML 文档。虚拟 DOM 是 React 创建的一个特殊的 DOM。虚拟 DOM 代表当前文档的真实 DOM。每当文档发生变化时，React 会将更新后的虚拟 DOM 与虚拟 DOM 的先前状态进行比较，只更新实际/真实 DOM 中的不同部分。这提高了 HTML 文档渲染的性能。
例如，如果我们创建一个 React 组件来显示当前时间，通过setInterval()方法定期更新时间，那么 React 将只更新当前时间，而不是更新组件的全部内容。
易于学习
React 的核心概念可以在不到一天的时间内学会。React 可以使用纯 JavaScript (ES6) 或 TypeScript 编写。要开始使用 React，只需要掌握基本的 JavaScript 知识就足够了。对于高级开发者，TypeScript 提供类型安全性和丰富的语言特性。开发者可以通过学习 JSX（类似于 HTML）和属性 (props) 在几小时内创建一个 React 组件。学习 React 状态管理将使开发者能够创建动态组件，这些组件在状态发生变化时更新内容。React 为其组件提供了简单的生命周期，可用于正确设置和销毁组件。
大量的第三方组件
除了核心 React 库（大小只有几 KB）之外，React 社区还为各种应用提供了大量的组件，从简单的 UI 组件到功能齐全的 PDF 查看器组件。React 在每个类别中都提供多种选择。例如，高级状态管理可以使用 Redux 或 MobX 库来完成。Redux 和 MobX 只是两种流行的状态管理库。React 有超过 10 个库可以实现相同的功能。同样，React 社区在路由、数据网格、日历、表单编程等各个类别中都提供了许多第三方库。
大型社区
React 开发者社区是一个庞大且活跃的社区。React 社区非常活跃，您可以通过 Google、Stack Overflow 等在几分钟内获得任何与 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 社区提供了必要的开发者工具来提高开发者的生产力。Chrome、Edge 和 Firefox 浏览器的React 开发者工具使开发者能够选择一个 React 组件并查看组件的当前状态。此外，它还使开发者能够通过在浏览器的开发者选项卡中将其显示为组件树来清晰地了解组件层次结构。
处理大型应用
React 使用组合将多个组件合并为一个更大的组件，这反过来又允许创建更大的组件。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 库。糟糕的设计可能会在应用程序开发的后期/最终阶段影响应用程序。