¿Qué es la pureza, una función pura y un componente puro?
En JavaScript, cuando una función no muta objetos sino que simplemente devuelve un objeto nuevo, se denomina función pura.
Una función, o un método, para ser llamadopurono debe causar efectos secundarios y debe devolver la misma salida cuando se llama varias veces con la misma entrada.
Una función pura toma una entrada y devuelve una salida sin cambiar la entrada ni nada más.
Su salida solo está determinada por los argumentos. Puede llamar a esta función 1 M veces, y dado el mismo conjunto de argumentos, la salida siempre será la misma.
React aplica este concepto a los componentes. Un componente de React es un componente puro cuando su salida solo depende de sus accesorios.
Todos los componentes funcionales son componentes puros:
const Button = props => {
return <button>{props.message}</button>
}
Los componentes de la clase pueden ser puros si su salida solo depende de los accesorios:
class Button extends React.Component {
render() {
return <button>{this.props.message}</button>
}
}
Descarga mi gratisReact Handbook
Más tutoriales de react:
- Un ejemplo de aplicación simple de React: obtenga información de los usuarios de GitHub a través de la API
- Construye un contador simple con React
- Configuración de VS Code para el desarrollo de React
- Cómo pasar accesorios a un componente secundario a través de React Router
- Crea una aplicación con Electron y React
- Tutorial: crea una hoja de cálculo usando React
- La hoja de ruta para aprender React
- Aprenda a usar Redux
- Empezando con JSX
- Componentes con estilo
- Introducción a Redux Saga
- Introducción a React Router
- Introducción a React
- Reaccionar componentes
- El DOM virtual
- Reaccionar eventos
- El estado de reacción
- Reaccionar apoyos
- El fragmento de reacción
- La API React Context
- Reaccionar PropTypes
- Reaccionar conceptos: declarativo
- Reaccionar: Cómo mostrar un componente diferente al hacer clic
- Cómo hacer un bucle dentro de React JSX
- Props vs State en React
- ¿Deberías usar jQuery o React?
- ¿Cuánto JavaScript necesitas saber para usar React?
- Introducción a Gatsby
- Cómo hacer referencia a un elemento DOM en React
- Flujo de datos unidireccional en React
- Reaccionar componentes de orden superior
- Reaccionar eventos del ciclo de vida
- Concepto de reacción: inmutabilidad
- Concepto de reacción: Pureza
- Introducción a React Hooks
- Introducción a create-react-app
- Concepto de reacción: Composición
- Reaccionar: componentes de presentación frente a contenedores
- División de código en React
- Representación del lado del servidor con React
- Cómo instalar React
- CSS en React
- Usando SASS en React
- Manejo de formularios en React
- Reaccionar StrictMode
- Reaccionar portales
- Reaccionar accesorios de renderizado
- Prueba de componentes de React
- Cómo pasar un parámetro a los controladores de eventos en React
- Cómo manejar errores en React
- Cómo devolver múltiples elementos en JSX
- Representación condicional en React
- React, cómo transferir accesorios a componentes secundarios
- Cómo obtener el valor de un elemento de entrada en React
- Cómo utilizar el gancho useState React
- Cómo usar el gancho useCallback React
- Cómo utilizar el gancho useEffect React
- Cómo utilizar el gancho useMemo React
- Cómo utilizar el gancho useRef React
- Cómo usar el gancho useContext React
- Cómo utilizar el gancho useReducer React
- Cómo conectar su aplicación React a un backend en el mismo origen
- El tutorial de Reach Router
- Cómo utilizar las herramientas de desarrollo de React
- Cómo aprender React
- Cómo depurar una aplicación React
- Cómo renderizar HTML en React
- Cómo arreglar el error `dangerouslySetInnerHTML` no coincidió en React
- Cómo solucioné un problema con el estado del formulario de inicio de sesión de React y el autocompletado del navegador
- Cómo configurar HTTPS en una aplicación React en localhost
- Cómo corregir el error "no se puede actualizar un componente mientras se renderiza un componente diferente" en React
- ¿Puedo usar React hooks dentro de un condicional?
- Usar useState con un objeto: cómo actualizar
- Cómo moverse por bloques de código con React y Tailwind
- Reaccionar, enfocar un elemento en Reaccionar cuando se agrega al DOM
- Reaccionar, editar texto con doble clic