React 之 JSX

开发完了一个项目了才回来研究React 一系列的技术，算是对本身的一个提升吧，也是小公司程序员的无奈。

JSX是什么？

　　JSX是javascript的语法的扩展。

为何使用JSX？

　　一、React 认为渲染逻辑本质上与其余UI逻辑内存在耦合。

　　二、JSX 执行更快，由于它在编译为 JavaScript 代码后进行了优化。

　　三、在编译过程当中就能提供有效的错误或者警告信息，类型安全。

　　四、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）攻击。