说说对jsx的理解

JSX:可理解成html，经过Bable就是运行在浏览器上的代码了。
在原生中，js创建dom用
var a = document.createElement(‘p’);
a.setAtribute(‘class’,‘myp’);
a.appendChild(document.createTextNode(‘pp’));

pp

而在react中，
var a = React.createElement(‘a’,{
class:‘link’
},
‘pp’)
第一个参数：为元素节点
二 :为对象，dom属性
三 ：文本

如上看起来要比原生的简洁很多，但是可读性不好，于是发明了JSX代码，利用我们熟悉的html语法来创建元素。之后jsx通过翻译器转换到纯js再由浏览器执行。JSX只是一种语法，因此JS的关键字来class,for也不能出现JSX中，使用className代替。
注：没有JSX中的React也可以正常工作的，但使用JSX的原因。
1.结构简单明了。
2.利于开发和维护
3.比函数调用和对象字面量更易于读。
再者：
每个框架都有自己的模板引擎。例如：angular遍历用ng-for…
所以react放弃自己的模板而发明JSX。
总结：
原生：html创建don树。
react:jsx虚拟来创建dom树。
最后，jsx不能带来任何性能上的优化。
关于虚拟dom:
jsx—>createElement–>虚拟don(js对象）–>真实的dom

总结流程图：

参考链接：
https://blog.csdn.net/weixin_33712881/article/details/89050876?ops_request_misc=&request_id=&biz_id=102&utm_term=jsx%25E6%2598%25AF%25E5%25A6%2582%25E4%25BD%2595%25E9%2598%25B2%25E6%25AD%25A2xss%25E6%2594%25BB%25E5%2587%25BB%25E7%259A%2584&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-6-89050876.pc_search_result_no_baidu_js