JSX語法

JSX 的基本語法規(guī)則

遇到HTML標(biāo)簽（以 < 開頭），就用HTML規(guī)則解析；遇到代碼塊JavaScript（以 { 開頭），就用JavaScript規(guī)則解析，比如

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

React的組件以大寫字母開頭，原生的HTML標(biāo)簽以小寫字母開頭。
你可以通過React.createElement來創(chuàng)建一個(gè)樹。第一個(gè)參數(shù)是標(biāo)簽，第二個(gè)參數(shù)是一個(gè)屬性對(duì)象，第三個(gè)是子節(jié)點(diǎn)。

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);

js作為屬性值和子節(jié)點(diǎn)才需要用大括號(hào){}括起來，因?yàn)镴SX最終會(huì)轉(zhuǎn)換成JS輸出，所以表達(dá)式只能用簡(jiǎn)單行內(nèi)運(yùn)算符如三母運(yùn)算符，而不能使用if else

//屬性表達(dá)式
// 輸入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 輸出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);
  
//子節(jié)點(diǎn)表達(dá)式
// 輸入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 輸出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

樣式

style后傳入一個(gè)js的對(duì)象而不是css字符串，最外層的{}表示是js，內(nèi)層的{}表示為對(duì)象

<span style={{color:'red'}}></span>

事件

React組件的事件和屬性都是駝峰的形式，比如：

<!-- 原h(huán)tml寫法 -->
<form onsubmit="xxx"></form>
<!-- react寫法 -->
render: function(){
return
<form onSubmit="xxx"></form>
}

Refs

我們利用 ref 屬性給子組件命名，通過this.refs引用真實(shí)的DOM節(jié)點(diǎn)。

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    this.refs.author.value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
      </form>
    );
  }
});

變量

react變量似乎必須要加var，存疑?

數(shù)據(jù)流

React中數(shù)據(jù)是沿著組件樹通過props傳遞，從上到下（最外層到最內(nèi)層）單向流動(dòng)的。

哪些組件應(yīng)該有state

常用的模式是創(chuàng)建多個(gè)只負(fù)責(zé)渲染數(shù)據(jù)的無狀態(tài)（stateless）組件，在它們的上層創(chuàng)建一個(gè)有狀態(tài)（stateful）組件并把它的狀態(tài)通過props傳給子級(jí)。這個(gè)有狀態(tài)的組件封裝了所有用戶的交互邏輯，而這些無狀態(tài)組件則負(fù)責(zé)聲明式地渲染數(shù)據(jù)。

參考：
關(guān)于JSX語法
深入理解JSX
react中文版
react入門教程