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 正逐渐成为 Web 开发人员中最好的 JavaScript 框架之一。它在前端生态系统中扮演着重要的角色。以下是 ReactJS 的重要功能

  • 虚拟 DOM

  • 组件

  • JSX

  • 单向数据绑定

  • 可扩展

  • 灵活

  • 模块化

虚拟 DOM

虚拟 DOM 是 React 创建的特殊 DOM。虚拟 DOM 代表当前 HTML 文档的真实 DOM。每当 HTML 文档发生变化时,React 都会检查更新后的虚拟 DOM 与虚拟 DOM 的先前状态,并仅更新实际 DOM 中的不同部分。这提高了 HTML 文档渲染的性能。

例如,如果我们创建一个 React 组件,通过 setInterval() 方法定期更新时间来显示当前时间,那么 React 将仅更新当前时间,而不是更新组件的整个内容。

组件

React 建立在组件概念之上。所有现代前端框架都依赖于组件架构。组件架构使开发人员能够将大型应用程序分解为更小的组件,这些组件可以进一步分解为更小的组件。将应用程序分解为更小的组件可以简化应用程序,使其更易于理解和管理。

JSX

JSX 是一个 JavaScript 扩展,用于使用类似于 HTML 的语法创建任意 HTML 元素。这将简化 HTML 文档的创建,并使文档更易于理解。React 将在执行 JSX 之前将其转换为由 React 的 createElement() 函数调用组成的 JavaScript 对象。它提高了应用程序的性能。此外,React 还允许使用纯 createElement() 函数创建 HTML 文档,而无需 JSX。这使开发人员能够在 JSX 不太适合的情况下直接创建 HTML 文档。

单向数据绑定

单向数据绑定可防止组件中的数据向后流动。组件只能将数据传递给其子组件。在任何情况下,组件都不能将数据传递给其父组件。这将简化数据处理并降低复杂性。双向数据绑定乍一看似乎是强制性的,但仔细观察表明,应用程序可以仅使用单向数据绑定来完成,这也简化了应用程序概念。

可扩展

React 可用于创建任何规模的应用程序。 React 组件架构、虚拟 DOM 和单向数据绑定能够在前端应用程序所需的合理时间范围内正确处理大型应用程序。这些功能使 React 成为可扩展的解决方案。

灵活

React 仅提供一些基本概念来创建真正可扩展的应用程序。React 不会以任何方式限制开发人员遵循严格的流程。这使开发人员能够在基本概念之上应用自己的架构并使其具有灵活性。

模块化

React 组件可以在单独的 JavaScript 文件中创建,并且可以导出。这使开发人员能够将某些组件分类并分组到模块中,以便可以在需要时导入和使用。