Novedades de React16

Descubre qué novedades trae la versión 16 de React

Image for post
Image for post

Error boundaries

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
this.setState({ hasError: true });
logError(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Algo fue mal.</h1>;
}
return this.props.children;
}
}
<ErrorBoundary>  
<AnyComponent />
</ErrorBoundary>

Nuevos tipos que podremos devolver dentro de un render

render() {
return [
<li key="first">First</li>,
<li key="second">Second</li>,
<li key="third">Third</li>,
];
}

Atributos especiales en el DOM

<div aCustomAttribute="value" />
// React 16:
<div aCustomAttribute="value" />

La API Portal

class A extends Component {....  render() {
return <div>{ this.props.children}</div>
}
}
render() {
// En este caso, React no creará un nodo hijo sino que rendeará
// el elemento dentro del elemento domNode
return ReactDOM.createPortal(
this.props.children,
domNode
);
}
// index.html
<div id="app-root"></div>
<div id="modal-root"></div>
// Modal.jsconst modalRoot = document.getElementById('modal-root');class Modal extends React.Component {
constructor(props) {
super(props);
// Creamos un div que alojará el contenido de la modal para
// poder tener múltiples modales
this.el = document.createElement('div');
}
componentDidMount() {
// Añadimos el div creado en el constructor al elemento modalRoot
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
// Eliminamos el elemento cuando la modal desaparece
modalRoot.removeChild(this.el);
}

render() {
// Usamos la API Portal para renderear ese elemento dentro del div modal-root
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}

Evitar un rerender devolviendo null

function reduceStock(state, props) {
// Evita el rerender del setState al llegar a 0
if (state.stock === 0) {
return null;
}
return {
stock: state.sotck - 1,
}
}
this.setState(reduceStock);

La API Context

const {Provider, Consumer} = React.createContext(defaultValue);
// Creamos el contexto
const Context = createContext()
// El contexto creado proporciona dos propiedades: Provider y Consumer
// sobre las que trabajaremos
const { Provider, Consumer } = Context
// Rendereamos el Provider con algún valor
// Por ejemplo, podemos envolver con este provider
// toda la aplicación
<Provider value={{ name: 'Gerardo' }}>
<App />
</Provider>
// A partir de ahora, dentro de App podemos acceder a los valores anteriores
// de la siguiente forma
<Consumer>
{({ name }) => <span>{`${name}`}</span>}
</Consumer>

static getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState){       
if (nextProps.someValue !== prevState.someValue){
return { someState: nextProps.someValue};
} else return null;
}

Nueva forma de crear refs

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.aRef = React.createRef();
}
render() {
return <div ref={this.aRef} />;
}
}
const node = this.aRef.current;

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store