怎么在html5中直接编译jsx

Question

怎么在html5中直接编译jsx

Answer 1

在html5中直接编译jsx的方法：1、背景说明：React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建，例如：var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root = React.createElement('ul', { className: 'my-list' }, child1, child2);2、以上代码可读性并不好，于是React发明了JSX，利用熟悉的HTML语法来创建虚拟DOM：var root =(<ul className="my-list"><li>First Text Content</li><li>Second Text Content</li></ul>);以上代码将XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。也就是用html引擎直接解析执行。

Answer 2

在html5中直接编译jsx的方法：1、背景说明：React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建，例如：var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root = React.createElement('ul', { className: 'my-list' }, child1, child2);2、以上代码可读性并不好，于是React发明了JSX，利用熟悉的HTML语法来创建虚拟DOM：var root =(<ul className="my-list"><li>First Text Content</li><li>Second Text Content</li></ul>);以上代码将XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。也就是用html引擎直接解析执行。