React源码解析之React.Children.map()(五)

一人难称百人心 發表於 2020-2-22 16:19:00

React源码解析之React.Children.map()(五)

一，React.Children是什么？
     是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具，是顶层的api之一
   React.children的用处：https://www.cnblogs.com/sunxiaopei/p/13805645.html
二，React.Children.map的结构及举例
 结构：React.Children.map(object children,function fn [, object context])
  举例如下：
<div class="cnblogs_Highlighter">
<div> </div>
<div>   // this.props.children:数据类型为数组为ChildrenDemo的子节点（1和 2）   React.Children.map用来遍历ChildrenDemo的子节点数目 1.1 2.2 </div>
<pre class="brush:javascript;gutter:true;">class ChildrenDemo extends React.Component {
render() {
return (
 <ol>
 {
 React.Children.map(this.props.children, (child)=> {//callback child子节点
 return <li>{child}</li>
 })
 }
 </ol>
)
}
}
class MessageList extends React.Component {
render() {
return (
 <ChildrenDemo>
 1
 2
 </ChildrenDemo>
)
}
}　　</pre>
</div>
this.props.children值有三种情况
1.如果组件没有节点   值为undefined
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200220152847745-246756745.png">
2.如果组件有一个节点值的数据类型为对象
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200220153015616-2093281390.png">
3.如果组件有多个节点  值的数据类型为数组
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200220153106842-2076487288.png">
React.Children.map(this.props.children, child => ])：来遍历this.props.children的子节点多层嵌套的 ])通过map之后平铺成一维数组
这里两个子节点1和2，这里每一个节点都是数组通过React.Children.map变成一个一维数组 
 
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200220161014621-1479655569.png">
<div>三、React.Children.map()中map方法的源码解析</div>
<div>源码中: Children{map: mapChildren}  //所以真正的名字是mapChildren</div>
<div>
<div> mapChildren()</div>
<div>
<div class="cnblogs_code">
<pre> //children:被遍历的子组件
//func：单个子组件需要执行的函数 
//context：func执行时候，this指针指的对象
function mapChildren(children, func, context) {
 if (children == null) {
 return children;
 }
 var result = [];
 //this.props.children [] null child=>] undefined
 mapIntoWithKeyPrefixInternal(children, result, null, func, context);
 //执行完mapIntoWithKeyPrefixInternal方法后返回result
 return result;
}</pre>
</div>
<div> 解析：首先定义一个result，然后执行一个函数以后，返回这个result</div>
<div> </div>
<div>mapIntoWithKeyPrefixInternal()</div>
<div>
<div class="cnblogs_code">
<pre> /*
第一次：children: array:[]prefix:nullfunc:child=>]context:undefined
第二次：children:]array:[]prefix:".0"func:c=>c context:undefined
第三次：children:]array:[]prefix:".1"func:c=>c context:undefined
*/
function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
 var escapedPrefix = '';
 //处理key 如果字符串有多个/ 在匹配的字符串后面加一个/ 一般第二层递归用到第一层prefix为null
 if (prefix != null) {
 escapedPrefix = escapeUserProvidedKey(prefix) + '/';
 }
 //从traverseContextPool里面里面获取一个context
 var traverseContext = getPooledTraverseContext(array, escapedPrefix, func, context);
 //多个节点循环每一个节点将嵌套的数组展平
 traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
 //context对象清空然后放回到traverseContextPool里面
 releaseTraverseContext(traverseContext);
}</pre>
</div>
 解析：escapeUserProvidedKey()/getPooledTraverseContext()/traverseAllChildren()/releaseTraverseContext()函数的包裹器
