react中的JSX函数，v17与v16区别

在新create-react-app中，eject后webpack.config.js中hasJsxRuntime函数可切换jsx调用模式

jsx转换 （v16版本）

• createElement(type, config, children) —— ReactElement.js
  • 生成props（合并config，defaultProps）
  • 判断arguments，赋值props.children为childArray或者children
  • 检测ref，key合法（非undefined）
  • return ReactElement
    • 创建element（即jsx）
    • 写入属性$$type，type，key，ref，props，_owner
    • $$typeof:REACT_ELEMENT_TYPE ，用于isValidElement判断
    • type:元素本身（可以理解为组件函数）
      • 原生组件。 eg：'div'
      • 函数（函数，class组件等）。 eg：App
      • React组件。 eg：React.StrictMode，Fragment

jsx转换 （v17版本）

现在props属性有children，由babel处理

• jsx(type，config，maybeKey) —— ReactJSXElement.js
  • 生成props（合并config，defaultProps）
    • config属性有children（处理同v16，但是由babel编译生成）
  • 检测ref，key合法（非undefined）
  • return ReactElement (type, key, ref, self, source, owner, props) 
    • 创建element（即jsx）
    • 写入属性$$type，type，key，ref，props，_owner
    • $$typeof:REACT_ELEMENT_TYPE，用于isValidElement判断
    • type:元素本身（可以理解为组件函数）

总结

下图是v16的createElement中的children处理。 v17将由babel进行处理。