Hoja de trucos Completa de React JS

React

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, propsse 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 Componentinstancias.

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.

Ver: Ganchos de un vistazo

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 useEffectgancho como componentDidMount, componentDidUpdatey componentWillUnmountcombinado.

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 keypropiedad.

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.childrenen cualquier ubicación del DOM.

Ver: Portales

Hidratación

const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)

Úselo en ReactDOM.hydratelugar de usar ReactDOM.rendersi 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!')
    }
  }
}