React元件監聽視窗變化

基本思路：

改變事件方法中的this指向

constructor(props) {
  this.resizeBind = this.resizeTTY.bind(this)
}

新增監聽

componentDidMount() {
  window.addEventListener('resize', this.resizeBind)
}

登出事件

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeBind)
}

錯誤寫法：

• 不在constructor中繫結resizeTTY的this指向，這時resizeTTY中的this指向window而不是React元件，在resizeTTY中獲取React元件的state或者使用setState方法會丟擲錯誤：（socketList是state的屬性）

Cannot read property 'socketList' of undefined

• 嘗試在constructor中用bind繫結this但不賦值給新函式，這時編譯不再報錯，但視窗變化時resizeTTY執行仍然丟擲錯誤，這時輸出this仍指向window物件
  這是因為bind()函式執行後會返回指定this改造後的原函式拷貝，但原函式不會改變，所以我們需要使用的是bind返回的新函式而不是resizeTTY

constructor(props) {
  this.resizeTTY.bind(this)
}
componentDidMount() {
  window.addEventListener('resize', this.resizeTTY)
}
componentWillUnmount() {
  window.removeEventListener('resize', this.resizeTTY)
}

Cannot read property 'socketList' of undefined

• 不在componentWillUnmount生命週期中登出事件
  ，會導致元件銷燬後仍在監聽