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 como componentDidMount , componentDidUpdate y componentWillUnmount 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', () => {}) } }, [])

gancho useComponentWillMount

 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.

gancho useComponentDidMount

 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.

paradigma useEffect

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.

El componente montará la discusión

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.