escapeUserProvidedKey()
<div class="cnblogs_code">
<pre> function escapeUserProvidedKey(text) {
 //如果字符串中有多个/的话在匹配的字符后加/
 //let a='aa/a/'=>// aa/a//
 return ('' + text).replace(userProvidedKeyEscapeRegex, '$&/');
}</pre>
</div>
<div> 解析：react对key定义的规则如果字符串有多个/的话在字符串后面加/</div>
<div> </div>
<div>
<div>getPooledTraverseContext()</div>
<div>
<div class="cnblogs_code">
<pre> //创建一个对象池复用对象从而减少对象带来的内存暂用和性能消耗
var POOL_SIZE = 10; //对象池的最大容量
var traverseContextPool = [];//全局变量对象池有多少个数组，就有多少个对象，这就是traverseContextPool设置在这里的含义
function getPooledTraverseContext(mapResult, keyPrefix, mapFunction, mapContext) {
 //如果对象池内存在对象则出队一个对象
 if (traverseContextPool.length) {//如果全局变量有子节点
 var traverseContext = traverseContextPool.pop();//pop()方法用于删除并返回数组的最后一个元素。
 traverseContext.result = mapResult;
 traverseContext.keyPrefix = keyPrefix;
 traverseContext.func = mapFunction;
 traverseContext.context = mapContext;
 traverseContext.count = 0;
 return traverseContext;//其实就是用来记录的对象
 } else {//如果没有就返回一个新对象
 return {
 result: mapResult,
 keyPrefix: keyPrefix,
 func: mapFunction,
 context: mapContext,
 count: 0
 };
 }
}</pre>
</div>
 解析：创建一个对象池复用对象从而减少对象带来的内存暂用和性能消耗
</div>
</div>
<div>  traverseAllChildren()</div>
<div>
<div class="cnblogs_code">
<pre> //traverseAllChildrenImpl的触发器
function traverseAllChildren(children, callback, traverseContext) {
 if (children == null) {
 return 0;
 }

 return traverseAllChildrenImpl(children, '', callback, traverseContext);
}</pre>
</div>
  解析：traverseAllChildrenImpl的触发器
releaseTraverseContext()
</div>
<div>
<div class="cnblogs_code">
<pre> //将对象属性清空并且重新放入对象池中
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);
 }
}</pre>
</div>
 解析：将对象属性清空并且重新放入对象池中
