漫谈 React 组件库开发（一）：多层嵌套弹层组件

引言

UI 组件中有不少弹出式组件，常见的如 Dialog，Tooltip 以及 Select 等。这些组件都有一个特色，它们的弹出层一般不是渲染在当前的 DOM 树中，而是直接插入在 body （或者其它相似的地方）上的。这么作的主要目的是方便控制这些弹出层的 z-index ，确保它们可以处于合适的层级上，不至于被遮挡。

咱们都知道 React App 的顶层某个地方确定有这么一行代码：ReactDOM.render(<App />, mountNode)，这个 API 调用的做用是在 mountNode 的位置建立一棵 React 的渲染树，React 会接管 mountNode 开始的这棵 DOM 树。

在 React 的这种管理模式下，会发现使用弹层彷佛不太方便，由于组件树是逐层往下生长的，但React 的 API 中并无直接提供跳出这棵组件树的方法[注1]。

因此，为了实现弹层组件，咱们须要先实现一个 Portal 组件（玩游戏的都知道，这是传送门的意思），这个组件只作一件事：将组件树中某些节点移出当前的DOM 树，而且渲染到指定的 DOM 节点中。

Portal 组件

Portal 组件的要作的事情很简单，render 函数由于不须要在当前位置输出任何东西，因此直接返回 null 就能够了，剩下的就是在组件的生命周期中去手动管理要渲染到指定位置的那些组件。

// 简化的 Portal 实现
class Portal extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    container: PropTypes.object.isRequired
  };

  render() {
    return null;
  }

  componentDidMount() {
    const { children, container } = this.props;
    mountChildrenAtNode(children, container);
  }

  componentWillUnmount() {
    const { container } = this.props;
    unmountChildrenAtNode(container);
  }
}

剩下惟一的问题是 mountChildrenAtNode 这个函数怎么实现？仔细的同窗应该已经发现了，这个函数和 ReactDOM.render 很是像，仔细一想，其实它们作的事情就是同样的。因此咱们直接用 ReactDOM.render 去替换 mountChildrenAtNode 就能够了。

那么真的这么简单吗？

是，但也不是。

说是，是由于逻辑上这代码并无什么问题，并且大部分场景下是确实能够完美工做。

说不是，是由于剩下的小部分场景下这段代码确实存在很严重的问题。

那么问题是什么呢？

别急，咱们先聊点别的。

相信大部分 React 开发者都用过 redux（至少听过吧），react-redux 这个 binding 库提供了链接 React 和 redux 的一个桥梁。react-redux 的实现依赖 React 颇有用的一个功能Context，简单来讲 context 就是提供了一个方便的跨越层级往下传递数据的方式。

ReactDOM.render 的问题正是在于这个 context 的功能，它没法链接两棵 React 组件树的 context。

ReactDOM.render 的函数原型中并无当前组件树的信息，而 context 是跟组件树有关的。

ReactDOM.render(
  element,
  container,
  [callback]
)

解决这个问题的方法也很简单，这里也不卖关子了，React 提供了另外一个非公开 API：ReactDOM.unstable_renderSubtreeIntoContainer。这个 API 多了一个参数，这个参数就是用来指定新的 React 组件树根节点的父组件的，有了这个参数，两棵原本互不相干的 React 组件树就被联系起来了，同时它们的 context 也链接了起来。

ReactDOM.unstable_renderSubtreeIntoContainer(
  parentComponent,
  element,
  container,
  [callback]
)

想更好的了解 Context 的同窗能够本身 Google，这不是本文重点，这里不作展开了。

Portal 组件的可扩展性

不一样的 UI 组件对弹层可能会有不一样的功能需求，举个例子， Dialog 组件须要在弹出的时候禁止页面滚动，同时有些场景下须要支持点击背景部分关闭，或者按 ESC 键关闭。

这些很细节的功能点每每会出现须要不一样组合的使用场景，例如只须要禁止滚动，或者同时须要禁止滚动和 ESC 键关闭。

一个很天然的想法是在 Portal 组件上加几个可配置的 props 来控制这些功能。这么作有个问题，无论用户需不须要，代码都在那里。

更好的方式是经过高阶组件(HOC)的方式让使用者本身去组合这些功能，这样子没有用到的功能并不会出如今最终的代码中。

说了这么多关于 Portal 组件的实现细节，有兴趣的同窗能够去看看有赞的组件库 Zent 里面的 Portal 是如何实现的，大致上就是按上面说的那些方案作的。

