前端小知識10點（2019.4.14）

android_c 發布于2019-08-23 17:04 / 1783人閱讀

摘要：函數中最好從和讀取數據，僅在寶貴的時刻用。服務端渲染將在廢棄，改成這個方法會從中刪除已經掛載的并且清理上面注冊的事件和狀態，如果中沒有掛載，則調用此函數不執行任何操作。

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 后，點擊遮罩層或右上角叉，不會關閉模態框

8、利用 ref 實現

滾動到最下方

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 (
      
        //100個一定高度的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

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

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;
      });

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

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);

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

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

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

（完）

GPU云服務器云服務器前端知識小知識前端知識阿里云 html前端知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103746.html

前端小知識10點（2019.5.18）

摘要：當給數組的賦負數或小數時，數組的長度有無變化由此可見，的屬性只計算非負整數下標不計算負數小數項目熱更新慢并且是在時卡住怎么辦本人實際上是文件里多寫了個逗號。。。。 showImg(https://segmentfault.com/img/remote/1460000019223033); 1、當給數組的index賦負數或小數時，數組的長度有無變化？ let arr=[] arr...

neuSnail 2019-08-26 13:50 評論0 收藏0
前端小知識10點（2019.5.28）

摘要：可以看到，這組參數，以上三條全部滿足。詳情請參考瀏覽器類別判斷安全瀏覽器完 showImg(https://segmentfault.com/img/remote/1460000019316485); 1、火狐（firefox）的mouseenter問題 { this.mouseEnter(e,); }} onBlur={() => {...

Imfan 2019-08-26 13:57 評論0 收藏0
前端小知識10點（2019.5.2）

摘要：為什么整體上是一個匿名函數自調用因為匿名函數自執行里面的所有東西都是局部的，這樣引用時，能防止和其他的代碼沖突。對象的類型標簽是。由于代表的是空指針大多數平臺下值為，因此，的類型標簽也成為了，就錯誤的返回了。 showImg(https://segmentfault.com/img/remote/1460000019062498); 1、為什么 jQuery 整體上是一個匿名函數自調用...

yibinnn 2019-08-23 17:16 評論0 收藏0