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

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

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


reactjs javascript lifecycle
person Ali Nasserzadeh    schedule 10.04.2020    source источник
comment
@ T.J. Crowder не артефакт. В index.js они оборачивают <App/> в <React.StrictMode>. Вот что его вызывает.   -  person Gabriele Petrioli    schedule 10.04.2020
comment
Я понимаю @ T.J.Crowder, это отличный пример того, почему весь код актуален, я добавлю его к вопросу, если кто-то еще наткнется на то же самое   -  person Ali Nasserzadeh    schedule 10.04.2020
comment
@AliNasserzadeh - Я уже сделал это за вас. :-)   -  person T.J. Crowder    schedule 10.04.2020
comment
@ T.J.Crowder, потому что из-за используемой вами из CDN производственной версии, производственная версия не будет запускать строгий режим по соображениям производительности.   -  person Ali Nasserzadeh    schedule 10.04.2020
comment
@AliNasserzadeh - Да, я разобрался и исправил. :-)   -  person T.J. Crowder    schedule 10.04.2020

Ответы (1)


arrow_upward
3
arrow_downward

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

В документах конкретно указано (https://reactjs.org/docs/strict-mode.html):

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

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

person Gabriele Petrioli    schedule 10.04.2020