1.react 为啥要用jsx?
1.首先看看使用js创建虚拟DOM
//1.创建虚拟DOM
//document.createElement是创建真实DOM的
//React.createElement(标签名,标签属性,标签体内容)是创建虚拟DOM的
const VDOM = React.createElement(‘h1’,{id:‘title’},‘Hello React’);、
注意:
源码:
<script type="text/javascript">
//1.创建虚拟DOM
//document.createElement是创建真实DOM的
//React.createElement(标签名,标签属性,标签体内容)是创建虚拟DOM的
const VDOM = React.createElement(‘h1’,{id:‘title’},‘Hello React’);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test')) /* 把虚拟DOM渲染到哪个容器中 */
</script>
2.痛点来了,请听题:在h1标签中加上span标签 然后在span中写入内容。
jsx的创建该标签的DOM写法:
const VDOM =
Hello,React
;js的创建该标签的DOM写法:
const VDOM = React.createElement(‘h1’,{id:‘title’},React.createElement(‘span’,{},‘Hello React’));
完美阐释为啥使用jsx。 但是 jsx经过babel翻译后就是js的写法。
jsx换种输写格式更像写html:
const VDOM = (
Hello,React
);