Soy bastante nuevo en React.js/javascript y estoy trabajando en un nuevo proyecto, me gustaría poder actualizar manualmente mi componente (debido a algunas limitaciones de la biblioteca de terceros) cuando sea necesario.
Después de buscar, modifiqué un patrón del sitio oficial que parece satisfacer mis necesidades utilizando el enlace useState (aunque no se recomienda). A continuación se muestra un componente extremadamente simplificado para la prueba, se necesita useRef en mi escenario.
Lo que me pregunto es por qué la función de actualización se puede llamar correctamente en useRef, ¿tiene esto algo que ver con la elevación, o es más una reacción, como la secuencia de ejecución de los ganchos que se modifican bajo el capó?
https://codesandbox.io/s/useref-usestate-test-0x0hhb?file=/src/App.js
import {useEffect, useRef, useState} from 'react' export default function App() { const testRef = useRef(()=>{ console.log('testRef called'); update({}); }) const [, update]= useState({}); useEffect(()=>{ console.log('updated'); }); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2> <button onClick={()=>testRef.current()}> Test </button> </h2> </div> ); }No se trata de levantar o React haciendo algo debajo del capó: update es un nombre en el ámbito que cierra useRef . (También podría ser un nombre en otro ámbito, o podría no estar definido. No importa). De hecho, como muestra el siguiente ejemplo, esto es solo JavaScript y nada específico de React.
Solo habría un problema si llamara a testRef.current() antes de la línea const [, update] = ... (ya que g está en la zona muerta temporal ):
function x() { const f = () => { g(); }; f(); const g = () => console.log("ok"); } x();lanza
VM471:3 Uncaught ReferenceError: Cannot access 'g' before initialization at f (<anonymous>:3:9) at x (<anonymous>:5:5) at <anonymous>:9:1pero
function x() { const f = () => { g(); }; const g = () => console.log("ok"); f(); } x();solo imprime
okcomo era de esperar.