Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

React 16 发布了

发布于:  

北京时间 2017年9月26号 React v16.0 正式发布了。

主要更新的特性有: fragments, 'error boundaries', portals, 支持了 custom DOM attributes, 优化了 server-side rendering , reduced file size.

render 返回支持数组和字符串

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>,
  ];
}

字符串

render() {
  return 'Look me, at  yazhen.me !';
}

支持的返回类型有:

  • React elements
  • String and numbers
  • Portals 由 ReactDOM.createPortal 创建的
  • null
  • Booleans 例: return test && <Child />

当返回 nullfalse时, ReactDOM.findDOMNode(this) 返回 null.

要保持render() 是个纯函数。

更好的错误处理

目前老版本中, 某个组件出错会导致整个应用挂掉,也难以确定错误发生的位置。 在新版本中(v16),如果某个组件在执行 render 或其他生命周期函数时出错,整个组件将被从根节点上移除掉,方便快速定位异常组件. 可以为组件添加componentDidCatch方法,在这个方法里定义渲染异常时的视图。 这个函数里也有更详细的错误信息帮助调试。

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>

新的组件类型 portals

可以将子组件直接渲染到当前容器组件 DOM 结构之外的任意 DOM 节点中.

render() {	
	ReactDOM.createPortal(children, domNode)
}

线上官方的例子

更好的服务端渲染

React 16 重写了服务端渲染。 速度很快,支持 streaming, 所以可以更快速的给客户传送数据。

ReactDOMServer 官方文档

支持自定义DOM 属性

React 不在忽略未识别的属性,而是传送到dom元素上。

文件变得更小了

MIT licensed

React 16 使用 MIT 协议。

新的核心结构 Fiber

Fiber 是个比较核心牛B的东西,上边说的特性都得益于它,像错误边界,返回类型。

Fiber 支持 asycn rendering 异步渲染。直接体验就是页面变得很流畅了。 想了解更多? Facebook's engineering blog 可能需要科学上网 (^_^)

异步渲染是个大事情,也是React 的代表特性。为了更平滑的升级, 暂时还没有启用这个特性, 但是在未来的几个月会推。

~^_^~ 一片小花园 ?

赏赐