react 的組件每次渲染執行兩次

React的組件，不管是class組件仍是函數組件，在開發模式下，每次渲染會執行兩次。

代碼以下：

import React from 'react'

let count = 0;

const Page = () => {

  count++

  console.log(`run ${count} times`)

  return (
    <div>Page</div>
  )
}

export default Page

效果：

這樣作是React刻意而爲之。

防止組件內有什麼side effect而引發bug，提早預防。

對於React而言，它推崇的是渲染結果只與state和props有關。即result=f(props, state).

若是組件每次的state和props是同樣的，就應該返回同樣的結果，若返回結果不同，說明代碼中可能存在反作用。

如示例中的count。

這樣能夠幫助開發者在開發的時候就發現一些問題，及時解決。

詳見issue