前端小知識10點（2019.4.14）

一、React.PureComponent 與 React.Component 的區別
React.PureComponent 與 React.Component 幾乎徹底相同，但 React.PureComponent 經過 prop 和 state 的淺對比來實現 shouldComponentUpate()
React.Component：

class A extends React.Component{
  //xxx
}

React.PureComponent：

class B extends React.PureComponent{
  //xxx
}

注意：若是 props 和 state 包含複雜的數據結構，React.PureComponent 可能會因深層數據不一致而產生錯誤的否認判斷，即 state、props 深層的數據已經改變，可是視圖沒有更新。

二、shouldComponentUpate() 的機制
只要 state、props 的狀態發生改變，就會 re-render，即便 state、props 的值和以前同樣

有三種辦法優化 shouldComponentUpate 生命週期
（1）只用簡單的 props 和 state 時，考慮 PureComponent （理由如 第 1 點）
（2）當開發者知道 深層的數據結構 已經發生改變時使用 forceUpate() 
（3）使用 不可變對象（如 Immutable.js） 來促進嵌套數據的快速比較

三、React 強制更新狀態之 forceUpdate()
咱們都知道，當 state、props 狀態改變時，React 會重渲染組件。

但若是你不用 props、state，而是其餘數據，而且在該數據變化時，須要更新組件的話，就能夠調用 forceUpdate()，來強制渲染

舉個例子：

class A extends Component {
  this.a=1

  Add(){
    this.a+=1
    this.forceUpdate()
  } 
  //調用Add() ...
}

流程：當調用 forceUpdate() 方法後

注意：
（1）若是改變標籤的話，React 僅會更新 DOM。
（2）render() 函數中最好從 this.props 和 this.state 讀取數據，forceUpdate() 僅在「寶貴」的時刻用。

四、服務端渲染
ReactDOM.render() 將在 React.v17廢棄，改爲 ReactDOM.hydrate()

五、ReactDOM.unmountComponentAtNode(container)
這個方法會從 DOM 中刪除已經掛載的 React component 而且清理上面 註冊的事件 和 狀態，若是 container 中沒有掛載 component，則調用此函數不執行任何操做。

返回 true 或 false

六、babel-plugin-transform-remove-console
在打包React項目後，清除全部console.log()語句

七、antd 的 Modal 去掉 onCancel 後，點擊遮罩層或右上角叉，不會關閉 模態框

<Modal
    title={""}
    visible={this.state.isible}
    //不能註釋掉 onCancel
    onCancel={this.handleCancel}
>
</Modal>

八、利用 ref 實現<div>滾動到最下方

class A extends Component {
  constructor(props){
     //xxx
    this.aa = React.createRef();
  }
  render() {
    if(this.aa&&this.aa.current){
      this.aa.current.scrollTop = this.aa.current.scrollHeight
    }

    return (
      <div
            style={{height:'330px',border:'1px red solid',overflow: 'auto'}}
            ref={this.aa}
          >
        //100個必定高度的div
      </div>
  )}
}

九、ESLint Unexpected use of isNaN：錯誤使用isNaN

// bad
isNaN('1.2'); // false
isNaN('1.2.3'); // true
// good
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true

https://stackoverflow.com/questions/46677774/eslint-unexpected-use-of-isnan/48747405#48747405

十、Assignment to property of function parameter 'item' ：循環時，不能添加/刪除對象屬性

let obj=[{a:1,b:2},{c:3,d:4}]
//bad
obj.map((item, index) => {
      //添加Index屬性    
      item.index = index + 1;
  });
//good

columnsData.forEach((item, index) => {
        // 添加序號
        item.index = index + 1;
      });

https://github.com/airbnb/javascript/issues/1653

十一、error Use array destructuring：使用數組結構來賦值

//bad
newTime = array[0];
//good
[newTime] = array;

十二、error Use object destructuring：使用對象結構來賦值

//bad
const clientWidth = document.body.clientWidth;
//good
const {body:{clientWidth}} = document;

1三、Require Radix Parameter (radix)：缺乏參數

//bad
parseInt(numberOne);
//good
parseInt(numberOne,10);

https://eslint.org/docs/rules/radix#require-radix-parameter-radix

1四、禁止瀏覽器雙擊選中文字

.aa{
  //瀏覽器雙擊選不到文字
  -webkit-user-select: none;
}

---

（完）