React中fragment的使用以及严格模式

84 阅读1分钟

Fragment的最基本使用

我们先来看一段代码,它的显示效果 image.png image.png 外面裹了层没有意义的div image.png

image.png 我们不想有这个div,就得用到Fragment了。

Fragment的短语法

省略Fragment,这就是短语法 image.png

有些情况是不能省略的。 image.png 段语法是不能添加任何属性的 image.png 必须包裹Fragement image.png

严格模式(StrictMode)

我们使用react脚手架创建项目时,index文件默认是这样的: image.png 这里加的React.StrictMode就是严格模式。

只要是放到React.StrictMode里的后代(子)组件,就会开启严格模式。

严格模式的作用:

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。严格模式检查仅在开发模式下运行;它们不会影响生产构建。

开启严格模式检测一:识别不安全的生命周期

image.png 这个生命周期过期了。 image.png image.png image.png image.png

检测二:使用过时的ref API

image.png

检测三:使用废弃的findDOMNode方法

这个是很早期的写法了,已经不重要了。

检测四:意外的副作用

image.png 这个组件的constructor会被调用两次。这是严格模式下故意进行的操作,让你来查看在这里写的一些逻辑代码被调用多次时,是否会产生一些副作用。在生产环境中,是不会被调用两次的。

检测五:检测过时的context API

早期的Context是通过static属性声明Context对象属性,通过getChildContext返回Context对象等方式来使用Context的。目前这种方式已经不推荐使用。