React源码阅读—React.Children.map

左手的ㄟ右手 2021-10-30 06:58 316阅读 0赞

### 文章目录 ###

*  React.Children.map
 *  源码阅读
 *   *  React.js
     *  ReactChildren.js
     *   *  mapChildren()
         *  mapIntoWithKeyPrefixInternal()
         *  getPooledTraverseContext()
         *  getPooledTraverseContext()
         *   *  对象池
         *  traverseAllChildren()
         *  releaseTraverseContext()
         *  traverseAllChildrenImpl()
         *  mapSingleChildIntoContext
 *  流程图

# React.Children.map #

先来看这样一段代码：

import React from 'react';
    function Father(props){
        
        console.log(props.children);
        console.log(React.Children.map(props.children, item=>[item, item]));
        return props.children;
    }
    
    export default () => (
        <Father>
            <div>hello</div>
            <div>hello</div>
            <div>hello</div>
        </Father>
    );

代码很简单，在页面上只是显示了三行"hello"而已。重点不在这里，而是在于通过`console.log`在控制台输出的内容。

我们知道可以通过组件的`props.children`获得该组件的子组件。那么可以想到`console.log(props.children);`预期的结果应该是打印出一个长度为3的数组。

![在这里插入图片描述][20190821104421449.png]  
事实也确实如此，控制台中输出了一个长度为3的`ReactElement`数组。

那么`console.log(React.Children.map(props.children, item=>[item, item]));`会在控制台输出什么呢？

我们可能会猜想它应该与数组的`map`方法一样，返回一个长度为3的二维数组，每个元素又是一个长度为2的`ReactElement`数组。

![\[外链图片转存失败(img-TllfUeS0-1566355435380)(https://note.youdao.com/src/56F110D12C694C76B14B90D5E062FE0D)\]][img-TllfUeS0-1566355435380_https_note.youdao.com_src_56F110D12C694C76B14B90D5E062FE0D]

可事实却并不是这样，控制台输出的是一个长度为6的`ReactElement`数组。可以想见，`React.map`将我们设想中的二维数组给降维了。

具体过程是怎样，需要看看源码。

# 源码阅读 #

## React.js ##

首先在源码目录下的`React.js`可以发现`map`是在此处成为`React.Children`的一个方法的。

![在这里插入图片描述][20190821105007288.png]

接着可以发现它真正的定义是在同目录下的`ReactChildren.js`文件中。  
![在这里插入图片描述][20190821105052410.png]

## ReactChildren.js ##

在`ReactChildren.js`文件的最尾部，可以看到`map`方法在此处被导出，其真正的名字应该是`mapChildren`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

### mapChildren() ###

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

这个方法接受3个参数`children`、`func`和`context`。

`children`就是将要被遍历的子组件数组，`func`是对单个子组件需要执行的函数，`context`则是`func`执行时`this`指针所指向的对象。

### mapIntoWithKeyPrefixInternal() ###

function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
        
      let escapedPrefix = '';
      if (prefix != null) {
        
        escapedPrefix = escapeUserProvidedKey(prefix) + '/';
      }
      const traverseContext = getPooledTraverseContext(
        array,
        escapedPrefix,
        func,
        context,
      );
      traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
      releaseTraverseContext(traverseContext);
    }

这个方法本身并没有什么可说的，值得说的是其中被调用的`getPooledTraverseContext`、`traverseAllChildren`和`releaseTraverseContext`。

### getPooledTraverseContext() ###

`traverseContextPool`是文件中定义的对象池，`POOL_SIZE`则定义了对象池的大小。

`getPooledTraverseContext`方法就是从对象池中获得一个`context`对象。

逻辑是若对象池已存在对象则`pop`出来，并将我们调用`React.map`时传入的一些参数赋值给`context`对象中相应的属性。

若对象池为空，则直接返回一个新的`context`对象。

#### 对象池 ####

对象池的作用是避免频繁的创建和销毁，以避免不必要的性能消耗和内存抖动的问题。

### traverseAllChildren() ###

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

这个方法用以判断传入的子组件是否为空，不是空的再继续调用`traverseAllChildrenImpl`方法。  
值得注意的是，参数中的`callback`并不是我们传入的回调函数，而是之前在`mapIntoWithKeyPrefixInternal`中传入的`mapSingleChildIntoContext`。

### releaseTraverseContext() ###

function releaseTraverseContext(traverseContext) {
        
      traverseContext.result = null;
      traverseContext.keyPrefix = null;
      traverseContext.func = null;
      traverseContext.context = null;
      traverseContext.count = 0;
      if (traverseContextPool.length < POOL_SIZE) {
        
        traverseContextPool.push(traverseContext);
      }
    }

在前面通过`getPooledTraverseContext`获得到的`context`对象在使用过后，会通过这个方法将对象内属性清空并重新放入对象池中（当对象池还有空间时）。

看到这里可能大家会有一个疑问。最开始的时候对象池为空，于是直接返回了一个新的`context`对象，使用完之后，通过  
`releaseTraverseContext`方法放回对象池中。而在又一次从对象池中获取对象的过程中，获得到的正是我们刚刚放进去的那一个，那么岂不是对象池中始终只有一个对象？我们接着往下看。

### traverseAllChildrenImpl() ###

这部分代码算得上是`React.map`实现的核心之一，我们逐段逐段的看。

这段代码是用来判断传入的子组件的，主要是判断是不是单个对象以及类型。如果满足条件，则将`invokeCallback`置为`true`。

--------------------

if (invokeCallback) {
        callback(
          traverseContext,
          children,
          // If it's the only child, treat the name as if it was wrapped in an array
          // so that it's consistent if the number of children grows.
          nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar,
        );
        return 1;
      }

若上面的代码将`invokeCallback`置为`true`，则调用`callback`，注意此处的`callback`不是我们传入的回调函数，而是`mapSingleChildIntoContext`。

--------------------

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,
          );
        }
      }

