从React 15到React 16

  就像人们对移动应用程序和操做系统的更新感到兴奋同样，开发人员也应该对使用的框架更新感到兴奋。
各个框架的新版本给咱们带来开箱即用的新功能和技巧。

  如下是将现有应用从React 15迁移到React 16时应考虑的一些优秀功能。

咱们是时候对React15说再见了 👋

错误处理

React 16 引入了错误边界的新概念。

错误边界是捕获子组件树中任意位置javascript错误的react组件。他们记录这些错误，而且渲染备用的UI，而不是崩溃的组件树。错误边界能够在渲染期间，生命周期方法，以及它们下面的整个树的构造函数中捕获错误。

若是一个类组件定义一个名为componentDidCatch(error, info)的新生命周期方法，那么它将变成错误边界：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.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 UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

接下来，你能够把它当作一个普通的组件来用。

<ErrorBoundary>  
   <MyWidget />
</ErrorBoundary>

componentDidCatch（）方法的工做相似于JavaScript catch {}块，但对于组件。只有类组件能够是错误边界。实际上，大多数状况下，您只须要声明一次错误边界组件。而后你就能够在整个应用程序中使用它。

须要注意的是，错误边界只捕获其下面组件的错误。错误边界不可以捕获自身的错误，若是错误边界尝试渲染错误信息失败，那么错误将传播到其上方最近的错误边界，这一点，也相似于catch{}块在javaScript中的工做方式。

查看一个演示:
https://codepen.io/gaearon/pe...
有关错误处理的更多信息，可访问error-handling-in-react-16

新的渲染返回类型： fragments(片断)和strings(字符串)

摆脱渲染时将组件包裹在div中。
您如今能够在component的render方法返回一个元素数组。与其余数组同样，您须要为每一个元素添加一个key以免报key警告：

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

从React 16.2.0开始，fragments支持JSX的特殊片断语法，不须要key。

支持返回字符串：

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

Portals

Portals提供了一种将子项渲染在父组件的DOM层次结构以外的DOM节点中的好方法。

ReactDOM.createPortal(child, container)

其中，第一个参数child是任何可渲染的react元素，例如元素，字符串，或者片断。第二个参数container是dom元素

怎样使用它

当咱们从组件的render方法返回一个元素时，它做为最近父节点的子节点挂载到DOM中：

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

有时,将子节点插入DOM中的其余位置是颇有用的：

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

portals的一个典型用例是当父组件具备overflow：hidden或z-index样式时，可是您须要子容器在视觉上“突破”其容器。例如，对话框，hover悬停卡片和tooltip。
https://codepen.io/gaearon/pe...

自定义DOM属性

React 15用于忽略任何未知的DOM属性。由于React不识别它，会跳过它们。

// Your code:
<div mycustomattribute="something" />

使用React 15会渲染一个空div：

// React 15 output:
<div />

在react16中，输出将会是下面这样子（自定义属性将会显示且不会被忽略）

// React 16 output:
<div mycustomattribute="something" />

经过设置state为NULL来避免重复渲染

使用React16，您能够直接从setState（）阻止state更新和从新渲染。你只须要让你的函数返回null。

const MAX_PIZZAS = 20;

function addAnotherPizza(state, props) {
  // Stop updates and re-renders if I've had enough pizzas.
  if (state.pizza === MAX_PIZZAS) {
    return null;
  }

  // If not, keep the pizzas coming! :D
  return {
    pizza: state.pizza + 1,
  }
}

this.setState(addAnotherPizza);

访问Refs

将ref传递给render中的元素时，能够在ref的当前属性中访问对该节点的引用。

const node = this.myRef.current;

ref的值根据节点的类型而有所不一样

• 当在HTML元素上使用ref属性时，在构造函数中使用React.createRef（）建立的ref将接收底层DOM元素做为current属性。
• 当ref属性用于自定义组件时，ref对象接收组件的挂载实例做为current。
• 您不能函数组件上使用ref属性，由于它们没有实例。

关于refs，更多

Context

Context提供了一种经过组件树传递数据的方法，而无需逐级经过props传递。

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

建立{Provider，Consumer}。当React渲染上下文Consumer时，它将从树中它上面最接近的匹配Provider读取当前上下文值。
defaultValue参数仅在Consumer在树中没有匹配的Provider时使用。这可让咱们不包装它们就能单独测试组件。注意：将undefined做为Provider值传递不会致使Consumer使用defaultValue。

Provider

<Provider value={/* some value */}>

一个React组件，容许消费者订阅上下文更改。接受一个value prop，传递给做为此Provider的后代的消费者。一个Provider能够链接到许多消费者，能够嵌套覆盖树中更深层的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

一个订阅上下文更改的React组件。

须要一个函数做为子元素。该函数接收当前上下文值并返回React节点。传递给函数的value参数将等于树中上述此上下文的最近Provider的value prop。若是上面没有此上下文的Provider，则value参数将等于传递给createContext（）的defaultValue。

React生命周期钩子

这些是使用React16时必定要尝试的一些功能！