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 事件 ReactJS - 状态管理 ReactJS - 状态管理 API ReactJS - 无状态组件 ReactJS - Hooks 进行状态管理 ReactJS - Hooks 的组件生命周期 ReactJS - 布局组件 ReactJS - 分页 ReactJS - Material UI ReactJS - Http 客户端编程 ReactJS - 表单编程 ReactJS - 受控组件 ReactJS - 非受控组件 ReactJS - Formik ReactJS - 条件渲染 ReactJS - 列表 ReactJS - Key 键 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 - 上下文 ReactJS - 错误边界 ReactJS - 转发 Refs ReactJS - 片段 ReactJS - 高阶组件 ReactJS - 与其他库集成 ReactJS - 优化性能 ReactJS - Profiler API ReactJS - Portals ReactJS - 不使用 ES6 ECMAScript ReactJS - 不使用 JSX 的 React ReactJS - Reconciliation ReactJS - Refs 和 DOM ReactJS - 渲染道具 ReactJS - 静态类型检查 ReactJS - 严格模式 ReactJS - Web 组件

其他概念

ReactJS - 日期选择器 ReactJS - Helmet ReactJS - 内联样式 ReactJS - PropTypes ReactJS - BrowserRouter ReactJS - DOM ReactJS - 轮播 ReactJS - 图标 ReactJS - 表单组件 ReactJS - 参考 API

ReactJS 有用资源

ReactJS - 快速指南 ReactJS - 备忘录 Axios - 备忘录 ReactJS - 有用资源 ReactJS - 讨论


ReactJS - 优点和缺点

React 是一个用于构建可组合用户界面的库。它鼓励创建可重复使用的 UI 组件,这些组件呈现随时间变化的数据。许多人使用 React 作为 MVC 中的 V。

React 将 DOM 抽象出来,提供更简单的编程模型和更好的性能。React 还可以使用 Node 在服务器上渲染,并且可以使用 React Native 为原生应用提供支持。 React 实现了单向响应式数据流,这减少了样板代码,并且比传统数据绑定更容易推理。

ReactJS 的优势

以下是 ReactJS 的主要优势 −

  • 性能

  • 易于学习

  • 大量第三方组件

  • 大型社区

  • SEO 友好性

  • 轻松启动 React 项目

  • 丰富的开发人员工具集

  • 处理大型应用程序

性能

React 使用虚拟 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、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 库。糟糕的设计可能会在应用程序开发的后期/最后阶段影响应用程序。