react 中 React.Children.map 为什么会重绘

Question

代码如下，为什么在currentItem.isLeaf 变化时，整个组件(包括子组件)都会发生重新mount

return React.Children.map([0,1,2,3,4,5,6], (Child, index) => {
      const ChildNode = currentItem.isLeaf === '1' ?
        AComponent :
        BComponent;

      return React.createElement(ChildNode,
        {
          amount: 5,
          index,
          key: `level-${index}`,
        }
      )
    })

Answer 1

答案是type不同了。

React.createElement的函数签名是 React.createElement(type, props, children)。

React在做dom diff时候，首先判断的就是type，如果type不一致就会重新渲染（remove然后append）。

题主currentItem.isLeaf 变化时，对应的正好就是type发生变化，因此会重新渲染。