文章目录
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攻击)
- 开发效率