源码基于
React@16.8.4版本
React.Children提供了处理this.props.children的各种方法，每个React组件都可以获取到props.children，props.children包括开始标签和结束标签之间的所有内容。
<Spin>
<Modal>hello</Modal>
</Spin>
上面的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的损耗。
参考文章：
网友评论