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）攻擊。