在Js代码里面写HTML, 其实就是构造了一个个的Dom对象,如果单纯的用JS来写,会非常冗余而且不能很清晰的看清Dom树的结构,因此就有了JSX,直接用HTML的写法在JS中写Dom
{
tag: 'div'
attrs: { className: 'userName', id: 'userId'},
children: [
{
tag: 'div',
attrs: { className: 'title' },
children: ['jerry']
},
{
tag: 'div',
attrs: { id: "content"}
children: ['1028568']
}
]
}
使用JSX,就会有一个编译的过程,将HTML写的Dom变异成JS对象
为什么会有JavaScript对象呢:
我们在得到一个UI对象时,不一定会把它渲染在普通的页面上,可能会把他渲染在canvas(react-canvas)的上面、或者是react-native上面,因此需要把react-dom单独抽离出来
有了JavaScript对象之后,就可以在数据发生改变需要重新渲染页面的时候,用比较快的算法来操作JS对象(避免直接操作页面上的Dom),这样可以极大的提高效率,性能得到很大的优化
JSX可以防范XSS攻击
当你通过{html}进行插入html代码的时候,React会自动将html转化成字符串,Reat在重新渲染页面的会后将所有进行转码,确保不会注入任何没显示编写的数据,所有数据的页面渲染之前都会被转成字符串,因此你可以防止XSS攻击
JSX表示对象:
Babel会把JSX转译成React.createElement()函数调用
const element = (
<h1 className = "greeting">
hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'}
'hello, world!'
);
React.createElement()会预先执行一些检查,以帮助你编写无错的代码,但实际上它创建了一个这样的对象:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'hello, world!'
}
};
React通过读取这些JavaScript对象来构建Dom树,并且随时保持更新