- 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 是建立在组件、属性和状态的概念之上的。React 提供了相对较少的一组 API 来创建和更新组件。React 的基本特性对于我们前端应用程序的大部分来说已经足够了。但是,现代应用程序仍然具有复杂的场景,这需要先进的前端逻辑。React 提供了很多高级 API,这将帮助我们创建复杂的前端应用程序。高级 API 是有成本的。高级 API 在我们的应用程序中学习和应用它有点困难。
React 提供了一个严格的模式,通过在应用程序的开发阶段突出潜在问题,帮助开发人员正确应用高级 API。正如我们所知,React 中的所有内容都是建立在组件的概念之上的,strict mode 只是一个非视觉组件,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 有两个主要阶段,render 和 commit。渲染阶段涉及大量工作且耗时,而提交阶段则简单而快速。React 引入了并发模式,这将提高渲染阶段的性能。并发模式的要求之一是,渲染阶段使用的生命周期事件不应包含副作用。
在开发阶段,React 将尝试使用不同的方法找到意外的副作用,并将其报告为警告。
旧版上下文 API
旧版上下文 API 容易出错,不建议使用。它将在将来的版本中被删除。在此之前,严格模式将检测旧上下文 API 的使用情况并报告它。
可重用状态
具有可重用状态的组件可以多次挂载和销毁,而不会产生任何副作用,这将有助于提高应用程序的性能。React 库的未来版本将在保留状态的同时添加或删除 UI 的部分。React 18 引入了严格模式功能,该功能将尝试卸载和重新安装组件,以确保组件具有弹性。将报告此阶段的任何问题。