React學習（一）

一. 容許HTML和JavaScript代碼混寫，使用JSX語法：遇到HTML標籤就用HTML規則解析，遇到{}的代碼塊就用js解析

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

 

二. createClass用於生成組件類

（1）組件類都有一個render方法用於輸出組件

（2）組件類第一個字母必須大寫

（3）組件類只有一個頂層標籤

（4）組件添加屬性，class須要寫成className，for須要寫成htmlFor。或者使用 style，style賦值不能是字符串，應該是對象形式，key值使用駝峯

（5）this.props屬性與組件屬性一一對應

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

 

三. propTypes驗證組件類傳入的屬性是否符合要求

var data = 123;

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired, //title是必傳的字符串，傳入123數字控制檯會報錯
  },

  render: function() {
    return <h1> {this.props.title} </h1>;
  }
});

ReactDOM.render(
  <MyTitle title={data} />,
  document.getElementById('example')
);

 

四. 組價並非真實的DOM，而是在內存中的虛擬DOM，只有組件插入文檔，纔會變成真實的DOM。根據React設計，全部DOM變更都先在虛擬DOM上進行，再將實際變更部分反映在真實DOM上，這種算法叫DOM Diff，它能夠極大提升網頁性能。

經過ref從組件獲取真實DOM節點

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

 

五. 狀態機this.state：組件當作一個狀態機，getInitialState定義初始狀態，用戶互動狀態變化，觸發從新渲染UI。

屬性經過this.state獲取，修改屬性this.setState

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

 

六. event.target.value 讀取用戶輸入

綁定事件駝峯 onClick={this.handleClick}，方法不加括號，加了括號不會在點擊時執行，會當即執行

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

 

七. 生命週期函數：componentWillMount、componentDidMount、componentWillUpdate、componentDidUpdate、componentWillUnMount

Mounting：getInitialState、componentWillMount、render、componentDidMount

Updating：componentWillReceiveProps、shouldComponentUpdate、 componentWillUpdate、render、componentDidUpdate

Unmounting：componentWillUnmount 

 

參考：http://www.ruanyifeng.com/blog/2015/03/react.html