2020-12-26 log jsx

关于jsx
jsx最终输出的东西就只有一个js对象
比如

function App(props){
  return <div> <div></div> <div></div> </div>
}

const a = <App />;

其中，<App />会被转成 React.createElement(App,null)
React.createElement方法会创建一个js对象，最终结果类似这样

{
   type:App
}

如果有一个嵌套子标签

<App>
<div></div>
</App>

会被转成React.createElement(App,null,React.createElement('div',null)),嵌套的子标签会被传入React.createElement方法的第三个参数里。
React.createElement方法会创建js对象，根据传入的参数数量，决定props属性的children属性，输出结果

{
  type:App
  props:{
    children:{
      type: 'div'
    }
  }
}

如果有多个嵌套子标签

<App>
  <div></div>
  <div></div>
<App>

会被转成

React.createElement(App,null,React.createElement('div',null),React.createElement('div',null))

输出结果为

{
  type:App
  props:{
    children: [
    {
      type: 'div'
    },
    {
      type: 'div'
    }
  ]
  }
}

更深层的嵌套遵循以上规则
总结：
jsx的children会被传入父标签的参数里，从第三个参数开始依次加入