iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗系列 第 8

Reactjs重構X 順便了解生命週期

  • 分享至 

  • xImage
  •  

影片中是輪到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());

上一篇
繼續Reactjs 入門,跨進去拉
下一篇
學習redux心得報告
系列文
線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言