开发完了一个项目了才回来研究React 一系列的技术,算是对自己的一个提高吧,也是小公司程序员的无奈。
JSX是什么?
JSX是javascript的语法的扩展。
为什么使用JSX?
1、React 认为渲染逻辑本质上与其他UI逻辑内存在耦合。
2、JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
3、在编译过程中就能提供有效的错误或者警告信息,类型安全。
4、JSX和UI 放在一起的方式,对开发来说,是视觉上能起到一定的辅助作用。
JSX 使用,
JSX 中可以嵌入js表达式,同时JSX自身也是个表达式
function formatName(user) {
if(user){
return <h1>{user.firstName}"_"{user.lastName} </h1>; {/*JSX 被当成了一个表达式*/}
}else{
return <h1>word!</h1>
}
} const user = {
firstName: 'Rain',
lastName: 'tdk'
}; const element = (
<div>
Hello, {formatName(user)}! {/*JSX嵌入了一个表达式*/}
</div>
); ReactDOM.render(
element,
document.getElementById('root')
);
JSX可以有效的防止注入攻击。
在渲染所有输入内容的之前默认会进行转义成字符串。这样就可以有效的防止xss(cross-site-scrpting)攻击。