before render为什么执行了两遍

Question

老师，您好。在3-7节中，before render为什么执行了两遍，下面是结果和代码![图片描述](http://img1.sycdn.imooc.com//szimg/5e7766fc091dd7ca08950259.jpg

Answer 1

张轩 2020-03-24 21:00:04

两位同学好  今天研究了一下 应该是最新版的 create-react-app 创建的 index.js 根文件有变化。它会多包裹一个 react strictmode。https://zh-hans.reactjs.org/docs/strict-mode.html

ReactDOM.render(
<React.StrictMode>
    <App />
  </React.StrictMode>,
rootElement
);

他会造成一引入 useState hook 就多渲染一次，应该是再做一些检察工作。去掉以后就没问题了。

• 提问者 qq_感觉_11 #1

  谢谢老师，确实是这个问题，不过根据文档描述这个严格模式应该留下吧？

• 张轩 回复 提问者 qq_感觉_11 #2

  对的 在生产环境这个是没有作用 自动忽略的 所以留下就好

• yxnne #3

  老师，我的问题转到这里了，https://coding.imooc.com/learn/questiondetail/177966.html

Answer 2

张轩 2020-03-23 10:11:57

同学你好 我用我的代码在本地测试没有这个问题 光看你这个组件来说 也没有什么问题 是不是你使用这个组件的父组件有一些更新的操作 导致了这个组件的再次更新？

• MeSKiL #1

  老师我也是和他一样的问题，我外层的app.tsx只放了这一个组件。
  return (<MouseTracker />)，但是每次点击都会render两次