影片中是輪到polo主講,內容延續上ㄧ章節在重構,與 Reactjs元件的生命週期

https://www.youtube.com/watch?v=1z7o9mHLrK0&feature=youtu.be

重點心得整理

1.[ES6] 箭頭函數 (簡化 function)
2.bind (處理 this 作用域 ,因為有closure 所以作用域不同,透過bind可以讓this 作用域一樣)
可以參考 承億 後半部更詳細的介紹 https://www.youtube.com/watch?v=14hNN6veRjc&t=1160s )
3.InputField.propTypes 這邊比較特別的型態是fn, 防呆與防止網頁error只會warning

4.React 表單元件的屬性有分
可控元件使用 value, checked
元件內部不會儲存狀態，因此必須透過 props 傳遞 value
明確指定表單元件的資料為何

不可控元件
defaultValue, defaultChecked
元件內部會儲存狀態，不可從外部控制

生命週期部分
Mounting: 當元件實例(instance)被建立，並且根據 props 作第一次的渲染時

 // Mounting:
  componentWillMount() {
    // 1. 這是第一次 render 前，更新 state 的最後機會：
    this.setState({ ageText: this.props.age + '歲' });
  }

  // Mounting:
  componentDidMount() {
    // 1. 如果你要操作實際的 DOM 元素：
    $('#app').hide();

    // 2. 如果你要請求 AJAX，或是設置 timer：
    $.ajax({ ... });
  }

Updating: 當元件 props 或 state 被更新，並重新渲染時

  componentWillReceiveProps(nextProps) {
    // 1. 如果你要根據新的 props 做一些運算：
    this.setState({ ageText: nextProps.age + '歲' });
  }

  // Updating:
  shouldComponentUpdate(nextProps, nextState) {
    // 1. 如果你想調校元件效能，不想要做沒有意義的 re-render，
    //    如下方只有在 id 不相同的情況下再 render 的話：
    return nextProps.id !== this.props.id;
  }

  // Updating:
  componentWillUpdate(nextProps, nextState) {
    // 1. 這是第 N 次 render 前，最後被調用的方法，
    //    通常可以拿來做 log
  }

  // Updating:
  componentDidUpdate(prevProps, prevState) {
    // 1. 如果你要操作更新後實際的 DOM 元素：
    $('#app').hide();
  }

Unmounting: 當元件實例被消滅時

  // Unmounting:
  componentWillUnmount() {
    // 1. 如果該元件消滅，也需要移除不必要的 AJAX 請求的話：
    xhr.abort();

    // 2. 如果你要移除不必要的傾聽事件：
    store.removeChangeListener(...);
  }

[ES6] 使用 promise 處理延遲(deferred)和非同步(asynchronous)

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('async'), 1000);
});

promise
  .then((res) => console.log(res))   // 定義非同步成功後，要執行什麼
  .catch((err) => console.log(err)); // 定義非同步錯誤後，要執行什麼
  

[Web API] 使用 fetch API 處理 AJAX

fetch ：調用 AJAX 回傳 promise 物件

Jason建議大家使用 github/fetch 這個程式庫，它實作了 Web 最新的 Fetch API，簡單又漂亮

使用Es6 可以透過 babel-polyfill 墊片轉完後所有的瀏覽器就有這個Fetch的功能嚕(

const url = '/login';
const options = {
  method: 'POST',
  headers: {}
};

fetch(url, options)
  .then((res) => res.json());