react脚手架模式中,严格模式下react render渲染两次的问题

今天用脚手架写东西,不小心把axios的请求直接在render中执行了,然后被我发现,数据请求了两次。虽然后来我又把封装的数据请求函数放在了componentDidMount中加载,但是,还是很郁闷为啥render被调了两次。

react脚手架模式中,严格模式下react render渲染两次的问题

react脚手架模式中,严格模式下react render渲染两次的问题
经过我的不懈努力,终于算是清楚了吧。但官网写的很难理解。

官网-严格模式:https://reactjs.org/docs/strict-mode.html

React在严格模式下会执行两次render以帮忙检查额外的副作用。-----sf某友

我个人的理解就是,虽然严格模式无法自动检测副作用,但react在严格模式下会有意地双重调用,只要把严格模式取消掉,就不会渲染两次啦。

不过,官网也说了,这仅适用于开发模式,在生产模式下,不会重复调用生命周期。