一、fragment

在之前的開發中，我們總是在一個組件中返回內容時包裹一個div元素：

我們又希望可以不渲染這樣一個div應該如何操作呢？

• 使用Fragment
• Fragment 允許你將子列表分組，而無需向 DOM 添加額外節點；
  

React還提供了Fragment的短語法：

• 它看起來像空標簽 <> </>；
  

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

二、StrictMode

StrictMode 是一個用來突出顯示應用程序中潛在問題的工具。

• 與 Fragment 一樣，StrictMode 不會渲染任何可見的 UI；
• 它為其后代元素觸發額外的檢查和警告；
• 嚴格模式檢查僅在開發模式下運行；它們不會影響生產構建；

可以為應用程序的任何部分啟用嚴格模式：

• 不會對 Header 和 Footer 組件運行嚴格模式檢查；
• 但是，ComponentOne 和 ComponentTwo 以及它們的所有后代元素都將進行檢查；
  

三、嚴格模式檢查的是什么？

但是檢測，到底檢測什么呢？

識別不安全的生命周期：

使用過時的ref API

使用廢棄的findDOMNode方法

• 在之前的React API中，可以通過findDOMNode來獲取DOM，不過已經不推薦使用了

檢查意外的副作用

• 這個組件的constructor會被調用兩次；
• 這是嚴格模式下故意進行的操作，讓你來查看在這里寫的一些邏輯代碼被調用多次時，是否會產生一些副作用；
• 在生產環境中，是不會被調用兩次的；

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;

檢測過時的context API

• 早期的Context是通過static屬性聲明Context對象屬性，通過getChildContext返回Context對象等方式來使用Context的；
• 目前這種方式已經不推薦使用，大家可以自行學習了解一下它的用法；

總結

以上是生活随笔為你收集整理的React中的fragment和StrictMode的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。