React笔记本

为什么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

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

版权声明:著作权归作者所有。

thumb_up 0 | star_outline 0 | textsms 0