React中StrictMode严格模式
当我们使用 npx create-react-app my-app
创建一个项目的时候。项目中有一段如下所示的代码:
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
React.StrictMode
组件是什么?
StrictMode 是一个用来检查项目中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
注意:严格模式检查仅在开发模式下运行;它们不会影响生产构建。
StrictMode 目前有助于:
1、识别不安全的生命周期
2、关于使用过时字符串 ref API 的警告
3、关于使用废弃的 findDOMNode 方法的警告
4、检测意外的副作用
5、检测过时的 context API
生命周期警告
过时的组件生命周期往往会带来不安全的编码实践,具体函数如下:
1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate
16.3:为不安全的生命周期引入别名
1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate
1、componentWillMount (旧的名称正常使用) 2、componentWillReceiveProps(旧的名称正常使用) 3、componentWillUpdate(旧的名称正常使用)
16.3<16.x<17.0
1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate
1、componentWillMount (旧的名称在开发模式下会产生一个警告) 2、componentWillReceiveProps(旧的名称在开发模式下会产生一个警告) 3、componentWillUpdate(旧的名称在开发模式下会产生一个警告)
17.0 只有新的 “UNSAFE_” 生命周期名称可以使用
1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate
1、componentWillMount (已经删除不能使用) 2、componentWillReceiveProps (已经删除不能使用) 3、componentWillUpdate (已经删除不能使用)
当启用严格模式时,React 会列出使用了不安全生命周期方法的所有 class 组件,并打印一条包含这些组件信息的警告消息,如下所示:
ref API 的警告
React 提供了两种方法管理 refs 的方式:已过时的字符串 ref API 的形式及回调函数 API 的形式。尽管字符串 ref API 在两者中使用更方便,但是它有一些缺点,因此官方推荐采用回调的方式。
你可能了解过之前的 API 中的 string 类型的 ref 属性,例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。
class MyComponent extends React.Component {render() {return <input type="text" ref="textInput" />;}componentDidMount() {this.refs.textInput.focus();}
}
React 16.3 新增了第三种选择,它提供了使用字符串 ref 的便利性,并且不存在任何缺点,参考链接: 地址[1]。
检测副作用
渲染阶段的生命周期包括以下 class 组件方法:
1、constructor
2、componentWillMount (UNSAFE_componentWillMount)
3、componentWillReceiveProps (UNSAFE_componentWillReceiveProps)
4、componentWillUpdate (UNSAFE_componentWillUpdate)
5、getDerivedStateFromProps
6、shouldComponentUpdate
7、render
8、setState 更新函数(第一个参数)
因为上述方法可能会被多次调用,所以不要在它们内部编写副作用相关的代码,这点非常重要。忽略此规则可能会导致各种问题的产生,包括内存泄漏和或出现无效的应用程序状态。不幸的是,这些问题很难被发现,因为它们通常具有非确定性。
严格模式不能自动检测到你的副作用,但它可以帮助你发现它们,使它们更具确定性。通过故意重复调用以下函数来实现的该操作:
1、class 组件的 constructor,render 以及 shouldComponentUpdate 方法
2、class 组件的生命周期方法 getDerivedStateFromProps
3、函数组件体
4、状态更新函数 (即 setState 的第一个参数)
5、函数组件通过使用 useState,useMemo 或者 useReducer
context API 警告
过时的 context API 容易出错,将在未来的主要版本中删除。在所有 16.x 版本中它仍然有效,但在严格模式下,将显示以下警告:
旧版本的使用
import React, { Component } from 'react';
import PropTypes from 'prop-types';class App extends Component {static childContextTypes = {theme: PropTypes.string}getChildContext () {return {theme: 'dark'}}render() {return (<Toolbar />);}
}function Toolbar (props) {return (<div><ThemedButton /></div>)
}class ThemedButton extends Component {static contextTypes = {theme: PropTypes.string}render() {return (<button>{this.context.theme}</button>);}
}export default App;
新版本的使用
import React, { Component } from 'react';
const ThemeContext = React.createContext('light');class App extends Component {render() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);}
}function Toolbar (props) {return (<div><ThemedButton /></div>)
}class ThemedButton extends Component {static contextType = ThemeContextrender() {return (<button>{this.context}</button>);}
}export default App;
References
[1]
地址: https://wuqiang.blog.csdn.net/article/details/104153645
React中StrictMode严格模式相关推荐
- react中的render-props模式
在前端开发的过程中,如果我们遇到两个组件功能相同或者类似,应该怎么处理呢?复用相似的功能?复用什么?state,操作state的方法. 有两种方式:render props模式.高阶组件(HOC).这 ...
- 关于React中Fragment及Helmet标签
Fragment标签 在布局时,有事会看到<Fragment>标签,这个标签有什么用呢? React.Fragment 官方文档: React 中一个常见模式是为一个组件返回多个元素.Fr ...
- React中的fragment和StrictMode
一.fragment 在之前的开发中,我们总是在一个组件中返回内容时包裹一个div元素: 我们又希望可以不渲染这样一个div应该如何操作呢? 使用Fragment Fragment 允许你将子列表分组 ...
- [译] How to NOT React:React 中常见的反模式与陷阱
原文地址:How to NOT React: Common Anti-Patterns and Gotchas in React 原文作者:NeONBRAND 译文出自:掘金翻译计划 本文永久链接:g ...
- react中的状态机_在基于状态图的状态机上使用React的模式
react中的状态机 by Shawn McKay 肖恩·麦凯(Shawn McKay) 在基于状态图的状态机上使用React的模式 (Patterns for using React with St ...
- 前端MVVM模式及其在Vue和React中的体现
MVVM相关概念 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器:声明性的数据和命令,存在于Vi ...
- React中的过渡动画
1, 在react工程中下载安装过渡动画模块 npm install react-transition-group --save 2, 在需要执行过渡的组件中导入动画模块 import ...
- react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
- js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由 通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
最新文章
- 人群密度估计--Crowd Counting Via Scale-adaptive Convolutional Nerual Network
- C#实现rabbitmq 延迟队列功能
- Linux内核网络数据发送(五)——排队规则
- python字典随时添加元素和值
- python生成100个随机数_Python_0——100闭区间产生3个随机数,两种方法排序
- 来和 webpack 谈场恋爱吧!这课程好甜!
- CSS3:CSS3 文本效果
- 在没有适当上下文的情况下引发异常是一种不良习惯
- ASP VBScript 函数速查表
- java.net.url 中文乱码_jsp get Url请求方式中文乱码问题解决办法
- python扫雷游戏课程设计小组任务计划与分配表_Python开源扫雷游戏由网瘾少年制作,转手后月入18K,附赠所有源文件...
- Redis 命令行工具有趣的罕见用法
- 凝思系统如何调节分辨率_如何消除步进电机的噪音和振动?
- 三种常见的图像处理双三次插值算法
- python类的构造方法和assert的使用,用MethodType动态绑定类方法
- 树形DP Codeforces Round #135 (Div. 2) D. Choosing Capital for Treeland
- 如何安全地终止线程interrupt()、isInterrupted()、interrupted()的区别与使用
- 2018尚硅谷大数据视频_韩顺平_Linux视频教程
- VS2019下载地址和安装教程(图解)
- 快速了解SOLIDWORKS Simulation的有限元分析法