En los documentos oficiales de React menciona:
Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en useEffect Hook como componenteDidMount, componenteDidUpdate y componenteWillUnmount combinados.
Mi pregunta es: ¿cómo podemos usar el método de ciclo de vida del componentWillMount()
en un enlace?
No puede usar ninguno de los métodos de ciclo de vida existentes ( componentDidMount
, componentDidUpdate
, componentWillUnmount
, etc.) en un enlace. Solo se pueden usar en componentes de clase. Y con Hooks solo puedes usarlo en componentes funcionales. La siguiente línea proviene del documento React:
Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en
useEffect
Hook comocomponentDidMount
,componentDidUpdate
ycomponentWillUnmount
combinados.
Sugerimos que puede imitar este método de ciclo de vida del componente de clase en componentes funcionales.
El código dentro de componentDidMount
se ejecuta una vez cuando se monta el componente. useEffect
gancho equivalente para este comportamiento es
useEffect(() => { // Your code here }, []);
Observe el segundo parámetro aquí (matriz vacía). Esto se ejecutará solo una vez.
Sin el segundo parámetro , se llamará al gancho useEffect
en cada representación del componente, lo que puede ser peligroso.
useEffect(() => { // Your code here });
componentWillUnmount
se usa para la limpieza (como eliminar detectores de eventos, cancelar el temporizador, etc.). Digamos que está agregando un detector de eventos en componentDidMount
y eliminándolo en componentWillUnmount
como se muestra a continuación.
componentDidMount() { window.addEventListener('mousemove', () => {}) } componentWillUnmount() { window.removeEventListener('mousemove', () => {}) }
El gancho equivalente al código anterior será el siguiente
useEffect(() => { window.addEventListener('mousemove', () => {}); // returned function will be called on component unmount return () => { window.removeEventListener('mousemove', () => {}) } }, [])
const useComponentWillMount = (cb) => { const willMount = useRef(true) if (willMount.current) cb() willMount.current = false }
Este enlace podría ser un ahorro cuando hay un problema de secuencia (como ejecutar antes de otro script). Si ese no es el caso, use useComnponentDidMount, que está más alineado con el paradigma de ganchos React.
const useComponentDidMount = cb => useEffect(cb, []);
Si sabe que su efecto solo debe ejecutarse una vez al principio, use esta solución. Se ejecutará solo una vez después de que se haya montado el componente.
Los componentes de clase tienen métodos de ciclo de vida que se definen como puntos en la escala de tiempo del componente. Los ganchos no siguen este paradigma. En cambio, los efectos deben estructurarse por su contenido.
function Post({postID}){ const [post, setPost] = useState({}) useEffect(()=>{ fetchPosts(postID).then( (postObject) => setPost(postObject) ) }, [postID]) ... }
En el ejemplo anterior, el efecto trata de obtener el contenido de una publicación. En lugar de un cierto punto en el tiempo, tiene un valor del que depende: postID
. Cada vez postID
obtenga un nuevo valor (incluida la inicialización), se volverá a ejecutar.
En los componentes de clase, el componente WillMount se considera heredado ( fuente 1 , fuente2 ). Es heredado, ya que puede ejecutarse más de una vez, y existe una alternativa: usar el constructor. Esas consideraciones no son relevantes para un componente funcional.