React render twice bug

React render twice bug

React bug

constructor render twice bug

update render twice bug

StrictMode

https://reactjs.org/docs/strict-mode.html

StrictMode 是用于突出显示应用程序中潜在问题的工具。
与Fragment一样，StrictMode不会呈现任何可见的UI。
它为后代激活其他检查和警告。

注意： 严格模式检查仅在开发模式下运行；它们不会影响生产。

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

demos

render twice bug ❌

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

render once OK ✅

ReactDOM.render(
  <>
    <App />
  </>,
  document.getElementById('root')
);

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---