react源码阅读-React.Children

源码基于[email protected] 版本

React.Children提供了处理this.props.children的各种方法，每个React组件都可以获取到props.children，props.children包括开始标签和结束标签之间的所有内容。


   hello

上面的props.children获取到的将是Modal组件及组件内的字符串内容。

关键API

only
count
toArray
forEach
map

在使用上述方法处理props.children(简称children)时，如果children是数组结构的，将会被遍历，如果不是将会返回null或undefined，

在接下来的内容之前，有一个函数不得不提，这是在Children API中被使用多次的一个函数，那就是判断元素是不是一个有效的React元素的：isValidElement;

isValidElement

先来看看相关的源码：

export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

该函数接收一个对象，返回Boolean值来给出传入的对象是不是一个有效的React元素，可以看到简单的用到了三个判断条件，前两个都是javascript中的常规判断操作，值得注意的是第三个判断：object.$$typeof === REACT_ELEMENT_TYPE

在这里，REACT_ELEMENT_TYPE的值是typeof Symbol === 'function' && Symbol.for，而$$typeof则是ReactElement的一个内部标记，React在创建元素的时候会为元素设置该属性，而设置该属性的值恰恰就是REACT_ELEMENT_TYPE，React通过Symbol.for来判断object是否是一个有效的React元素。

这里还有一个小细节就是：React 在返回Boolean值时，将三个条件判断都用()进行了包裹，是一个最佳实践。

only

only的作用是验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误。
代码很简单：

function onlyChild(children) {
  // 异常处理
  invariant(
    isValidElement(children),
    'React.Children.only expected to receive a single React element child.',
  );
  return children;
}

count

返回 children 中的组件总数量。

function countChildren(children) {
  return traverseAllChildren(children, () => null, null);
}

直接返回traverseAllChildren函数，该函数会先去判断children的有效性，然后再去执行技术总数的操作：

function traverseAllChildren(children, callback, traverseContext) {
  // 做有效性判断
  if (children == null) {
    return 0;
  }
  // 开始计算总数
  return traverseAllChildrenImpl(children, '', callback, traverseContext);
}

traverseAllChildrenImpl函数又会对children做类型的判断处理，之后会检测children是否是一个数组，是数组的话会递归调用traverseAllChildrenImpl来累计数组的总数，非数组的话，会对children做转换处理，然后再调用traverseAllChildrenImpl来累计，如果是对象的话，将会抛出异常。

toArray

将 children 这个复杂的数据结构以数组的方式扁平展开并返回，并为每个子节点分配一个 key。

map

forEach和``没有太大的差别，只是forEach没有返回新的节点。这里重点看一下map。
来看一下map的处理流程：

map.png

function mapChildren(children, func, context) {
  if (children == null) {
    return children
  }
  const result = []
  mapIntoWithKeyPrefixInternal(children, result, null, func, context)
  return result
}

接下来：

function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
  let escapedPrefix = ''
  if (prefix != null) {
    escapedPrefix = escapeUserProvidedKey(prefix) + '/'
  }
// getPooledTraverseContext 就是从pool里面找一个对象，releaseTraverseContext会把当前的context对象清空然后放回到pool中。
  const traverseContext = getPooledTraverseContext(
    array,
    escapedPrefix,
    func,
    context,
  )
  traverseAllChildren(children, mapSingleChildIntoContext, traverseContext)
  releaseTraverseContext(traverseContext)
}

在执行的过程中，如果节点是一个数组，会继续递归下去，也就是traverseAllChildrenImpl函数

function traverseAllChildren(children, callback, traverseContext) {
  if (children == null) {
    return 0
  }

  return traverseAllChildrenImpl(children, '', callback, traverseContext)
}

function traverseAllChildrenImpl(
  children,
  nameSoFar,
  callback,
  traverseContext,
) {
  const type = typeof children

  if (type === 'undefined' || type === 'boolean') {
    children = null
  }

  let invokeCallback = false

  if (children === null) {
    invokeCallback = true
  } else {
    switch (type) {
      case 'string':
      case 'number':
        invokeCallback = true
        break
      case 'object':
        switch (children.$$typeof) {
          case REACT_ELEMENT_TYPE:
          case REACT_PORTAL_TYPE:
            invokeCallback = true
        }
    }
  }

  if (invokeCallback) {
    callback(
      traverseContext,
      children,
      nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar,
    )
    return 1
  }

  let child
  let nextName
  let subtreeCount = 0 // Count of children found in the current subtree.
  const nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR

  if (Array.isArray(children)) {
    for (let i = 0; i < children.length; i++) {
      child = children[i]
      nextName = nextNamePrefix + getComponentKey(child, i)
      subtreeCount += traverseAllChildrenImpl(
        child,
        nextName,
        callback,
        traverseContext,
      )
    }
  } else {
    const iteratorFn = getIteratorFn(children)
    if (typeof iteratorFn === 'function') {
      // iterator，和array差不多
    } else if (type === 'object') {
      // 提醒不正确的children类型
    }
  }

  return subtreeCount
}

最后通过mapSingleChildIntoContext来完成处理：

function mapSingleChildIntoContext(bookKeeping, child, childKey) {
  const { result, keyPrefix, func, context } = bookKeeping

  let mappedChild = func.call(context, child, bookKeeping.count++)
  if (Array.isArray(mappedChild)) {
    mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, c => c)
  } else if (mappedChild != null) {
    if (isValidElement(mappedChild)) {
      mappedChild = cloneAndReplaceKey(
        mappedChild,
        keyPrefix +
          (mappedChild.key && (!child || child.key !== mappedChild.key)
            ? escapeUserProvidedKey(mappedChild.key) + '/'
            : '') +
          childKey,
      )
    }
    result.push(mappedChild)
  }
}

如果map之后的节点还是一个数组，那么再次进入mapIntoWithKeyPrefixInternal，那么这个时候我们就会再次从pool里面去context了，而pool的意义大概也就是在这里了，如果循环嵌套多了，可以减少很多对象创建和gc的损耗。

参考文章：

react
reconciliation