¿Cuáles son las novedades de la última versión de React JS (16) ?

React Fiber (el nombre código de la nueva versión de React) representa un conjunto de nuevos beneficios en terminos de rendimiento para los desarrolladores. Sin embargo una de las grandes funcionalidades anunciadas para esta nueva versión (la renderización asíncrona de componentes) no está presente en este release inicial. Es de anotar que a pesar de lo anterior, el core de React Js fue re-escrito como se prometió, resultando en un nuevo algoritmo de reconciliación, o dicho de otra forma un nuevo algoritmo para detectar cambios en el estado que representen una actualización de la vista y posteriormente realizar los cambios respectivos de la manera más óptima posible.

Algunas de las características más interesantes de esta nueva versión incluyen:

• Los errores que se muestran en consola, dan más enfasis a listar la pila de componentes en la cuál se presentó el fallo, haciendo más facil debuggear la aplicación. Dicho te otra forma, tendremos un desglose del sub arbol de componentes dentro del cuál se generó el bug.

• Se añadió un nuevo método al ciclo de vida de un componente, este método se conoce como

componentDidCatch(error, info)

componentDidCatch está pensado para ser utilizado en componentes de alto orden, los cuáles al implementar dicho método reciben el nombre de ErrorBoundary. Y ¿qué rayos es un ErrorBoundary? la idea es que los ErrorBoundary envuelvan aquellos componentes que contengan lógica o funcionalidad de procesamiento de información, si se da el caso de que ocurra un error dentro de estos componentes, el método componenteDidCatch capture el error y podamos hacer un manejo del error un poco más amigable con el usuario, esto es algo así como un try catch para componentes.

classErrorBoundaryextendsReact.Component{
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UIthis.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UIreturn <h1>Algo falló.</h1>;
    }
    returnthis.props.children;
  }
}

<ErrorBoundary><ComponentFunc /></ErrorBoundary>

• El metodo render ya puede retornar un arreglo de elementos sin que tengamos que englobarlos a todos en un elemento padre, por ejemplo:

render() {
  return [
    // IMPORTANTE QUE NO OLVIDES AÑADIR EL ATRIBUTO key
    <likey="A">First item</li>,
    <likey="B">Second item</li>,
    <likey="C">Third item</li>,
  ];
}

• El método render ya puede retornar strings, por ejemplo:

render() {
  return'Look ma, no spans!';
}

• El ya anunciado cambio de licensia de BSD + Patents a la ya conocida y amigable licencia MIT.

• Reducción del tamaño de los archivos core, por ejemplo React 16 es más pequeño que React 15.6.1. Una reducción de poco más del 30% en su tamaño.

• Se reescribió el proceso de renderización de componentes desde el servidor (server-renderer) e inclusó se añadió una funcionalidad que permite un generar flujo de contenido renderizable desde el servidor hacia el cliente.

• Ahora podemos añadir atributos personalizados a los componentes, sin que sean ignorados al ser renderizados.

Para mayor información acerca de lo nuevo de React 16, puedes visitar
Este enlace