一、fragment

在之前的開(kāi)發(fā)中，我們總是在一個(gè)組件中返回內(nèi)容時(shí)包裹一個(gè)div元素：

我們又希望可以不渲染這樣一個(gè)div應(yīng)該如何操作呢？

• 使用Fragment
• Fragment 允許你將子列表分組，而無(wú)需向 DOM 添加額外節(jié)點(diǎn)；
  

React還提供了Fragment的短語(yǔ)法：

• 它看起來(lái)像空標(biāo)簽 <> </>；
  

• 但是，如果我們需要在Fragment中添加key，那么就不能使用短語(yǔ)法
  
  
  

二、StrictMode

StrictMode 是一個(gè)用來(lái)突出顯示應(yīng)用程序中潛在問(wèn)題的工具。

• 與 Fragment 一樣，StrictMode 不會(huì)渲染任何可見(jiàn)的 UI；
• 它為其后代元素觸發(fā)額外的檢查和警告；
• 嚴(yán)格模式檢查僅在開(kāi)發(fā)模式下運(yùn)行；它們不會(huì)影響生產(chǎn)構(gòu)建；

可以為應(yīng)用程序的任何部分啟用嚴(yán)格模式：

• 不會(huì)對(duì) Header 和 Footer 組件運(yùn)行嚴(yán)格模式檢查；
• 但是，ComponentOne 和 ComponentTwo 以及它們的所有后代元素都將進(jìn)行檢查；
  

三、嚴(yán)格模式檢查的是什么？

但是檢測(cè)，到底檢測(cè)什么呢？

識(shí)別不安全的生命周期：

使用過(guò)時(shí)的ref API

使用廢棄的findDOMNode方法

• 在之前的React API中，可以通過(guò)findDOMNode來(lái)獲取DOM，不過(guò)已經(jīng)不推薦使用了

檢查意外的副作用

• 這個(gè)組件的constructor會(huì)被調(diào)用兩次；
• 這是嚴(yán)格模式下故意進(jìn)行的操作，讓你來(lái)查看在這里寫的一些邏輯代碼被調(diào)用多次時(shí)，是否會(huì)產(chǎn)生一些副作用；
• 在生產(chǎn)環(huán)境中，是不會(huì)被調(diào)用兩次的；

import React, {PureComponent, StrictMode} from 'react'; class Home extends PureComponent {/*UNSAFE_componentWillMount() {console.log('home componentWillMount')}*/constructor(props) {super(props);console.log('home constructor')}render() {return (<div>Home</div>);} } class Profile extends PureComponent {/*UNSAFE_componentWillMount() {console.log('profile componentWillMount')}*/constructor(props) {super(props);console.log('profile constructor')}render() {return (<div>Profile</div>);} }class App extends PureComponent {render() {return (<div><StrictMode><Home/></StrictMode><Profile/></div>);} }export default App;

檢測(cè)過(guò)時(shí)的context API

• 早期的Context是通過(guò)static屬性聲明Context對(duì)象屬性，通過(guò)getChildContext返回Context對(duì)象等方式來(lái)使用Context的；
• 目前這種方式已經(jīng)不推薦使用，大家可以自行學(xué)習(xí)了解一下它的用法；

總結(jié)

以上是生活随笔為你收集整理的React中的fragment和StrictMode的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。