SharePoint Framework (SPFx) es una plataforma popular utilizada para desarrollar aplicaciones web y extensiones personalizadas en SharePoint. Como parte de SPFx, se utiliza React, una biblioteca de JavaScript de código abierto para construir interfaces de usuario.
React ha experimentado cambios significativos a lo largo de los años y ha introducido un nuevo concepto llamado React Hooks. En este artículo, veremos la diferencia entre React y React Hooks en SPFx y cómo se pueden utilizar para desarrollar aplicaciones en SharePoint.
React y React Hook
Con React se pueden construir interfaces de usuario reactivas y escalables. Este framework proporciona una forma declarativa de definir componentes reutilizables y permite la creación de aplicaciones basadas en componentes. Los componentes, además, son independientes y se pueden encapsular para aislar su comportamiento. La sintaxis utilizada es similar al HTML y se llama JSX, que combina JavaScript y XML.
Por otro lado, React Hooks es una característica introducida en React 16.8 que permite a los desarrolladores usar el estado y otras características de React sin escribir clases. Antes de los Hooks, para manejar el estado en los componentes de React, se requería el uso de clases y métodos de ciclo de vida como componentDidMount y componentDidUpdate para manejar el estado y los efectos secundarios. Sin embargo, con la introducción de Hooks, se pueden utilizar funciones regulares para manejar el estado y otros aspectos de React.
¿Cuál es la diferencia?
La principal diferencia entre React y React Hooks en SPFx radica en la forma en que se definen los componentes y se maneja el estado. En React, los componentes se definen utilizando clases de JavaScript y se extienden desde la clase base «Component».
En cambio, con React Hooks, los componentes se definen como funciones regulares y se utilizan los hooks proporcionados por React. Los hooks son funciones que se pueden usar en componentes funcionales de React para agregar funcionalidad adicional. Algunos de los hooks más comunes son useState, useEffect y useContext.
El hook más frecuentemente empleado es useState, el cual permite agregar estado local a un componente funcional.
¿Cómo desarrollar aplicaciones en SharePoint?
Tomemos como ejemplo un componente de contador en SPFx, donde podemos utilizar useState para mantener un estado de contador y actualizarlo cuando sea necesario. Mediante el hook useState, declaramos una variable de estado llamada «count» y una función «setCount» que nos permite actualizar dicho estado. Cada vez que se hace clic en el botón de incremento, activamos la función «setCount» para actualizar el estado del contador.
Además del hook useState, en SPFx es comúnmente utilizado el hook useEffect. Este hook permite llevar a cabo efectos secundarios en componentes funcionales, como la ejecución de código después de que el componente ha sido renderizado en el DOM.
Un caso de uso típico es realizar una solicitud a una API una vez que el componente ha sido montado. Para lograr esto, podemos emplear el hook useEffect de la siguiente manera:
En este ejemplo, usamos useEffect para definir una función asincrónica que realiza una solicitud de API y actualiza el estado con los datos recibidos. El segundo argumento de useEffect, una matriz vacía [], se utiliza para indicar que el efecto solo debe ejecutarse una vez después del montaje inicial del componente.
En resumen, la diferencia entre React y React Hooks en SPFx radica en cómo se definen los componentes y cómo se maneja el estado. React utiliza clases y métodos de ciclo de vida para definir componentes y manejar el estado, mientras que React Hooks permite definir componentes como funciones regulares y utilizar hooks para agregar funcionalidad de estado y efectos secundarios.
¿Necesitas más información sobre ambos? ¡Nuestros expertos están a tu disposición! ¡Rellena el formulario y se pondrán en contacto contigo! Además, puedes seguir leyendo todos nuestros tutoriales en nuestro blog.
Manuel Vitolo
Microsoft 365