React StrictMode 生命週期為什麼會執行兩次？
什麼是 React.StrictMode?
React.StrictMode 是在 2018 年的 16.3.0 版本中引入的元件。一開始，它只用在類元件中，而在 16.8.0 中，它對 hook 同樣適用。
就像在版本說明中提及的一樣：
React.StrictMode 是幫助應用適應非同步渲染的元件
所以它應該用來幫助工程師避免常見的錯誤，並使他們的 React 應用拋棄過時的 API，從而逐步升級。
這些提示對於更好地除錯是有幫助的，因為這個庫正在向非同步渲染時代邁進，所以大的改動時時發生。
很有用，對吧？
為什麼會渲染兩次呢?
我們從使用 React.StrictMode 中獲得的好處之一是，它幫助我們檢測到渲染期生命週期的預期之外的副作用。
這些生命週期有：
constructor
componentWillMount (或者 UNSAFE_componentWillMount)
componentWillReceiveProps (或者 UNSAFE_componentWillReceiveProps)
componentWillUpdate (或者 UNSAFE_componentWillUpdate)
getDerivedStateFromProps
shouldComponentUpdate
render
setState 更新函式 (第一個引數)
所有這些方法都被呼叫不止一次，所以避免副作用是十分重要的。如果我們無視這個原則，就有可能造成狀態不一致問題或者記憶體洩漏。
React.StrictMode 不能馬上檢測到副作用，但是它可以通過故意呼叫一些關鍵函式兩次，來幫助我們發現副作用。
這些函式有:
類元件 constructor、render 以及 shouldComponentUpdate 方法
類元件靜態 getDerivedStateFromProps 方法
方法元件的方法體
狀態更新函式 (setState 的第一個引數)
傳給 useState、useMemo、或 useReducer 的函式
這個行為肯定對效能有一些影響，但我們不應該擔心，因為它只在開發而不是生產環境中發生。
這就是我們只有在開發環境下使用帶 React.useState 的元件函式，才可以成功復現渲染兩次的原因。