Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como reconciliación

Reconciliación entre Virtual DOM y DOM real (React)

  Exacto, Gabriel 🙌. Te muestro dos ejemplos en React para que veas claramente lo que decías: cuando React cree que un nodo está vacío, borra lo que D3 dibujó, y cómo evitarlo. 🔹 Ejemplo 1: React borra lo que dibuja D3 tsx import React, { useEffect, useRef, useState } from "react"; import * as d3 from "d3"; export default function ConflictExample() { const [toggle, setToggle] = useState(false); const svgRef = useRef<SVGSVGElement>(null); useEffect(() => { const svg = d3.select(svgRef.current); svg.append("circle") .attr("cx", 50) .attr("cy", 50) .attr("r", 30) .attr("fill", "red"); }, []); return ( <div> <button onClick={() => setToggle(!toggle)}>Cambiar estado</button> <svg ref={svgRef} width={200} height={200}> {/* React cree que el SVG está vacío, así que al cambiar estado borra lo que D3 dibujó */}...