JSX ​

JSX 是 JavaScript 语法扩展，结构类似 XML，可以让你在 JavaScript 文件中书写类似 HTML 的标签

为什么要使用 JSX ​

JSX 是 React 的一大特性

使用 JSX 可以让我们在 JavaScript 中直接使用 HTML 标签，而不用通过 document.createElement 等方法来创建元素，这样可以让我们的代码更加简洁，更加直观

TIP

JSX 和 React

JSX 和 React 是相互独立的东西。虽然它们经常一起使用，但你可以单独使用它们中的任意一个

• JSX 是一种语法扩展
• React 是一个 JavaScript 的库

JSX 语法的规则 ​

• 只能返回一个根元素（组件中包含多个元素时需要用一个父标签把它们包裹起来）
  • 父标签可以是 HTML 标签或 <React.Fragment>（即 <> 和 </>）
• 标签必须闭合（如果没有子元素可以使用自闭合标签 <img />）
• 标签的属性命名使用驼峰命名法（class 是一个保留字，需要用 className 来代替）
• 标签的属性值可以是字符串或表达式，表达式需要使用大括号包裹
  • 引号内的值会作为字符串传递给属性 <App name="maomao" />
  • 在大括号内中可以使用任何 JavaScript 表达式，包括函数调用 <App a={1+2} b={fn()} />
  • {/{ ... }/} 不是什么特殊的语法：只是包在 JSX 大括号内的 JavaScript 对象
• JSX 注释以 {/* ... */} 形式表示

JSX 语法的转换 ​

在 React 中所有的元素都是通过 React.createElement 方法创建的。使用 JSX 语法的代码最终会被 Babel 编译为 React.createElement 方法，即 JSX 语法的本质就是 React.createElement 方法

    // JSX 语法
    import React from 'react'
    const element = <h1 className="greeting">Hello, world!</h1>
    
    // 通过 babel 转化为 React.createElement 方法
    import React from 'react'
    const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!')

这也是为什么在 React 17 之前我们在使用 JSX 语法时必须要引入 React 的原因，如果不引入 React 就会因为找不到 React.createElement 方法导致编译失败

React.createElement 方法 ​

源码地址 createElement | ReactElement.js

    export function createElement(type, config, children) {
      // 用于存储遍历时的属性名
      let propName
    
      // 创建一个用于存储属性的空对象 props
      const props = {}
    
      // key、ref、self、source 均为 React 元素的属性
      let key = null
      let ref = null
      let self = null
      let source = null
    
      if (config != null) {
        // 依次对 ref、key、self 和 source 属性赋值
        if (hasValidRef(config)) {
          ref = config.ref
        }
        // 将 key 转换为字符串
        if (hasValidKey(config)) {
          key = '' + config.key
        }
    
        self = config.__self === undefined ? null : config.__self
        source = config.__source === undefined ? null : config.__source
    
        // 将 config 对象中剩余属性添加到新的 props 对象中
        for (propName in config) {
          if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
            props[propName] = config[propName]
          }
        }
      }
    
      // 计算子元素的个数（去除 type 和 config 剩余的参数都是 children）
      const childrenLength = arguments.length - 2
    
      // 根据剩余的参数的长度分别处理 children 并赋值给 props.children
      if (childrenLength === 1) {
        props.children = children
      } else if (childrenLength > 1) {
        const childArray = Array(childrenLength)
        for (let i = 0; i < childrenLength; i++) {
          childArray[i] = arguments[i + 2]
        }
        props.children = childArray
      }
    
      // 处理 defaultProps
      if (type && type.defaultProps) {
        const defaultProps = type.defaultProps
        for (propName in defaultProps) {
          if (props[propName] === undefined) {
            props[propName] = defaultProps[propName]
          }
        }
      }
    
      return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props)
    }

源码地址 ReactElement | ReactElement.js

    const ReactElement = function (type, key, ref, self, source, owner, props) {
      const element = {
        // 标识是一个 React Element 元素
        $$typeof: REACT_ELEMENT_TYPE,
    
        // 元素的内置属性
        type: type,
        key: key,
        ref: ref,
        props: props,
    
        // 记录创建此元素的组件
        _owner: owner,
      }
    
      return element
    }

createElement 方法接收三个参数：

• type：元素的类型
• config：元素的属性
• children：元素的子元素

该方法会将 config 中的 ref、key、__self、__source 等属性提取出来，剩余的属性放到 props 对象中，最后调用 ReactElement 方法并返回一个 React Element 对象

如何判断一个对象是 React Element 对象

React 提供了一个 isValidElement 方法用于判断一个对象是否是 React Element 对象

    export function isValidElement(object) {
      return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE
    }

可以看到，主要满足条件 $$typeof === REACT_ELEMENT_TYPE 的非 null 对象就是一个合法的 React Element 对象

全新的 JSX 转换 ​

React 17 提供了全新的 JSX 转换，在使用时不再需要引入 React

    // 源代码
    function App() {
      return <h1>Hello World</h1>
    }
    
    // 新的 JSX 转换
    import { jsx as _jsx } from 'react/jsx-runtime'
    
    function App() {
      return _jsx('h1', { children: 'Hello world' })
    }

jsx 方法和上面的 createElement 方法一样，都是对参数进行处理，最后调用 ReactElement 方法返回 React Element 对象