/

React嚴格模式

React嚴格模式

React嚴格模式是什麼，如何使用

您可以使用內建的React.StrictMode組件來啟用React執行的一組檢查並提醒您相關問題。

一種簡單的方法是在index.js文件中將整個App組件包裹在<React.StrictMode></React.StrictMode>中：

1
2
3
4
5
6
7
8
9
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 document.getElementById('root')
)

您還可以通過包裹一個或多個組件使用它：

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'

class Hello extends React.Component {
 render() {
   return (
     <div>
       <React.StrictMode>
         ...
       </React.StrictMode>
     </div>
   )
 }
}

這個組件的主要用例之一是作為一個自動化的最佳實踐、潛在問題和過時檢查。

它不能捕獲所有問題，但在這裡有很多有用的檢查，可以幫助您解決一些簡單的問題。

React StrictMode在2018年3月的React 16.3中引入，對生產環境沒有任何影響，所以您可以始終將組件留在代碼庫中。在開發中使用它會在瀏覽器的JavaScript控制台中打印有用的警告信息。