En la primera entrada de esta serie de artículos sobre React.js, hablábamos sobre las diferentes formas de implementar componentes en React.js. Decíamos que hay componentes Stateless que se implementan con una función y, como su propio nombre indica, no tienen un estado (state) y tampoco se puede acceder a su ciclo de vida. El otro tipo, son los componentes Class que son componentes que se implementan con una clase de ES6 y, a diferencia de los Stateless, sí tienen un estado y se puede acceder al ciclo de vida del componente.
Pero en la versión 16.8 de React, se introdujeron los Hooks, que básicamente son funciones que nos permiten acceder al estado y al ciclo de vida de un componente funcional (Stateless).
Una de las ventajas de utilizar Hooks es que se simplifican mucho los componentes, es decir, se vuelven mucho más sencillos, cortos y fáciles de entender. Vamos a ver un ejemplo, transformando un Class Component a un Functional Component (Stateless) utilizando Hooks.
Para el ejemplo, he escogido el componente Post. Pero en el repositorio de GitHub, puedes ver todo el proyecto hecho con Hooks. Primero, vamos a ver el componente hecho con una clase ES6:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React from "react"; import PostItem from "../components/PostItem"; class Post extends React.Component { state = { post: null }; componentDidMount() { let postId = this.props.match.params.id; fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then(response => response.json()) .then(post => this.setState({ post })); } render() { if (this.state.post) { return ( <div> <PostItem post={this.state.post} /> </div> ); } else { return <p>Loading...</p>; } } } export default Post; |
Y ahora vamos a ver el componente hecho con una función y Hooks:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React, { useEffect, useState } from "react"; import PostItem from "../components/PostItem"; const Post = props => { const [post, setPost] = useState(null); useEffect(() => { let postId = props.match.params.id; fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then(response => response.json()) .then(postRes => setPost(postRes)); }, []); if (post) { return ( <div> <PostItem post={post} /> </div> ); } else { return <p>Loading...</p>; } }; export default Post; |
Vamos a ver un poco paso por paso los cambios que se han hecho respecto al Class Component.
Primero, transformamos el componente de una clase a una función arrow y la asignamos a una constante para después poder exportarla.
Para gestionar el estado del componente, utilizamos la función useState , la cual como parámetro recibe el estado inicial (en este caso, null) y devuelve 2 variables. Una es la variable con el valor actual ( post ) y la otra es la función que te permite actualizar esta variable ( setPost).
Como el componente es una función, no tenemos acceso al método componentDidMount de los componentes clase, pero existe un hook que hace lo mismo. Este hook es useEffect y el comportamiento es el mismo que el método componentDidMount.
Explicado un poco todo, puedes ver que los Hooks hacen más secillo el desarrollo de componentes. Pero, hay que dejar claro que, aunque hayan introducido los Hooks, no quiere decir que los Class Components queden obsoletos o en desuso, si no que es otra manera más de hacer las cosas, al menos por ahora.
Si quieres ver el resto de los componentes del proyecto con Hooks, puedes verlo aquí.
No solamente tenemos los Hooks que nos proporciona la librería React, si no que la comunidad ha creado muchísimos Hooks que puedes ver aquí o aquí.
-
- https://reactjs.org/docs/hooks-overview.html
- https://usehooks.com/
- https://github.com/rehooks/awesome-react-hooks
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR