react學習筆記_01-jsx

const element = <h1>Hello, world!</h1>;

首先我們看到聲明瞭一個element元素，而他的內容並非字元串或者html。

它被稱為 JSX，是一個 JavaScript 的語法擴展我們建議在 React 中配合使用 JSX，JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式。JSX 可能會使人聯想到模版語言，但它具有 JavaScript 的全部功能。

在 JSX 中嵌入表達式

　　下麵案例中的{name}則為被嵌入到jsx中的表達式

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

在 JSX 語法中，你可以在大括弧內放置任何有效的 JavaScript 表達式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表達式。

function format(user){
    return user.name+'' "+user.gender;
}

const user={
    name:"zhangsan",
    gender:"男"
}

const element=(
　　<h1>hello,{format(user)}</h1>
）

ReactDom.render(
    element,
    document.getByElementId("id")
)

JSX 也是一個表達式

在編譯之後，JSX 表達式會被轉為普通 JavaScript 函數調用，並且對其取值後得到 JavaScript 對象。

也就是說，你可以在 if 語句和 for 迴圈的代碼塊中使用 JSX，將 JSX 賦值給變數，把 JSX 當作參數傳入，以及從函數中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 特定屬性：可以在jsx中為html標簽元素指定屬性，直接賦值方式和使用表達式方式

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

JSX 標簽里能夠包含很多子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 防止註入攻擊：

你可以安全地在 JSX 當中插入用戶輸入內容：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有輸入內容之前，預設會進行轉義。它可以確保在你的應用中，永遠不會註入那些並非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字元串。這樣可以有效地防止 XSS（cross-site-scripting, 跨站腳本）攻擊。

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 元素”，它們描述了你希望在屏幕上看到的內容。React 通過讀取這些對象，然後使用它們來構建 DOM 以及保持隨時更新。