React: Llamada inesperada del componente de función usando useState

Creado en 20 dic. 2019 · 3Comentarios · Fuente: facebook/react

¿Quieres solicitar una función o informar de un error ?

pregunta

¿Cuál es el comportamiento actual?

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);

Hay dos botones en este ejemplo de conteo. Hacer clic en uno hace que cuente + 1, otro hace que no cuente ningún cambio. Si primero hace clic en el botón sin cambios, no se registrará "Renderizar". Pero si primero hace clic en el botón +1 y luego hace clic en Anthor, "Render" se mostrará dos veces, pero "" Child render "solo se mostrará una vez.

Encontré la explicación en el documento.

Si actualiza un State Hook al mismo valor que el estado actual, React se retirará sin renderizar a los niños ni disparar efectos. (React usa el algoritmo de comparación Object.is).

¿React solo promete que el componente Children no se procesará en esta situación? ¿El componente actual todavía se puede renderizar?

Este es un ejemplo en sandbox.

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

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?

"reaccionar": "^ 16.12.0",
"react-dom": "^ 16.12.0",

Question

Fuente

yqz0203

Comentario más útil

¿Este problema no parece un "error" sino una pregunta de aclaración? :sonrisa:

El siguiente párrafo debajo de la sección de los documentos a los que hizo referencia dice esto:

Tenga en cuenta que React todavía puede necesitar renderizar ese componente específico nuevamente antes de rescatar. Eso no debería ser una preocupación porque React no se adentrará innecesariamente en el árbol.

Reaccionar se rescata temprano cuando sabe que es seguro hacerlo. En algunos casos, necesita hacer un poco más de trabajo para asegurarse de que sea seguro rescatar.

Las razones de por qué esto no se pueden explicar sin profundizar en los detalles de la implementación actual, que probablemente no serían tan útiles y es probable que cambien en una próxima versión a medida que continuamos trabajando en nuevas API como el modo concurrente. y suspenso.

La buena noticia es que, como mencionan los documentos, ¡la cantidad de trabajo adicional que React hace en cualquier caso debería ser pequeña!

bvaughn en 20 dic. 2019

👍2

Todos 3 comentarios

¿Este problema no parece un "error" sino una pregunta de aclaración? :sonrisa:

El siguiente párrafo debajo de la sección de los documentos a los que hizo referencia dice esto:

Tenga en cuenta que React todavía puede necesitar renderizar ese componente específico nuevamente antes de rescatar. Eso no debería ser una preocupación porque React no se adentrará innecesariamente en el árbol.

Reaccionar se rescata temprano cuando sabe que es seguro hacerlo. En algunos casos, necesita hacer un poco más de trabajo para asegurarse de que sea seguro rescatar.

La buena noticia es que, como mencionan los documentos, ¡la cantidad de trabajo adicional que React hace en cualquier caso debería ser pequeña!

bvaughn en 20 dic. 2019

👍2

¿Este problema no parece un "error" sino una pregunta de aclaración? 😄
El siguiente párrafo debajo de la sección de los documentos a los que hizo referencia dice esto:
Tenga en cuenta que React todavía puede necesitar renderizar ese componente específico nuevamente antes de rescatar. Eso no debería ser una preocupación porque React no se adentrará innecesariamente en el árbol.
Reaccionar se rescata temprano cuando sabe que es seguro hacerlo. En algunos casos, necesita hacer un poco más de trabajo para asegurarse de que sea seguro rescatar.
Las razones por las que esto no se puede explicar sin profundizar en los detalles de la implementación actual, que probablemente no serían tan útiles _y_ es probable que cambien en una próxima versión a medida que continuamos trabajando en nuevas API como el modo concurrente. y suspenso.
La buena noticia es que, como mencionan los documentos, ¡la cantidad de trabajo adicional que React hace en cualquier caso debería ser pequeña!

¡Gracias, qué hombre tan descuidado! 😁

yqz0203 en 23 dic. 2019

¡No hay problema! 😄

bvaughn en 25 dic. 2019

¿Fue útil esta página

0 / 5 - 0 calificaciones