React: Неожиданный вызов компонента функции с использованием useState

Созданный на 20 дек. 2019 · 3Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?

вопрос

Каково текущее поведение?

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Child() {
  console.log("Child render");
  return null;
}

function App() {
  const [count, setCount] = useState(0);

  console.log("Render");

  useEffect(() => {
    console.log("count changed", count);
  }, [count]);

  return (
    <div>
      <h2>UseState</h2>
      <p>clicked: {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setCount(count);
        }}
      >
        +0
      </button>
      <Child />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В этом примере подсчета есть две кнопки. Щелчок по одному приводит к подсчету + 1 ， по другому - без изменений. Если сначала нажать кнопку «Нет изменений», «Рендеринг» не будет зарегистрирован. Но если сначала нажать кнопку +1, а затем нажать anthor ， «Рендеринг» будет отображаться дважды, а «Дочерний рендеринг» будет отображаться только один раз.

Я нашел объяснение в документе.

Если вы обновите State Hook до того же значения, что и текущее состояние, React выйдет из строя без рендеринга дочерних элементов или эффектов запуска. (React использует алгоритм сравнения Object.is.)

Обещает ли React только то, что компонент Children не будет отображаться в этой ситуации? Текущий компонент все еще может быть отрисован?

Это пример в песочнице.

https://codesandbox.io/s/long-firefly-nz5px?fontsize=14&hidenavigation=1&theme=dark

Какие версии React и какой браузер / ОС подвержены этой проблеме?

"реагировать": "^ 16.12.0",
"react-dom": "^ 16.12.0",

Question

Источник

yqz0203

Самый полезный комментарий

Этот вопрос не столько похож на «ошибку», сколько на вопрос для уточнения? :улыбка:

В следующем абзаце под разделом документов, на которые вы ссылаетесь, говорится следующее:

Обратите внимание, что React все равно может потребоваться снова отрендерить этот конкретный компонент перед выходом из строя. Это не должно вызывать беспокойства, потому что React не будет без надобности «углубляться» в дерево.

React выручает раньше, когда знает, что это безопасно. В некоторых случаях требуется немного больше работы, чтобы быть уверенным в том, что спасение безопасно.

Причины, по которым это не может быть объяснено, не углубляясь в текущие детали реализации, которые, вероятно, не будут так полезны, и они, вероятно, изменятся в следующем выпуске, поскольку мы продолжаем работать над новыми API, такими как параллельный режим. и неизвестность.

Хорошая новость заключается в том, что, как упоминается в документации, объем дополнительной работы, которую React выполняет в любом случае, должен быть небольшим!

bvaughn 20 дек. 2019

👍2

Все 3 Комментарий

Этот вопрос не столько похож на «ошибку», сколько на вопрос для уточнения? :улыбка:

В следующем абзаце под разделом документов, на которые вы ссылаетесь, говорится следующее:

Обратите внимание, что React все равно может потребоваться снова отрендерить этот конкретный компонент перед выходом из строя. Это не должно вызывать беспокойства, потому что React не будет без надобности «углубляться» в дерево.

bvaughn 20 дек. 2019

👍2

Этот вопрос не столько похож на «ошибку», сколько на вопрос для уточнения? 😄
В следующем абзаце под разделом документов, на которые вы ссылаетесь, говорится следующее:
Обратите внимание, что React все равно может потребоваться снова отрендерить этот конкретный компонент перед выходом из строя. Это не должно вызывать беспокойства, потому что React не будет без надобности «углубляться» в дерево.
React выручает раньше, когда знает, что это безопасно. В некоторых случаях требуется немного больше работы, чтобы быть уверенным в том, что спасение безопасно.
Причины, по которым это не может быть объяснено, не углубляясь в текущие детали реализации, которые, вероятно, будут не так полезны, и они, вероятно, изменятся в следующем выпуске, поскольку мы продолжаем работать над новыми API, такими как параллельный режим и неизвестность.
Хорошая новость заключается в том, что, как упоминается в документации, объем дополнительной работы, которую React выполняет в любом случае, должен быть небольшим!

Спасибо, какой неосторожный человек! 😁

yqz0203 23 дек. 2019

Не стоит беспокоиться! 😄

bvaughn 25 дек. 2019

Была ли эта страница полезной?

0 / 5 - 0 рейтинги