JSX 的本质

JSX 的本质

JSX 本质其实是一个函数（React.createElement)。

• React.createElement 有三个参数，第一个参数是 type 也就是标签或者组件名、第二个参数是 props 是标签属性（例如 id、class、样式或者向子组件传递的数据等）、第三个参数是 children 是标签或者组件内的内容。
• 说的有点抽象。以代码为例。

import React, { Component } from "react";

export default class JSX extends Component {
  render() {
    return (
      <div>
        {/* 正常写法 */}
        <p>JSX，正常的JSX写法</p>

        {/* React.createElement */}
        {
          React.createElement(
            "p",    // type 标签或组件名
            { 
              style: {
                color: 'green'  //   id、class、样式或者向子组件传递的数据等（如果没有属性，则设置为 null）
              } 
            },          
            "JSX，createElement函数写法"   // 内容
            )     
        }
        {
          React.createElement()
        }
      </div>
    );
  }
}

显示结果：

• 嵌套的写法

React.createElement(
  'div',
   null,
   React.createElement(
     'h1',
     {
        style: {
           color: 'green'
        }
      },
         'h1 标签的内容'
      )
)

• 当 type 是组件时

// 子组件
const TestCom = (props) => {
  return <div>
    这是 TestCom 组件, 这是父组件传递的数据：{ props.content }
  </div>
}

// 父组件
export default class JSX extends Component {
  render() {
    return (
      <div>
        {
          React.createElement(
            TestCom,   // type： 组件名
            {
              content: '父组件传递的数据'   // 传递给子组件的数据
            }
          )
        }
        
      </div>
    );
  }
}

结果：

React.createElement 返回的不是真实的 DOM ，而是虚拟DOM