为什么React的render方法会执行两次？

最近在写React组件的时候，发现了一个奇怪的问题，就是组件的render方法总是执行两次。

import Card from './src/Card';
import FriendProfile from './src/FriendProfile';

export default function App() {
  console.log('render App');
  return (
    ....
  );
}

这段代码在执行的时候，render App总是会执行两次。

经过网上搜索，发现了原因是:

在运行App的时候使用了严格模式(strict mode)。如果不使用这样的运行模式，实际上是不会执行两次的。

同时需要记住的一点就是，React在执行两次渲染的过程中，也会执行React组件的生命周期函数，比如会先卸载组件，然后再加载组件，因此React的两个生命周期函数componentDidMount():以及componentWillUnmount(): 都会执行一次。

我们可以利用执行两次的机会，检查我们组件的函数是否包含副作用，因此可以起到减少bug的作用。

至于为什么要使用严格模式，官方的说法是，这种模式一般在我们开发过程中使用，产品部署以后就会忽略，至于开发阶段使用的原因是:

检测渲染阶段那些存在的不期望的副作用的函数，方便开发者找出bug。

好了，这里记录一下遇到的小问题和解决方法。