- 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 钩子的组件生命周期
- ReactJS - 组件的布局
- ReactJS - 分页
- ReactJS - Material 用户界面
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 不受控制的组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - 键
- ReactJS - 路由
- ReactJS - 冗余
- ReactJS - 动画
- ReactJS - 引导程序
- ReactJS - 地图
- ReactJS - 表格
- ReactJS - 使用 Flux 管理状态
- ReactJS - 测试
- ReactJS - CLI 命令
- ReactJS - 构建和部署
- ReactJS - 示例
- ReactJS - 钩子简介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定义钩子
- ReactJS - 可访问性
- ReactJS - 代码拆分
- ReactJS - 上下文
- ReactJS - 错误边界
- ReactJS - 转发引用
- ReactJS - 片段
- ReactJS - 高阶组件
- ReactJS - 与其他库集成
- ReactJS - 优化性能
- ReactJS - 分析器 API
- ReactJS - 门户
- ReactJS - 没有 ES6 ECMAScript 的 React
- ReactJS - 没有 JSX 的 React
- ReactJS - 协调
- ReactJS - 引用和 DOM
- ReactJS - 渲染属性
- ReactJS - 静态类型检查
- ReactJS - 严格模式
- ReactJS - Web 组件
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - 属性类型
- ReactJS - 浏览器路由器
- ReactJS - DOM
- ReactJS - 旋转木马
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
ReactJS - 优点和缺点
React 是一个用于构建可组合用户界面的库。它鼓励创建可重用的 UI 组件,这些组件呈现的数据会随着时间的推移而变化。很多人在 MVC 中使用 React 作为 V。
React 从你那里抽象出 DOM,提供更简单的编程模型和更好的性能。React 还可以使用 Node 在服务器上进行渲染,并且可以使用 React Native 为原生应用提供支持。React 实现了单向响应式数据流,减少了样板,比传统的数据绑定更容易推理。
ReactJS的优点
以下是ReactJS的主要优点 :
- 性能
- 简单易学
- 大量的第三方组件
- 大型社区
- SEO友好性
- 轻松启动 React 项目
- 丰富的开发者工具集
- 处理大型应用程序
性能
React 使用 Virtual DOM 概念来检查和更新 HTML 文档。虚拟 DOM 是 React 创建的一个特殊 DOM。虚拟 DOM 表示当前文档的真实 DOM。每当文档发生变化时,React 都会检查更新的虚拟 DOM 与虚拟 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 查看器组件的广泛应用提供了大量的组件。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 社区还提供其他工具,例如 nextjs、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 库。在应用程序开发的后期/最后阶段,一个糟糕的设计可能会影响应用程序。