React文档学习(3)

发表于 | 分类于 ，

React文档学习(3)

  • 高级指南下半部分

Fragments

  • 可以让你将子元素列表添加到一个分组中，并且不会在DOM中增加额外节点。
  • key 是唯一可以传递给 Fragment 的属性。<React.Fragment key={item.id}></React.Fragment>

Portals

  • Portals 提供了一种很好的方法，将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点。
  • ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 片段(fragment)。第二个参数（container）则是一个 DOM 元素。
  • 一个从 portal 内部会触发的事件会一直冒泡至包含 React tree 的祖先。

Error Boundaries

  • 错误边界是 React 组件，它可以在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。

  • 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

  • 错误边界(Error Boundaries) 仅可以捕获其子组件的错误。

    1
    2
    3
    4
    5
    // error 是被抛出的错误。
    // info 是一个含有 componentStack 属性的对象。这一属性包含了错误期间关于组件的堆栈信息。
    componentDidCatch(error, info) {
      logComponentStackToMyService(info.componentStack);
    }

  • 自 React 16 开始，任何未被错误边界捕获的错误将会卸载整个 React 组件树。

  • 错误边界 无法 捕获如下错误:

    • 事件处理
    • 异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
    • 服务端渲染
    • 错误边界自身抛出来的错误 （而不是其子组件）

Web组件

  • Web组件为可重用组件提供了强大的封装能力，而React则是提供了保持DOM和数据同步的声明式库。二者目标互补。

高阶组件

  • 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。

  • 高阶组件不能修改原始组件，而是要将输入组件包裹在容器组件中

  • 高阶组件应该通过props传递那些与特定功能无关的特性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    render() {
      // 过滤掉与高阶函数功能相关的props属性，
      // 不再传递
      const { extraProp, ...passThroughProps } = this.props;

      // 向包裹组件注入props属性，一般都是高阶组件的state状态
      // 或实例方法
      const injectedProp = someStateOrInstanceMethod;

      // 向包裹组件传递props属性
      return (
        <WrappedComponent
          injectedProp={injectedProp}
          {...passThroughProps}
        />
      );
    }

  • 使用高阶组件的注意点

    1. 不要在render函数中使用高阶组件
    2. 静态方法必须复制
    3. Refs不会被传递

代码拆分

  • 打包工具非常强大，但是随着你的应用的增长，你的包文件也会增长。为了避免生成一个很大的包文件，最好开始拆分你的包文件。
  • 代码拆分 你的应用程序可以帮助你 “懒加载(lazy-load)” 用户当前需要的东西，这可以显着提高您的应用程序的性能。