react组件执行两次问题

83次阅读

共计 229 个字符,预计需要花费 1 分钟才能阅读完成。

无意中发现 react 渲染执行两次,开始以为是代码写错了,后来去网上查找发现原来并不是一个 bug。
React 在 开发环境下会刻意执行两次渲染,以防止组件内有什么 side effect 引起 bug,提前预防。
这里官方 github 上有作出解释:

从代码中来看

let a = 0
class App extends React.Component {render() {
    a = a + 1
    console.log(` 运行 ${a} 次 `)
    return (<div></div>)
  }
}

控制台显示结果运行了两次。

正文完
 0