React之JSX是什么？

JSX是什么？

function Comp(props){
    return <h1>hi {props.name}</h1>
}
const jsx=(<div id="demo">
    大家好
    <span>jsx其实是一个对象</span>
    <Comp name="xz"/>
</div>)
console.log('jsx',jsx)

ReactDOM.render(<jsx />, document.querySelector('#root'));

我们可以console.log 看到 jsx 其实是一个Object，包含了各种属性key、type、props、refs等等
$$typeof 属性可以看出这是一个ReactElement

可以看到children里面的span标签也是一样的结构
自定义组件Comp的type则是一个函数

我们可以看一下源码，以16.8.6为例
JSX代码会被Babel编译为React.createElement，调用createElement() 返回一个ReactElement对象

export function createElement(type, config, children) {
  let propName;
  const props = {};
  let key = null;
  let ref = null;
  let self = null;
  let source = null;
  
  //中间参数处理省略...
  
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

可以看到ReactElement是一个工厂函数，创建ReactElement对象

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
  };

  if (__DEV__) {...}

  return element;
};

【JSX是什么？】JSX是JavaScript XML的简写，其实是函数调用和表达的语法糖，最终会转化为生成虚拟DOM 的js代码。

【虚拟DOM是什么？】虚拟DOM是描述DOM结构的对象

为什么要使用JSX？

• 写代码更快
• 类型安全，在渲染之前会转义，防止注入攻击（XSS攻击）
• 开发效率