<pre>traverseAllChildrenImpl() </pre>
</div>
</div>
</div>
</div>
<div>
<div class="cnblogs_code">
<pre> //核心递归函数目的为展平数组
//对于可以循环的children 都会重复调用traverseAllChildrenImpl 直到一个节点然后调用callback
function traverseAllChildrenImpl(children, nameSoFar, callback, traverseContext) {
 var type = typeof children;

 if (type === 'undefined' || type === 'boolean') {
 //undefined null都被认为为null
 children = null;
 }
 //调用fun的flag
 var invokeCallback = false;

 if (children === null) {
 invokeCallback = true;
 } else {
 switch (type) {
 case 'string':
 case 'number':
 invokeCallback = true;
 break;
 //如果props.children单个节点
 //递归traverAllChildenTml时 1和2作为child
 //必会invokeCallback=true
 case 'object':
 switch (children.$$typeof) {
 case REACT_ELEMENT_TYPE:
 case REACT_PORTAL_TYPE:
 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.
 //如果只有一个节点直接调用callback
 //1 key=".0"
 nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar);
 return 1;
 }

 var child;
 var nextName;
 //有多个可以遍历子节点
 var subtreeCount = 0; // Count of children found in the current subtree.

 var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;

 if (Array.isArray(children)) {//如果是多个节点
 for (var i = 0; i < children.length; i++) {//循环遍历多个节点
 child = children;
 //不手动设置key的话第一层第一个时。0 第二个。1
 nextName = nextNamePrefix + getComponentKey(child, i);
 //把child作为参数进行递归直到为单个节点的时候去调用callback
 subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
 }
 } else {
 var iteratorFn = getIteratorFn(children);

 if (typeof iteratorFn === 'function') {
 {
 // Warn about using Maps as children
 if (iteratorFn === children.entries) {
 !didWarnAboutMaps ? warning$1(false, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.') : void 0;
 didWarnAboutMaps = true;
 }
 }

 var iterator = iteratorFn.call(children);
 var step;
 var ii = 0;

 while (!(step = iterator.next()).done) {
 child = step.value;
 nextName = nextNamePrefix + getComponentKey(child, ii++);
 subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
 }
 } else if (type === 'object') {
 //如果是纯对象
 var addendum = '';

 {
 addendum = ' If you meant to render a collection of children, use an array ' + 'instead.' + ReactDebugCurrentFrame.getStackAddendum();
 }

 var childrenString = '' + children;

 {
 {
 throw Error("Objects are not valid as a React child (found: " + (childrenString === '' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + ")." + addendum);
 }
 }
 }
 }

 return subtreeCount;
}</pre>
</div>
解析：当type的值为不可遍历的undefined/boolean/string/number/object时候则直接调用callback 回调函数
核心递归函数目的为展平数组，对于可以循环的children 都会重复调用0 直到一个节点然后调用callback也就是mapSingleChildIntoContext
<pre>mapSingleChildIntoContext()</pre>
<div class="cnblogs_code">
<pre> //复制除了key以外的属性替换key属性将其放到result中 bookKeeping:context对象
function mapSingleChildIntoContext(bookKeeping, child, childKey) {
 var result = bookKeeping.result,
 keyPrefix = bookKeeping.keyPrefix,
 func = bookKeeping.func,
 context = bookKeeping.context;
 //调用fun回调函数
 var mappedChild = func.call(context, child, bookKeeping.count++);
 //对每一个节点如果是数组进行递归
 if (Array.isArray(mappedChild)) { //如果返回一个数组这里返回的是]是一维数组
 //大递归这次不再调用fun 如果调用fun则无限循环所以直接返回c
 mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, function (c) {
 return c;
 });
 } else if (mappedChild != null) {
 if (isValidElement(mappedChild)) {//isValidElement 判断是否是合理的reactElement元素
 mappedChild = cloneAndReplaceKey(mappedChild, // Keep both the (mapped) and old keys if they differ, just as
 // traverseAllChildren used to do for objects as children
 keyPrefix + (mappedChild.key && (!child || child.key !== mappedChild.key) ? escapeUserProvidedKey(mappedChild.key) + '/' : '') + childKey);
 }
 //替换一下key推入到result中
 result.push(mappedChild);
 }
}</pre>
</div>
解析： <code>mapSingleChildIntoContext</code>这个方法其实就是调用<code>React.Children.map(children, callback)</code>这里的<code>callback</code>，就是我们传入的第二个参数，并得到<code>map</code>之后的结果。注意重点来了，如果<code>map</code>之后的节点还是一个数组，那么再次进入<code>mapIntoWithKeyPrefixInternal</code>，那么这个时候我们就会再次从<code>pool</code>里面去<code>context</code>了，而<code>pool</code>的意义大概也就是在这里了，如果循环嵌套多了，可以减少很多对象创建和<code>gc</code>的损耗，而如果不是数组并且是一个合规的<code>ReactElement</code>，就触达顶点了，替换一下<code>key</code>就推入<code>result</code>了
<pre>cloneAndReplaceKey()</pre>
<div class="cnblogs_code">
<pre>//返回一个新的reactElement 替换了newKey 其他的都是老得reactElement
function cloneAndReplaceKey(oldElement, newKey) {
 var newElement = ReactElement(oldElement.type, newKey, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);
 return newElement;
}</pre>
</div>
解析：返回一个新的reactElement 替换了newKey 其他的都是老得reactElement
 
流程图如下
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200220232755811-194777644.jpg">
<pre><code class="lang-js"> </code></pre>
 
 
</div> 
来源：https://www.cnblogs.com/sunxiaopei/p/12335941.html

頁: [1]

琼殿技术论坛's Archiver

React源码解析之React.Children.map()(五)