前端小知識10點（2019.4.14）

1、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 深層的資料已經改變，但是檢視沒有更新。

2、shouldComponentUpate() 的機制
只要 state、props 的狀態發生改變，就會 re-render，即使 state、props 的值和之前一樣

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

3、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() 僅在“寶貴”的時刻用。

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

5、ReactDOM.unmountComponentAtNode(container)
這個方法會從 DOM 中刪除已經掛載的 React component 並且清理上面註冊的事件和狀態，如果 container 中沒有掛載 component，則呼叫此函式不執行任何操作。

返回 true 或 false

6、babel-plugin-transform-remove-console
在打包React專案後，清除所有console.log()語句

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

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

8、利用 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>
  )}
}
複製程式碼

9、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
複製程式碼

stackoverflow.com/questions/4…

10、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;
      });
複製程式碼

github.com/airbnb/java…

11、error Use array destructuring：使用陣列結構來賦值

//bad
newTime = array[0];
//good
[newTime] = array;
複製程式碼

12、error Use object destructuring：使用物件結構來賦值

//bad
const clientWidth = document.body.clientWidth;
//good
const {body:{clientWidth}} = document;
複製程式碼

13、Require Radix Parameter (radix)：缺少引數

//bad
parseInt(numberOne);
//good
parseInt(numberOne,10);
複製程式碼

eslint.org/docs/rules/…

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

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

（完）

前端小知識10點（2019.4.14）

相關文章