Следующий код дважды распечатывается в консоли веб-сайта codeandbox.io (в этой версии используется StrictMode), а также в приведенном ниже фрагменте (без использования StrictMode):
const { useState, useEffect } = React;
function useCurrentTime() {
const [timeString, setTimeString] = useState("");
useEffect(() => {
const intervalID = setInterval(() => {
setTimeString(new Date().toLocaleTimeString());
}, 100);
return () => clearInterval(intervalID);
}, []);
return timeString;
}
function App() {
const s = useCurrentTime();
console.log(s);
return <div className="App">{s}</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>Демо: https://codesandbox.io/s/gallant-bas-3lq5w?file=/src/App.js (с использованием StrictMode)
Вот фрагмент с использованием производственных библиотек; он по-прежнему регистрируется дважды:
const { useState, useEffect } = React;
function useCurrentTime() {
const [timeString, setTimeString] = useState("");
useEffect(() => {
const intervalID = setInterval(() => {
setTimeString(new Date().toLocaleTimeString());
}, 100);
return () => clearInterval(intervalID);
}, []);
return timeString;
}
function App() {
const s = useCurrentTime();
console.log(s);
return <div className="App">{s}</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>Однако, когда я открываю консоль разработчика, я вижу, что каждый раз распечатывается только один раз, а также в консоли codeandbox.io я вижу, что он распечатывается один раз.
А затем, если я создам автономное приложение React с помощью create-react-app и использую приведенный выше код, и каждый раз он печатается дважды.
Как понимать такое поведение, если распечатать один или два раза в зависимости от разных ситуаций? Я думал, что если состояние изменится, то App будет повторно отрисован с этой новой строкой, один раз, поэтому он распечатывается один раз. Что странно, особенно почему он распечатывается дважды, а когда консоль разработчика открыта, то один раз?
StrictMode. - person T.J. Crowder schedule 08.03.2021StrictMode, который, кажется, дважды вызывает журнал рендеринга и консоли в качестве побочного эффекта. - person Drew Reese schedule 08.03.2021StrictMode, я вижу время, зарегистрированное дважды ... какое-то время, а затем они просто регистрируются один раз. - person T.J. Crowder schedule 08.03.2021StrictMode, я все равно вижу двойное ведение журнала. Если я применяю решение консольного входа вuseEffectхук, я вижу только одно журналирование, как я и ожидал. - person Drew Reese schedule 08.03.2021StrictMode, и он все еще был дважды, а также в производственной сборке, якобы он не должен отображаться дважды, даже сStrictModeтам - person nonopolarity schedule 08.03.2021setTimeString, если это изменение, поведение исчезнет. Итак, он вызываетsetTimeStringс той же строкой, которая его вызывает ... а на самом деле этого не должно быть. (Это безStrictModeи с использованием производственных, а не разрабатываемых библиотек.) Здесь определенно есть что-то, о чем я не знаю. Я думал, что вызов установщика состояния с тем же значением был практически бесполезным. - person T.J. Crowder schedule 08.03.2021