es una biblioteca de JavaScript para crear interfaces de usuario. Esta chuleta está dirigida a las versiones de React 15 y 16.
Componentes
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}
const el = document.body
ReactDOM.render(<Hello name='John' />, el)
Utiliza React.js jsfiddle para comenzar a piratear. (o el jsbin no oficial )
Importar múltiples exportaciones
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class Hello extends Component {
...
}
Propiedades
<Video fullscreen={true} autoplay={false} />
render () {
this.props.fullscreen
const { fullscreen, autoplay } = this.props
···
}
Usa
this.props
para acceder a las propiedades pasadas al componente.
Ver: Propiedades
Estados
constructor(props) {
super(props)
this.state = { username: undefined }
}
this.setState({ username: 'rstacruz' })
render () {
this.state.username
const { username } = this.state
···
}
Utiliza estados (
this.state
) para administrar datos dinámicos.
Con Babel puede usar campos de clase de propuesta y deshacerse del constructor
class Hello extends Component {
state = { username: undefined };
...
}
Ver: Estados
Obtenga el libro:Aplicaciones React optimizadas para el rendimiento
Anidamiento
class Info extends Component {
render () {
const { avatar, username } = this.props
return <div>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</div>
}
}
A partir de React v16.2.0, los fragmentos se pueden usar para devolver varios hijos sin agregar nodos de envoltura adicionales al DOM.
import React, {
Component,
Fragment
} from 'react'
class Info extends Component {
render () {
const { avatar, username } = this.props
return (
<Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</Fragment>
)
}
}
Anidar componentes para separar preocupaciones.
Ver: Composición de componentes
Hijos
<AlertBox>
<h1>You have pending notifications</h1>
</AlertBox>
class AlertBox extends Component {
render () {
return <div className='alert-box'>
{this.props.children}
</div>
}
}
Los hijos se pasan como propiedades
children
.
Por defecto
Configuración de accesorios predeterminados
Hello.defaultProps = {
color: 'blue'
}
Ver: defaultProps
Configuración del estado predeterminado
class Hello extends Component {
constructor (props) {
super(props)
this.state = { visible: true }
}
}
Establezca el estado predeterminado en
constructor()
.
Y sin constructor usando Babel con campos de clase de propuesta .
class Hello extends Component {
state = { visible: true }
}
Ver: Configuración del estado predeterminado
Otros componentes
Componentes funcionales
function MyComponent ({ name }) {
return <div className='message-box'>
Hello {name}
</div>
}
Los componentes funcionales no tienen estado. Además,
props
se pasan como el primer parámetro de una función.
Ver: Componentes de funciones y clases
Componentes puros
import React, {PureComponent} from 'react'
class MessageBox extends PureComponent {
···
}
Versión de rendimiento optimizado de
React.Component
. No se vuelve a entregar si los accesorios / estado no han cambiado.
Ver: Componentes puros
API de componentes
this.forceUpdate()
this.setState({ ... })
this.setState(state => { ... })
this.state
this.props
Estos métodos y propiedades están disponibles para
Component
instancias.
Ver: API de componentes
Ciclo vital
Montaje
Método | Descripción |
---|---|
constructor
(accesorios) | Antes de renderizar # |
componentWillMount()
| No uses este # |
render()
| Render # |
componentDidMount()
| Después de renderizar (DOM disponible) # |
— | — |
componentWillUnmount()
| Antes de la eliminación de DOM # |
— | — |
componentDidCatch()
| Detectar errores (16+) # |
Establecer el estado inicial
constructor()
.
Agregue controladores de eventos DOM, temporizadores (etc.)
componentDidMount()
y luego elimínelos
componentWillUnmount()
.
Actualizando
Método | Descripción |
---|---|
componentDidUpdate
(prevProps, prevState, instantánea) | Úselo
setState()
aquí, pero recuerde comparar los accesorios |
shouldComponentUpdate
(newProps, newState) | Omite
render()
si devuelve falso |
render()
| Hacer |
componentDidUpdate
(prevProps, prevState) | Opere en el DOM aquí |
Se llama cuando los padres cambian de propiedad y
.setState()
. Estos no se requieren para renderizados iniciales.
Ver: especificaciones de los componentes
Ganchos (nuevo)
Estado gancho
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Los Hooks son una nueva adición en React 16.8.
Declarar múltiples variables de estado
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
Gancho de efecto
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Si está familiarizado con los métodos del ciclo de vida de clase Reaccionar, se puede pensar en
useEffect
gancho como
componentDidMount
,
componentDidUpdate
y
componentWillUnmount
combinado.
De forma predeterminada, React ejecuta los efectos después de cada renderizado, incluido el primer renderizado.
Construyendo tus propios ganchos
Definir FriendStatus
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
}, [props.friend.id]);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
Los efectos también pueden especificar opcionalmente cómo “limpiar” después de ellos devolviendo una función.
Usar FriendStatus
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
Ver: Construyendo sus propios ganchos
Referencia de la API de Hooks
Ver también: Preguntas frecuentes sobre Hooks
Ganchos básicos
Gancho | Descripción |
---|---|
useState
(estado inicial) | |
useEffect
(() => {…}) | |
useContext
(MyContext) | valor devuelto por
React.createContext
|
Detalles completos: ganchos básicos
Ganchos adicionales
Gancho | Descripción |
---|---|
useReducer
(reductor, initialArg, init) | |
useCallback
(() => {…}) | |
useMemo
(() => {…}) | |
useRef
(valor inicial) | |
useImperativeHandle
(ref, () => {…}) | |
useLayoutEffect
| idéntico a
useEffect
, pero se dispara sincrónicamente después de todas las mutaciones DOM |
useDebugValue
(valor) | mostrar una etiqueta para ganchos personalizados en React DevTools |
Detalles completos: Ganchos adicionales
Nodos DOM
Referencias
class MyComponent extends Component {
render () {
return <div>
<input ref={el => this.input = el} />
</div>
}
componentDidMount () {
this.input.focus()
}
}
Permite el acceso a los nodos DOM.
Ver: Refs y DOM
Eventos DOM
class MyComponent extends Component {
render () {
<input type="text"
value={this.state.value}
onChange={event => this.onChange(event)} />
}
onChange (event) {
this.setState({ value: event.target.value })
}
}
Pasar funciones a atributos como
onChange
.
Ver: Eventos
Otras características
Transferencia de accesorios
<VideoPlayer src="video.mp4" />
class VideoPlayer extends Component {
render () {
return <VideoEmbed {...this.props} />
}
}
Se propaga
src="..."
hasta el subcomponente.
Ver Transferencia de accesorios
API de nivel superior
React.createClass({ ... })
React.isValidElement(c)
ReactDOM.render(<Component />, domnode, [callback])
ReactDOM.unmountComponentAtNode(domnode)
ReactDOMServer.renderToString(<Component />)
ReactDOMServer.renderToStaticMarkup(<Component />)
Hay más, pero estos son los más comunes.
Ver: Reaccionar API de nivel superior
Patrones JSX
Estilo taquigráfico
const style = { height: 10 }
return <div style={style}></div>
return <div style={{ margin: 0, padding: 0 }}></div>
Ver: estilos en línea
HTML interno
function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />
Consulte: innerHTML configurado peligrosamente
Liza
class TodoList extends Component {
render () {
const { items } = this.props
return <ul>
{items.map(item =>
<TodoItem item={item} key={item.key} />)}
</ul>
}
}
Siempre proporcione una
key
propiedad.
Condicionales
<Fragment>
{showMyComponent
? <MyComponent />
: <OtherComponent />}
</Fragment>
Evaluación de cortocircuito
<Fragment>
{showPopup && <Popup />}
...
</Fragment>
Nuevas características
Devolviendo múltiples elementos
Puede devolver varios elementos como matrices o fragmentos.
Matrices
render () {
// Don't forget the keys!
return [
<li key="A">First item</li>,
<li key="B">Second item</li>
]
}
Fragmentos
render () {
// Fragments don't require keys!
return (
<Fragment>
<li>First item</li>
<li>Second item</li>
</Fragment>
)
}
Ver: Fragmentos y cadenas
Devolver cadenas
render() {
return 'Look ma, no spans!';
}
Puede devolver solo una cadena.
Ver: Fragmentos y cadenas
Errores
class MyComponent extends Component {
···
componentDidCatch (error, info) {
this.setState({ error })
}
}
Detectar errores a través de
componentDidCatch
. (Reaccionar 16+)
Ver: Manejo de errores en React 16
Portales
render () {
return React.createPortal(
this.props.children,
document.getElementById('menu')
)
}
Esto se procesa
this.props.children
en cualquier ubicación del DOM.
Ver: Portales
Hidratación
const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)
Úselo en
ReactDOM.hydrate
lugar de usar
ReactDOM.render
si está renderizando sobre la salida de ReactDOMServer .
Ver: Hidratar
Validación de propiedad
PropTypes
import PropTypes from 'prop-types'
Ver: Verificación de tipo con PropTypes
Llave | Descripción |
---|---|
any
| Cualquier cosa |
Básico
Llave | Descripción |
---|---|
string
| |
number
| |
func
| Función |
bool
| Verdadero o falso |
Enum
Llave | Descripción |
---|---|
oneOf
(alguna) | Tipos de enumeración |
oneOfType
(tipo matriz) | Unión |
Formación
Llave | Descripción |
---|---|
array
| |
arrayOf
(…) |
Objeto
Llave | Descripción |
---|---|
object
| |
objectOf
(…) | Objeto con valores de cierto tipo |
instanceOf
(…) | Instancia de una clase |
shape
(…) |
Elementos
Llave | Descripción |
---|---|
element
| Reaccionar elemento |
node
| Nodo DOM |
Requerido
Llave | Descripción |
---|---|
(···).isRequired
| Requerido |
Tipos basicos
MyComponent.propTypes = {
email: PropTypes.string,
seats: PropTypes.number,
callback: PropTypes.func,
isClosed: PropTypes.bool,
any: PropTypes.any
}
Tipos requeridos
MyCo.propTypes = {
name: PropTypes.string.isRequired
}
Elementos
MyCo.propTypes = {
// React element
element: PropTypes.element,
// num, string, element, or an array of those
node: PropTypes.node
}
Enumerables (oneOf)
MyCo.propTypes = {
direction: PropTypes.oneOf([
'left', 'right'
])
}
Matrices y objetos
MyCo.propTypes = {
list: PropTypes.array,
ages: PropTypes.arrayOf(PropTypes.number),
user: PropTypes.object,
user: PropTypes.objectOf(PropTypes.number),
message: PropTypes.instanceOf(Message)
}
MyCo.propTypes = {
user: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})
}
Uso
.array[Of]
,
.object[Of]
,
.instanceOf
,
.shape
.
Validación personalizada
MyCo.propTypes = {
customProp: (props, key, componentName) => {
if (!/matchme/.test(props[key])) {
return new Error('Validation failed!')
}
}
}