新增了一个顶级 API: ReactDOM.createPortal

  • Portal 本身不是新的概念,在以往使用 React 实现模态框等组件时我们也会用到,现在 React 官方提供了 API 使得能够更方便地实现这样的功能。
  • 在一般的 React 结构中,组件的嵌套关系和渲染出来的 DOM 的嵌套关系是一致的(子组件渲染出的 DOM 一定是在父组件渲染出的 DOM 的内部的)。
  • 但某些情况下,这样的限制会导致问题,例如实现一个模态框(Modal),虽然模态框所在的组件在它的父组件内部,但是通常需要被渲染在 body 元素下。 新的 API 使用方式如下:
render() {
  // React 会在你提供的 domNode 下渲染,而不是在当前组件所在的 DOM
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

render 方法能够返回数组了

  • 在以前,一个组件的 render 方法中如果要返回多个 element ,必须使用一个元素将它们包裹起来。这样可能会导致很多不必要的嵌套。
  • 现在你可以这样写了:
render() {
  // 不需要再包裹一层了!
  return [
    // 但是要使用 key
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}
  • 还支持了只返回一个字符串:
render() {
  return 'Look ma, no spans!';
}

更好的错误处理

  • 在以前,如果 React 在运行时遇到错误会导致应用崩溃(和一般的 JavaScript 运行时错误一样,之后的代码不会执行了)。
  • 现在 React 给组件增加了 componentDidCatch(error, info) 的生命周期函数,你可以定义组件的错误处理函数,这样组件在遇到运行时错误时会像增加了 try...catch 一样,不会将错误直接抛出了,错误被局部组件 catch 住,保证了整个应用的可用性。
  • 同时,React 还提供了更友好的错误提示,帮助开发者更好地发现问题。
  • 详细可以查看 Error Handling in React 16

更小的体积

相比 React 15.6.1,React 16 更加小巧了:

  • react 是 5.3 kb (2.2 kb gzipped),之前是 20.7 kb (6.9 kb gzipped).
  • react-dom 是 103.7 kb (32.6 kb gzipped),之前是 141 kb (42.9 kb gzipped).
  • react + react-dom 是 109 kb (34.8 kb gzipped),之前是 161.7 kb (49.8 kb gzipped).

相比以前的版本,小了 32%;

部分非核心模块被移出

  • React.createClass React.PropTypes 等模块被移出了 react 包,现在你必须从单独的包里引入。

基于 MIT 协议

  • 现在 React 15.6.2 和 React 16 都是基于 MIT 协议了,你可以自由选择。

完整更新日志请查看 React v16.0

更多React的进阶课程请关注 iWeb学院React周末进阶课程