本文阅读react16.8.6版本ReactChildren.js文件。下面从mapChildren函数入手,给出React.Children.map的流程图。

react源码流程图—— ReactChildren

react源码流程图—— ReactChildren

 

react源码流程图—— ReactChildren

 

 mapChildren遍历每个子节点调用函数并摊平子节点。

摊平子节点,即,把['a', ['b'], [['c'], 'd']]摊平成['a', 'b', 'c', 'd']

如果我们想自己实现摊平功能,我们会怎么写这个函数:

react源码流程图—— ReactChildren

很简单的功能,为什么React写得那么复杂?我们来看下traverseAllChildren到底做了些什么。

react源码流程图—— ReactChildren

根据我们画出的流程图,我们可以知道,React流程图红框中的内容对应我们蓝框中的代码。

(代码写多了,疏于言表????,用框框箭头代码示意,你们可以意会吧????‍♂️)

这么看,貌似挺简单的。但是,我们要知道,React是要把执行用户输入的func(即React.Children.map(this.props.children, c=>[c,[c]])中的c=>[c,[c]]函数)后所得到的mappedChild进行平铺。

 

 

未完。。 

相关文章:

  • 2021-12-31
  • 2021-07-30
  • 2021-12-09
  • 2022-12-23
  • 2022-12-23
  • 2021-04-17
  • 2021-04-06
  • 2021-09-12
猜你喜欢
  • 2021-05-06
  • 2022-01-01
  • 2022-12-23
  • 2021-07-12
  • 2021-04-29
  • 2021-10-20
  • 2022-12-23
相关资源
相似解决方案