當(dāng)我們使用npm create-react-app my-app創(chuàng)建一個(gè)react項(xiàng)目的時(shí)候，在項(xiàng)目根目錄index.js中有如下所示的一段代碼：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode組件是什么？
StrictMode是一個(gè)用來(lái)檢查項(xiàng)目中潛在問(wèn)題的工具。與Fragment一樣。它不會(huì)渲染任何可見(jiàn)的UI。為其后代元素觸發(fā)額外的檢查和警告。

嚴(yán)格模式檢查盡在開(kāi)發(fā)模式下運(yùn)行，不會(huì)影響生產(chǎn)構(gòu)建。

• StrictMode 目前有助于

識(shí)別不安全的生命周期
關(guān)于使用過(guò)時(shí)字符串 ref API 的警告
關(guān)于使用廢棄 findDOMNode 方法的警告
檢測(cè)意外的副作用
檢測(cè)過(guò)時(shí)的context API

• 生命周期警告
  過(guò)時(shí)的組件生命周期往往會(huì)帶來(lái)不安全的編碼實(shí)踐，具體函數(shù)如下
  1、componentWillMount
  2、componentWillReceiveProps
  3、componentWillUpdate

• ref API 的警告
  React 提供了兩種方法管理 refs 的方式：已過(guò)時(shí)的字符串 ref API 的形式及回調(diào)函數(shù) API 的形式。盡管字符串 ref API 在兩者中使用更方便，但是它有一些缺點(diǎn)，因此官方推薦采用回調(diào)的方式。

• 檢測(cè)的副作用
  渲染階段的生命周期包括以下class組件方法
  1、constructor
  2、componentWillMount (or UNSAFE_componentWillMount)
  3、componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
  4、componentWillUpdate (or UNSAFE_componentWillUpdate)
  5、getDerivedStateFromProps
  6、shouldComponentUpdate
  7、render
  8、setState 更新函數(shù)（第一個(gè)參數(shù)）

因?yàn)樯鲜龇椒赡軙?huì)被多次調(diào)用，所以不要在它們內(nèi)部編寫副作用相關(guān)的代碼，這點(diǎn)非常重要。忽略此規(guī)則可能會(huì)導(dǎo)致各種問(wèn)題的產(chǎn)生，包括內(nèi)存泄漏和或出現(xiàn)無(wú)效的應(yīng)用程序狀態(tài)。不幸的是，這些問(wèn)題很難被發(fā)現(xiàn)，因?yàn)樗鼈兺ǔ＞哂蟹谴_定性。

嚴(yán)格模式不能自動(dòng)檢測(cè)到你的副作用，但它可以幫助你發(fā)現(xiàn)它們，使它們更具確定性。通過(guò)故意重復(fù)調(diào)用以下函數(shù)來(lái)實(shí)現(xiàn)的該操作：

1、class 組件的 constructor，render 以及 shouldComponentUpdate 方法
2、class 組件的生命周期方法 getDerivedStateFromProps
3、函數(shù)組件體
4、狀態(tài)更新函數(shù) (即 setState 的第一個(gè)參數(shù)）
5、函數(shù)組件通過(guò)使用 useState，useMemo 或者 useReducer