React 之 JSX

开发完了一个项目了才回来研究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）攻击。