Para la versión estable de ganchos (React Version 16.8.0+)

Para componentDidMount

 useEffect(() => { // Your code here }, []);

Para componentDidUpdate

 useEffect(() => { // Your code here }, [yourDependency]);

Para componentWillUnmount

 useEffect(() => { // componentWillUnmount return () => { // Your code here } }, [yourDependency]);

Entonces, en esta situación, debe pasar su dependencia a esta matriz. Supongamos que tienes un estado como este

const [count, setCount] = useState(0);

Y cada vez que aumenta el conteo, desea volver a procesar el componente de su función. Entonces su useEffect debería verse así

 useEffect(() => { // <div>{count}</div> }, [count]);

De esta manera, cada vez que su conteo se actualice, su componente se volverá a procesar. Espero que esto ayude un poco.

No existe un equivalente exacto para el componentDidMount en los ganchos de reacción.

En mi experiencia, los ganchos de reacción requieren una mentalidad diferente al desarrollarlos y, en general, no debes compararlos con los métodos de clase como componentDidMount .

Dicho esto, hay formas en las que puede usar ganchos para producir un efecto similar al componentDidMount .

Solución 1:

 useEffect(() => { console.log("I have been mounted") }, [])

Solución 2:

 const num = 5 useEffect(() => { console.log("I will only run if my deps change: ", num) }, [num])

Solución 3 (Con función):

 useEffect(() => { const someFunc = () => { console.log("Function being run after/on mount") } someFunc() }, [])

Solución 4 (usar devolución de llamada):

 const msg = "some message" const myFunc = useCallback(() => { console.log(msg) }, [msg]) useEffect(() => { myFunc() }, [myFunc])

Solución 5 (Ser creativo):

 export default function useDidMountHook(callback) { const didMount = useRef(null) useEffect(() => { if (callback && !didMount.current) { didMount.current = true callback() } }) }

Vale la pena señalar que la solución 5 solo debe usarse realmente si ninguna de las otras soluciones funciona para su caso de uso . Si decide que necesita la solución 5, le recomiendo usar este gancho prefabricado use-did-mount .

Fuente (con más detalle): uso de componentDidMount en ganchos de reacción

No hay componentDidMount en los componentes funcionales, pero React Hooks proporciona una forma de emular el comportamiento mediante el uso del gancho useEffect .

Pase una matriz vacía como segundo argumento a useEffect() para ejecutar solo la devolución de llamada solo en el montaje.

Lea la documentación sobre useEffect .

 function ComponentDidMount() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('componentDidMount'); }, []); return ( <div> <p>componentDidMount: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } ReactDOM.render( <div> <ComponentDidMount /> </div>, document.querySelector("#app") );

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>