这段代码则是用以处理传入的是数组的情况的。若为数组，则会遍历数组，并将数组中的每一个元素作为`traverseAllChildrenImpl`的第一个参数，递归的调用自身。

### mapSingleChildIntoContext ###

这个方法是`React.map`实现的另一个核心。

在这个方法里，我们从`context`对象中获取到调用`React.map`时传入的回调函数，并执行。

下面这段代码解释了一开始的问题，为什么我们调用`React.map`，尽管预期是一个二维数组，而返回的却是一个一维数组。

if (Array.isArray(mappedChild)) {
        
        mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, c => c);
    }

如果执行我们传入的回调函数后返回的是一个数组，那么则会将这个数组作为参数，重新走一遍调用`React.map`之后的流程，且此时传入的回调函数就只返回本身。

同时这段代码还解释了，对象池是不是一直只有一个对象的问题。

在当我们传入的回调函数不返回一个数组时确实是这样的，但当返回一个数组，甚至是多维数组时，在此处由于会多次重走流程，于是也会多次向对象池获取对象，然而第一次获取到的对象此时还未被放回对象池中。于是便会直接返回一个新的对象，当整个方法调用完成后，对象池中便会存在多个对象了。

# 流程图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

[20190821104421449.png]: /images/20211029/b1f7f441b1f8447f803d91401480bdca.png
[img-TllfUeS0-1566355435380_https_note.youdao.com_src_56F110D12C694C76B14B90D5E062FE0D]: /images/20211029/c312d19c0fc045b3834b79986aa7b983.png
[20190821105007288.png]: /images/20211029/801c9ce6340a466b9218cbf9d62b3d62.png
[20190821105052410.png]: /images/20211029/91505b4e2c834526bcce11ee8d32c456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211029/48814abb291342049d8f0e40fe4687d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20211029/6c36e701d46c46f6909dd7c972e90ba6.png