метод визуализации реагирующего компонента вызывается дважды без причины - PullRequest
Новая
       64

метод визуализации реагирующего компонента вызывается дважды без причины

2 голосов
/ 28 марта 2020 
import './App.css';
import SolarSystem from './components/solarSystem/solarSystem';

class  App extends React.Component {
  componentDidMount(){
    console.log("mounting");
  }

  componentDidUpdate(){
    console.log("updating");
  }
  //const [SSVisibility, setSSVisibility] = useState(true);
  render(){ 
    console.log("rendering app");
    return (
    <div className="App">ssssssssssssssssssssssssssssssss
    {/*   <SolarSystem isShowing={"yolo"} toggle={"polo"}></SolarSystem> */}
    </div>
  );
}
}
export default App;

С этим простым кодом мой метод рендеринга вызывается дважды. И я не могу понять, почему enter image description here

1 Ответ

1 голос
/ 28 марта 2020

Это из-за строгого режима, код ниже не демонстрирует это, потому что SO создаст его с производственным набором true (я думаю). 

class Strict extends React.Component {
  componentDidMount() {
    console.log('mounting strict');
  }

  componentDidUpdate() {
    console.log('updating');
  }
  //const [SSVisibility, setSSVisibility] = useState(true);
  render() {
    console.log('rendering strict');
    return (
      <div className="App">
        {/*   <SolarSystem isShowing={"yolo"} toggle={"polo"}></SolarSystem> */}
      </div>
    );
  }
}
class NonStrict extends React.Component {
  componentDidMount() {
    console.log('mounting non strict');
  }

  componentDidUpdate() {
    console.log('updating');
  }
  //const [SSVisibility, setSSVisibility] = useState(true);
  render() {
    console.log('rendering Non strict');
    return (
      <div className="App">
        {/*   <SolarSystem isShowing={"yolo"} toggle={"polo"}></SolarSystem> */}
      </div>
    );
  }
}
const App = () => {
  return (
    <div>
      <React.StrictMode>
        <Strict />
      </React.StrictMode>
      <NonStrict />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...