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