Функциональный компонент рендерит четыре раза - почему не дважды? - PullRequest
Новая
       15

Функциональный компонент рендерит четыре раза - почему не дважды?

4 голосов
/ 10 апреля 2020

Я сталкивался с этим простым функциональным компонентом React, который рендерится четыре раза, в то время как я ожидаю, что он будет визуализироваться один раз изначально, выполнять useEffect, который обновляет состояние и, следовательно, рендерится снова. Вместо этого консоль отправляет 4 вывода журнала, указывая, что она рендерится четыре раза. Любая идея, почему и какие ресурсы на базовом жизненном цикле реагирующих функциональных компонентов c? 

const { useState, useEffect } = React;

function App() {
  const [jobs, setJobs] = useState([]);

  useEffect(() => setJobs(["test"]), []);

  console.log("APP", jobs);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{jobs}</div>
    </div>
  );
}

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

https://codesandbox.io/s/solitary-tree-t120d?file= / src / App. js: 149-191

1 Ответ

3 голосов
/ 10 апреля 2020

Это происходит потому, что в вашем коде и ящике вы используете <React.StrictMode>, чтобы обернуть <App />.

Документы специально указывают (https://reactjs.org/docs/strict-mode.html):

Строгий режим не может автоматически определять для вас побочные эффекты, но он может помочь вам определить их, сделав их немного более детерминированными c. Это делается путем намеренного двойного вызова следующих функций:

Компонент класса constructor, render и shouldComponentUpdate методы
....

...