我要评论“jsx”
jsx就是javascript和xml结合的一种格式。
react发明了jsx，利用html语法来创建虚拟dom。当遇到<，jsx就当html解析，遇到{就当javascript解析。
jsx，是一个 javascript 的语法扩展。jsx 可以很好地描述 ui 应该呈现出它应有交互的本质形式。
jsx 仅仅只是 react.createelement(component, props, ...children) 函数的语法糖
jsx将xml语法直接加入js中,通过代码而非模板来高效的定义界面。之后jsx通过翻译器转换为纯js再由浏览器执行。在实际开发中，jsx在产品打包阶段都已经编译成纯javascript，jsx的语法不会带来任何性能影响。另外，由于jsx只是一种语法，因此javascript的关键字class, for等也不能出现在xml中，而要如例子中所示，使用classname, htmlfor代替，这和原生dom在javascript中的创建也是一致的。jsx只是创建虚拟dom的一种语法格式而已,除了用jsx,我们也可以用js代码来创建虚拟dom.
“jsx表示对象”
babel 会把 jsx 转译成一个名为 react.createelement() 函数调用。
1 const element = ( 2 <h1 classname="greeting"> 3 hello, world! 4 </h1> 5 );
等效
1 const element = react.createelement(
2 'h1',
3 {classname: 'greeting'},
4 'hello, world!'
5 );
react.createelement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
1 // 注意：这是简化过的结构
2 const element = {
3 type: 'h1',
4 props: {
5 classname: 'greeting',
6 children: 'hello, world!'
7 }
8 };
这些对象被称为 “react 元素”。它们描述了你希望在屏幕上看到的内容。react 通过读取这些对象，然后使用它们来构建 dom 以及保持随时更新。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论