弹层组件

有了 Portal 组件以后，基本上全部弹层组件均可以基于 Portal 去实现。例如 Dialog 无非就是在 Portal 组件的基础上加了一些 CSS 样式。复杂一点的组件例如 Select，须要实现一些触发逻辑来控制弹层的打开和关闭，好比 click 打开或者 hover 打开。咱们接下来要讨论的弹层组件正是特指相似 Select 中的这些弹层。

在 Zent 里面有一个叫 Popover 的组件来处理这些复杂的弹层场景，Popover 封装了经常使用的触发逻辑，例如 click, hover, focus，同时 Popover 的触发机制是可扩展的，使用者能够实现本身的触发逻辑。

Popover 组件提供的另一个重要功能是弹层的定位能力，也就是相对于 Trigger 的一个定位功能。除了内置的十几种定位算法，使用者能够实现本身的定位算法来实现特殊场景下的需求。

有了 Popover 组件提供的触发逻辑以及弹层定位这两个功能以后，相似 Tooltip , Select 这样的组件在实现时就彻底不须要关心弹层的事了，只须要实现弹层内的组件逻辑就好了。

这里已经可以看出一个层次化的弹层组件设计了：Portal 负责脱离组件树，Popover 在 Portal 的基础上提供了更丰富的功能逻辑，其它组件又在 Popover 的基础上去作封装。这样一种层次结构在实践中大大下降了各种弹层组件的实现和维护成本。

在组件库的设计中，这种对能力的抽象封装是很重要的，在提升开发效率的同时也保证了各个组件行为的一致性。

干货：弹层组件的嵌套处理

上面介绍的弹层组件实现细节上并无特别之处，成熟的组件库基本都是用相似方式实现的。可是 Zent 的 Popover 组件实现了一个大多数 React 组件库都没有实现的功能：弹层的嵌套处理。

若是你尚未明白这里的弹层嵌套是什么意思，不要紧，给你举个例子就明白了。

以下图，点击按钮以后会弹出一个气泡，这个气泡中又有一个时间选择器，所谓的弹层嵌套指的就是这种弹层之中又嵌了弹层的场景。正常的操做逻辑是鼠标点击位置1的时候气泡和时间选择器同时关闭，可是点击位置2的时候应该只有时间选择器关闭。

上面提到的点击两个不一样位置的不一样行为其实就是弹层嵌套最主要的问题：上级的弹层组件应该知道哪一个区域是属于下级弹层组件的。

因为弹层组件的特殊性，它们在 DOM 树中的位置跟它们实际的层次以及包含关系是没有必然联系的，上图中的两个弹层是body 下面的两个兄弟节点，但从弹层的角度看它们是有层次关系的，并非并列的。

一般来讲，弹层的层次结构也是一个树状结构，那么处理嵌套问题最直接的想法就是每一个弹层组件都各自维护一个子弹层的列表。当须要判断点击是否在弹层外面时，不光要考虑当前弹层对应的 DOM 节点，还要考虑它的下级弹层对应的 DOM 节点。

这种方式处理的话须要手动维护这棵弹层的层级关系树，包括树中节点的插入／删除，这些操做都不是很难。这个方法最大的问题在于，在 React 的体系内一个弹层组件很难跟不是它直接孩子(direct child)的子弹层交互。

Zent 的 Popover 组件并无直接去维护这棵层级关系树，而是利用了 React 中 context 的层级关系来避免本身去维护这棵树。使用 context 的另外一个附带好处是，和非直接孩子的交互也再也不是问题，由于 context 自己就是能够跨层级传递信息的。Popover 的层级管理结构示意图以下：

*                context                       context
 *                ------>                       ------>
 * Popover Root               Popover child                    Popover grand-child     ......
 *                <------                       <------
 *             isOutsideQuery                isOutsideQuery

就是这么一个很简单的设计解决了 Zent 中弹层组件的层级嵌套问题，想了解实现细节的同窗能够看 Popover 的源码。

总结

弹层组件是 UI 组件库中很重要的部分，一个逐层抽象的结构能够极大简化这些组件的开发和维护成本。

合理利用 React 的 context 功能能够很方便地解决一些像嵌套弹层同样看似很麻烦的问题。

若是以为有所收获，请给 Zent 点个 star 吧。

*注1: React Fiber 中提供了一个新的 API：ReactDOM. unstable_createPortal ，这个 API 能够将一个组件渲染到指定的 DOM 节点内。

本文由 李晨 首发于 有赞技术博客。