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 是基于组件、属性和状态的概念构建的。React 提供了一组相对较少的 API 来创建和更新组件。React 的基本功能足以满足我们大部分前端应用程序的需求。但是,现代应用程序仍然具有复杂的场景,需要高级前端逻辑。React 提供了许多高级 API,这将有助于我们创建复杂的前端应用程序。高级 API 是有代价的。高级 API 在我们的应用程序中学习和应用起来有点困难。

React 提供了一种严格模式,它通过突出显示应用程序开发阶段的潜在问题来帮助开发人员正确应用高级 API。众所周知,React 中的一切都是建立在组件概念之上的,严格模式只是一个非可视化组件,React.StrictMode。严格模式组件的使用也非常简单。只需用 React.StrictMode 组件包装要分析的组件,如下所示 −

<React.StrictMode>
   <OurComplexComponent />
</React.StrictMode>

严格模式的另一个功能是,当应用程序中使用某些遗留或弃用的 API(最终会在应用程序中引入错误)时抛出错误或警告。

让我们学习本章中严格模式组件突出显示的项目列表。

不安全的生命周期使用

React 确定一些遗留生命周期事件在基于异步的应用程序中不安全使用。它们如下 −

  • componentWillMount

  • componentWillReceiveProps

  • componentWillUpdate

不安全意味着它会在应用程序中创建难以调试的错误。React 最终将在库的未来版本中删除这些不安全的生命周期事件。在此之前,开发人员在使用旧版不安全生命周期事件时会收到警报。

旧版 ref API 用法

React 的早​​期版本使用基于字符串的 ref 管理,后来添加了基于回调的 ref 管理。建议使用基于回调的选项,因为它稳定且不易出错。如果我们使用基于字符串的选项,严格模式将发出警告。

React 的最新版本提供了改进的 ref 管理选项,它既易于编码又不易出错。

旧版 findDOMNode 用法

findDOMNode 有助于根据类实例搜索 DOM 节点树。 findDOMNode 的使用已弃用,并提倡使用基于 ref 的 DOM 管理。

副作用

React 有两个主要阶段,rendercommit。render 阶段涉及大量工作且耗时,而 commit 阶段则简单快捷。React 引入了并发模式,这将提高 render 阶段的性能。并发模式的要求之一是 render 阶段中使用的生命周期事件不应包含副作用。

React 将在开发阶段尝试使用不同的方法查找意外的副作用并将其报告为警告。

旧版上下文 API

旧版上下文 API 容易出错,不建议使用。它将在未来版本中被删除。在此之前,严格模式将检测旧上下文 API 的使用情况并报告。

可重用状态

具有可重用状态的组件可以多次挂载和销毁,不会产生任何副作用,并有助于提高应用程序的性能。React 库的未来版本将在保留状态的同时添加或删除 UI 部分。React 18 引入了严格模式功能,它将尝试卸载并重新挂载组件以确保组件具有弹性。此阶段的任何问题都将被报告。