\n\nEstos documentos son antiguos y no se actualizarán. Vaya a react.dev para ver los nuevos documentos de React.
\nEstas nuevas páginas de documentación enseñan React moderno:
\n\n
React es el punto de entrada a la biblioteca de React. Si se carga React desde una etiqueta <script>, estas API de alto nivel estarán disponibles en el React global. Si se usa ES6 con npm se puede escribir import React from 'react'. Si se usa ES5 con npm, se puede escribir var React = require('react').
Los componentes de React permiten dividir la UI en piezas independientes, reusables y pensar acerca de cada pieza aisladamente. Los componentes de React pueden ser definidos creando subclases React.Component o React.PureComponent.
Si no se usan las clases ES6, se puede usar el módulo create-react-class. Para más información, ver Usar React sin ES6.
Los componentes de React también pueden ser definidos como funciones que se pueden envolver:
\nReact.memoSe recomienda usar JSX para describir cómo debe verse la UI. Cada elemento de JSX es solo un azúcar sintáctico para llamar React.createElement(). Normalmente no se recurrirá a los siguientes métodos directamente si se está usando JSX.
Para más información, ver Usar React sin JSX.
\nReact proporciona varias API para manipular elementos:
React también proporciona un componente para renderizar múltiples elementos sin un contenedor.
React.FragmentSuspense permite que los componentes “esperen” algo antes de renderizar. Hoy Suspense solo mantiene un caso de uso: cargar componentes activamente con React.lazy. En el futuro mantendrá otros casos de uso como captura de datos.
React.lazyReact.SuspenseTransitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.
\n\nLos Hooks son una nueva adición en React 16.8. Permiten usar el estado y otras características de React sin escribir una clase. Los Hooks tienen una sección de documentos dedicados y una referencia API separada:
\nuseStateuseEffectuseContextReact.Component \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nComponent.
React.Component es la clase base para los componentes de React cuando estos son definidos usando clases ES6:
class Greeting extends React.Component {\n render() {\n return <h1>Hello, {this.props.name}</h1>;\n }\n}Consulta Referencia API React.Component para ver una lista de métodos y propiedades relacionadas a la clase base React.Component.
React.PureComponent \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nPureComponent.
React.PureComponent es similar a React.Component. La diferencia entre ellos es que React.Component no implementa shouldComponentUpdate(), pero React.PureComponent lo implementa con un prop superficial y una comparación del estado.
Si la función render() del componente de React renderiza el mismo resultado dados los mismos props y estado, se puede usar React.PureComponent para una mejora en el desempeño en algunos casos.
\n\nNota
\n\n
shouldComponentUpdate()delReact.PureComponentsolo compara superficialmente los objetos. Si estos contienen estructuras de datos complejos pueden producir falsos negativos para diferencias más profundas. Solo se extiendePureComponentcuando se espera tener los props y el estado simples o usarforceUpdate()cuando se sabe que las estructuras de datos profundos han cambiado. O considera usar objetos inmutables para facilitar comparaciones rápidas de los datos anidados.Además,
\nshouldComponentUpdate()delReact.PureComponentomite las actualizaciones de los props para todo el componente del subárbol. Asegúrate que todos los componentes hijos también sean “puros”.
React.memo \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nmemo.
const MyComponent = React.memo(function MyComponent(props) {\n /* renderiza usando props */\n});React.memo es un componente de orden superior.
Si el componente renderiza el mismo resultado dadas las mismas props, se puede envolver en una llamada a React.memo para una mejora en el desempeño en algunos casos memoizando el resultado. Esto significa que React omitirá renderizar el componente y reusará el último resultado renderizado.
React.memo solamente verifica los cambios en las props. Si tu componente de función envuelto en React.memo tiene un Hook useState, useReducer o useContext en su implementación, continuará volviéndose a renderizar cuando el estado o el contexto cambien.
Por defecto solo comparará superficialmente objetos complejos en el objeto de props. Si se desea controlar la comparación, se puede proporcionar también una función de comparación personalizada como el segundo argumento.
\nfunction MyComponent(props) {\n /* renderiza usando props */\n}\nfunction areEqual(prevProps, nextProps) {\n /*\n retorna true si al pasar los nextProps a renderizar retorna\n el mismo resultado que al pasar los prevProps a renderizar,\n de otro modo retorna false\n */\n}\nexport default React.memo(MyComponent, areEqual);Este método solamente existe como una optimización del desempeño. No dependas de ello para “evitar” un renderizado, ya que puede conducir a errores.
\n\n\nNota
\nA diferencia del método
\nshouldComponentUpdate()en los componentes de clases, la funciónareEqualretornatruesi los props son iguales yfalsesi los props no son iguales. Esto es lo opuesto ashouldComponentUpdate.
createElement() \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\ncreateElement.
React.createElement(\n type,\n [props],\n [...children]\n)Crea y retorna un nuevo elemento React del tipo dado. El tipo del argumento puede ser ya sea un string de nombre de etiqueta (tales como 'div' o 'span'), un tipo de componente React (una clase o una función), o un tipo de fragmento React .
El código escrito con JSX será convertido para usar React.createElement(). Normalmente no se invocará React.createElement() directamente si se está usando JSX. Para aprender más, ver React Sin JSX.
cloneElement() \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\ncloneElement.
React.cloneElement(\n element,\n [config],\n [...children]\n)Clona y retorna un elemento React usando element como punto de partida. config debe contener todas las nuevas props, key, o ref. El elemento resultante tendrá las props del elemento original con las nuevas props combinadas superficialmente. Los nuevos hijos reemplazarán los hijos existentes. key y ref del elemento original serán preservadas si key y ref no están presentes en la configuración.
React.cloneElement() es casi equivalente a:
<element.type {...element.props} {...props}>{children}</element.type>Sin embargo, también preserva las refs. Esto significa que, si se obtiene un hijo con una ref en él, no la robará accidentalmente de su ancestro. Se obtendrá la misma ref adjunta al nuevo elemento. Las nuevas ref o key reemplazarán a las antiguas si estuviesen presentes.
Esta API fue introducida como un reemplazo al obsoleto React.addons.cloneWithProps().
createFactory() \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\ncreateFactory.
React.createFactory(type)Retorna una función que produce elementos React de un tipo dado. Como React.createElement(), el tipo del argumento puede ser un string de nombre de etiqueta (como 'div' o 'span'), un tipo de componente React (una clase o una función) o un fragmento React.
Este auxiliar es considerado antiguo y en su lugar fomentamos el uso de JSX o de React.createElement().
Normalmente no se invocará React.createFactory() directamente si se está usando JSX. Para aprender más, ver React sin JSX.
isValidElement() \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nisValidElement.
React.isValidElement(object)Verifica que el objeto sea un elemento React. Retorna true o false.
React.Children \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nChildren.
React.Children proporciona utilidades para lidiar con la estructura de datos opaca de this.props.children.
React.Children.map React.Children.map(children, function[(thisArg)])Invoca una función en cada hijo inmediato dentro de children con this establecido a thisArg. Si children es un array, será recorrido y la función será llamada para cada hijo en el array. Si children es null o undefined, este método retornará null o undefined en vez de un array.
\n\nNota
\nSi
\nchildrenes unFragmentserá tratado como un hijo único y no será recorrido.
React.Children.forEach React.Children.forEach(children, function[(thisArg)])Es como React.Children.map() pero no retorna un array.
React.Children.count React.Children.count(children)Retorna el número total de componentes en children, igual al número de veces que un callback pasado a map o forEach sería invocado.
React.Children.only React.Children.only(children)Verifica que children solo tenga un hijo (un elemento React) y lo retorna. De otro modo este método lanza un error.
\n\nNota:
\n\n
React.Children.only()no acepta el valor retornado deReact.Children.map()porque es un array en lugar de un elemento React.
React.Children.toArray React.Children.toArray(children)Retorna la estructura de datos opaca de children como un array plano con keys asignadas a cada hijo. Es útil si se desea manipular colecciones de hijos en los métodos de renderización, particularmente si se desea reordenar o segmentar this.props.children antes de pasarlo.
\n\nNota:
\n\n
React.Children.toArray()cambia las keys para preservar las semánticas de los array anidados cuando se aplanan listas de hijos. Esto quiere decir quetoArrayantepone cada key en el array retornado de modo que cada elemento de key esté dentro del alcance del array de entrada que lo contiene.
React.Fragment \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nFragment.
El componente React.Fragment permite retornar elementos múltiples en un método de render() sin crear un elemento DOM adicional:
render() {\n return (\n <React.Fragment>\n Some text.\n <h2>A heading</h2>\n </React.Fragment>\n );\n}También se puede usar con la sintaxis abreviada <></>. Para más información, ver React v16.2.0: Soporte mejorado para fragmentos.
React.createRef \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\ncreateRef.
React.createRef crea un ref que puede ser adjunto a los elementos React por medio del atributo ref.\n
class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n\n this.inputRef = React.createRef(); }\n\n render() {\n return <input type=\"text\" ref={this.inputRef} />; }\n\n componentDidMount() {\n this.inputRef.current.focus(); }\n}React.forwardRef \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nforwardRef.
React.forwardRef crea un componente React que envía el atributo ref que recibe a otro componente más abajo en el árbol. Esta técnica no es muy común, pero es particularmente útil en dos escenarios:
React.forwardRef acepta una función de renderizado como un argumento. React llamará esta función con props y ref como dos argumentos. Esta función debe retornar un nodo React.
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className=\"FancyButton\"> {props.children}\n </button>\n));\n\n// Ahora puedes obtener un ref directamente al botón del DOM\nconst ref = React.createRef();\n<FancyButton ref={ref}>Click me!</FancyButton>;En el ejemplo anterior, React pasa un ref dado a un elemento <FancyButton ref={ref}> como un segundo argumento a la función de renderizado dentro de la llamada React.forwardRef. Esta función de renderizado pasa el ref al elemento <button ref={ref}>.
Como resultado, después que React adjunte el ref, ref.current apuntará directamente a la instancia del elemento DOM <button>.
Para más información, ver reenvío de refs.
\nReact.lazy \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nlazy.
React.lazy() permite definir un componente que es cargado dinámicamente. Esto ayuda a reducir el tamaño del bundle para demorar los componentes de carga que no son usados durante la renderización inicial.
Puedes aprender cómo usarlo desde nuestra documentación de división de código. También puedes consultar este artículo que explica cómo usarlo con más detalle.
\n// Este componente está cargado dinámicamente\nconst SomeComponent = React.lazy(() => import('./SomeComponent'));Ten en cuenta que renderizar componentes lazy requiere que haya un componente <React.Suspense> más alto en el árbol de renderización. Así es como se especifica un indicador de carga.
React.Suspense \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nSuspense.
React.Suspense permite especificar el indicador de carga en caso de que algunos componentes en el árbol más abajo de él todavía no estén listos para renderizarse. En el futuro planeamos permitir a Suspense manejar más escenarios como la carga de datos. Puedes leer más sobre este tema en nuestra hoja de ruta.
Hoy en día, los componentes de carga diferida son el único caso compatible con <React.Suspense>:
// Este componente está cargado dinámicamente\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n return (\n // Muestra <Spinner> hasta que OtherComponent cargue\n <React.Suspense fallback={<Spinner />}>\n <div>\n <OtherComponent />\n </div>\n </React.Suspense>\n );\n}Esto está documentado en nuestra guía de división de código. Ten en cuenta que los componentes lazy pueden estar muy profundo en el árbol Suspense — no tiene que envolverlos a todos. La mejor práctica es colocar <Suspense> donde se desee ver un indicador de carga y usar lazy() para hacer división de código.
\n\nNote
\nFor content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the “old” UI while the new UI is being prepared. To do this, you can use the new transition APIs
\nstartTransitionanduseTransitionto mark updates as transitions and avoid unexpected fallbacks.
React.Suspense in Server Side Rendering During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending.\nWhen a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.
\nReact.Suspense during hydration Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more
\nReact.startTransition \n\nEste contenido está desactualizado.
\nLea la nueva documentación de React para
\nstartTransition.
React.startTransition(callback)React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.
\n","frontmatter":{"title":"API de Alto Nivel de React","next":null,"prev":null},"fields":{"path":"content/docs/reference-react.md","slug":"docs/react-api.html"}}},"pageContext":{"slug":"docs/react-api.html"}},"staticQueryHashes":[]}Note:
\nUpdates in a transition yield to more urgent updates such as clicks.
\nUpdates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
\n\n
React.startTransitiondoes not provide anisPendingflag. To track the pending status of a transition seeReact.useTransition.