react學習（3）-jsx語法

深刻JSX

JSX是一個JavaScript語法擴展，相似於XML。你可使用React，能夠進行JSX語法到JavaScript的轉換

Why JSX?

react不是必須使用JSX。你可使用普通的JS。然而，咱們建議使用JSX由於它定義樹結構（dom）簡潔並且是咱們熟悉的語法。簡明的代碼結構更利於開發和維護。 XML有着開閉標籤，在構建複雜的樹形結構時，比函數調用和對象字面量更易讀。

HTML Tags vs. React Components

react能夠渲染HTML標籤（字符串）或react 組件（類）。渲染一個HTML標籤，JSX只使用首字母小寫標籤名稱：

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染一個react組件，只需建立一個首字母大寫的局部變量：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

react使用首字母大小寫的慣例區分本地組件和html標籤例如：

<Person/>(這是react組件)
<p>這是html標籤</p>

jsx中原有的javascript的保留字都不能使用，例如：class,for必須使用className,htmlFor;

JSX並非新語言，也沒有改變JavaScript的語法，只是對JavaScript的拓展。

//使用JSX
React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById('example')
);

//不使用JSX
React.render(
    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    document.getElementById('example')
);

jsx transform

React JSX從相似於xml的語法轉換成javascript。xml的元素，屬性和子節點轉換成參數傳入React.createElement方法

var Nav, Profile;
// 輸入(JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 轉換後(JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JavaScript 表達式

使用JavaScript表達式爲一個屬性值，將表達式寫在一對花括號（{}）中代替雙引號（「」）。

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

布爾型屬性

// These two are equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button
<input type="button" />;
<input type="button" disabled={false} />;

子表達式

// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

註釋

在JSX添加註釋是很容易的；他們只是JS表達式。當你在一個標籤區域內，你只須要當心地把{ }放在註釋的周圍。以下：

var content = (
  <Nav>
    {/* 我是註釋, 使用{} 包圍着*/}
    <Person
      /* 我是
         多行
         註釋*/
      name={window.isLoggedIn ? window.name : ''} //結尾處註釋
    />
  </Nav>
);

jsx是相似於html可是不徹底相同，可是仍是有不一樣的地方

JSX解構賦值

若是提早就知道了組件的屬性的話，寫起來很容易。例如component組件有兩個動態的屬性foo和bar：

var component = <Component foo={x} bar={y} />;

而實際上，有些屬性多是後續添加的，咱們沒辦法一開始就肯定，咱們可能會寫出下面很差的代碼：

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

這樣寫是錯誤的，由於咱們手動直接添加的屬性React後續沒辦法檢查到屬性類型錯誤，也就是說，當咱們手動添加的屬性發生類型錯誤時，在控制檯是看不到錯誤信息的。

在React的設定中，初始化完props後，props是不可變的。改變props會引發沒法想象的後果。

解構屬性

爲了解決這個問題，React引入瞭解構屬性，其實就是es6的語法實現具體看：這裏

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

你可使用結構賦值方式和普通的方式混合使用，但若是碰到同名的屬性的時候後者覆蓋前者的屬性以下：

var props = { foo: 'default' };
  var component = <Component {...props} foo={'override'} />;
  console.log(component.props.foo); // 'override'

JSX 陷阱

HTML 實體

｛/*
正常顯示
First · Second
*/｝
<div>First &middot; Second</div>
｛/*
顯示異常
First &middot; Second
*/｝
<div>{'First &middot; Second'}</div>

那應該怎麼辦呢？

1.使用unicode編碼

2.String.fromCharCode(183)

3.使用屬性：dangerouslySetInnerHTML如：<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

自定義HTML屬性

若是在編寫React過程當中使用了自定義屬性，React不會渲染的

html中沒有發現有dd屬性

要想使用請在屬性前面添加data-

style屬性

在React中寫行內樣式時，須要寫在雙大括號中（{{}}），不能採用引號的書寫方式

React.render(
    <div style={{width:'100px',height:'100px;',display:'block'}}>
        xxxxx
    </div>,
    document.getElementById('example')
);