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 - 简介

ReactJS 是一个免费的开源前端 JavaScript 库,用于开发各种交互式用户界面。它是一个简单、功能丰富且基于组件的 UI 库。当我们说基于组件时,我们的意思是 React 通过创建各种可重复使用和独立的代码来开发应用程序。因此,这个 UI 库在 Web 开发中被广泛使用。

ReactJS 可用于开发小型应用程序以及大型复杂应用程序。ReactJS 提供最小且可靠的功能集来启动 Web 应用程序。React 社区通过提供大量现成的组件来在创纪录的时间内开发 Web 应用程序,从而对 React 库进行了补充。 React 社区还在 React 库的基础上提供了状态管理、路由等高级概念。

React 版本

Reactjs 库由 Facebook 软件工程师 Jordan Walke 于 2011 年创立。随后,React 的初始版本 0.3.0 于 2013 年 5 月发布,最新版本 17.0.1 于 2020 年 10 月发布。主要版本引入了重大更改,次要版本引入了新功能,而不会破坏现有功能。必要时会发布错误修复。React 遵循语义版本控制 (semver)原则。

为什么需要 ReactJS?

尽管有各种库提供了开发用户界面的媒介,但 ReactJS 在受欢迎程度方面仍然占据主导地位。原因如下 −

  • 基于组件 − ReactJS 使用多个组件来构建应用程序。这些组件是独立的,具有自己的逻辑,这使得它们在整个开发过程中可重复使用。这将大大减少应用程序的开发时间。

  • 更好更快的性能 − ReactJS 使用虚拟 DOM。虚拟 DOM 将应用程序组件的先前状态与当前状态进行比较,并且仅更新真实 DOM 中的更改。而传统的 Web 应用程序会再次更新所有组件。这有助于 ReactJS 更快地创建 Web 应用程序。

  • 极其灵活 − React 允许开发人员和团队设置他们认为最适合的约定,并以他们认为合适的方式实现它,因为 React 中没有严格的代码约定规则。

  • 轻松创建动态应用程序 − 动态 Web 应用程序需要更少的编码,同时提供更多的功能。因此,ReactJS 可以轻松创建它们。

  • 也可以开发移动应用程序 − React 不仅可以开发 Web 应用程序,还可以使用 React Native 开发移动应用程序。React Native 是一个开源 UI 软件框架,源自 React 本身。它使用 React 框架为 Android、macOS、Web、Windows 等开发应用程序。

  • 调试很容易 − React 中的数据流是单向的,即在使用 React 设计应用程序时,子组件嵌套在父组件中。由于数据流是单向的,因此调试错误和发现错误变得更加容易。

应用程序

下面列出了一些由 React 库 支持的流行网站 −

  • Facebook,流行的社交媒体应用程序 − React 最初由 Facebook(或 Meta)开发,因此他们使用它来运行他们的应用程序是很自然的。至于他们的移动应用程序,它使用 React Native 来显示 Android 和 iOS 组件,而不是 DOM。Facebook 的代码库现在包含超过 20,000 个组件,并使用公开的 React 版本。
  • Instagram,流行的照片共享应用程序 − Instagram 也完全基于 React,因为它也由 Meta 提供支持。其主要用途包括地理位置、标签、Google Maps API 等。
  • Netflix,流行的流媒体应用程序 − Netflix 于 2015 年改用 React。影响这一决定的主要因素是 1) 启动速度以减少呈现主页的处理时间并在 UI 中启用动态元素,2) 模块化以允许必须与控制体验共存的各种功能和 3) 运行时性能以实现高效的 UI 渲染。
  • Code Academy,流行的在线培训应用程序 − Code Academy 使用 React 作为"脚本经过实战测试,易于思考,使 SEO 变得简单,与遗留代码兼容,并且足够灵活以应对未来"。
  • Reddit,流行的内容共享应用程序 − Reddit 也是使用 React 从头开发的。

如您所见,每个领域中最流行的应用程序都是由 React Library 开发的。