最新react-crate-app 新项目会建立 React.StrictMode带来的问题

今天新起了一个react项目,发现如下问题

  • index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
 <React.StrictMode>
   <App />,
 </React.StrictMode>,
 document.getElementById('root')
);
  • app.js
import React from 'react';

function Demo(props){
  console.log('demo')
  return (
    <div>

    </div>
  )
}

class ChildrenDemo extends React.Component {
  constructor(props){
    super(props)
    this.state = {}
    console.log('hello')
  }
  render(){
    return (
      <div>
        ChildrenDemo
      </div>
    )
  }
}
function App() {
  console.log('app--------');
  
  return (
    <div className="App">
      <ChildrenDemo></ChildrenDemo>
      <Demo></Demo>
    </div>
  );
}

export default App;

问题:

控制台居然函数组件 Demo只会输出一次demo , 但是类组件却打印了两次hello,当注释掉 index.js 中的<React.StrictMode> 就好了,请问这是啥意思?

结果查询了文档居然是:

发表评论

电子邮件地址不会被公开。 必填项已用*标注