React 中嚴格模式的目的

1. React 中的嚴格模式
2. React Strict 模式的優點
3. React 嚴格模式的最佳用途

JavaScript 是一種用於開發全棧應用程式的優秀程式語言。新手開發人員經常難以編寫乾淨、有組織的 JavaScript 程式碼。幸運的是，有一些 JavaScript 框架為編寫 Web 應用程式提供了一些結構。React 是編寫高效 Web 應用程式的最流行框架之一，即使不是最流行的框架。它提供了一個名為 StrictMode 的輔助元件來突出顯示與 React 標準實踐不同的程式碼片段。

React 中的嚴格模式

React StrictMode 突出了應用程式中的潛在問題。通過這樣做，它可以幫助你編寫更具可讀性和安全性的應用程式。此功能包含在 React 包中，因此你不必單獨匯入它。如果你有任何可疑程式碼，請將其包裝在 StrictMode 幫助程式元件中，僅此而已。這裡如何在函式式 React 元件中使用它：

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

在這種情況下，我們只是用我們的輔助元件包裝了 <SuspiciousComponent>。如果我們將子元件的程式碼更改為違反 React 推薦做法的內容，StrictMode 會發出警報。這是必要的，因為一些不良做法可能不會使應用程式崩潰。僅僅因為該應用程式有效並不意味著它沒有問題。如果你對一段程式碼感到懷疑，請使用 <React.StrictMode> 輔助元件將其包裝起來，以確保它沒有任何問題。你可以包裝單個元件、多個元件或整個樹。

如果你想在整個元件樹中查詢潛在錯誤，請檢視父元件的 return 語句幷包裝包含所有其他元件的 <div>（或其他一些元素）。如果你構建了一個複雜的應用程式，StrictMode 將不可避免地檢測到一些錯誤並將它們報告給控制檯。

就像 Fragment 輔助元件一樣，StrictMode 不呈現任何實際的 UI。它也不會影響你的應用程式的樣式。

React Strict Mode 用於在開發模式下檢測錯誤。一旦你清除了所有錯誤並且應用程式已準備好用於生產，你就可以將其刪除。

React Strict 模式的優點

除了在 React 中使用 StrictMode 的明顯好處外，它還可以成為學習編寫更好質量程式碼的有用工具。

防止副作用

一些生命週期方法在渲染階段可能會被多次呼叫，所以 React 建議它們不應該包含任何副作用。此建議經常被忽視，導致不正確的狀態和記憶體洩漏，從而使你的應用程式暴露於外部攻擊。幸運的是，StrictMode 輔助元件可以幫助你找到有害的副作用並修復它們。為了實現這一點，使用 StrictMode 包裝的元件的方法被有目的地呼叫兩次。

檢測過時的做法

像 findDOMNode 這樣的特性曾經在 ReactJS 中被允許使用，但它們現在已被棄用。context API 也是如此，它在過去被廣泛使用，但即將被刪除。StrictMode 可以成為一個有用的工具，用於對過時的方法或 React 特定的功能發出警報。

React 嚴格模式的最佳用途

如果你使用的程式碼庫不是你編寫的，那麼 StrictMode 可以成為確保正確組織程式碼的有用工具，尤其是在沒有經驗的開發人員編寫 React 應用程式的情況下。

在 JavaScript（帶有 React）程式碼中查詢錯誤可能非常困難。但是用 StrictMode 包裝程式碼可能會給你一些關於可能出錯的想法。

總的來說，StrictMode 是 React 中最有用的工具之一。新手開發人員可以使用它來養成編寫遵循 React 推薦實踐的程式碼的習慣。使用嚴格模式的次數越多，使用起來就越舒服。