成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端小知識10點（2019.4.14）

android_c / 1793人閱讀

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

1、React.PureComponent 與 React.Component 的區(qū)別
React.PureComponent?與?React.Component?幾乎完全相同，但?React.PureComponent?通過 prop 和 state 的淺對比來實現(xiàn)?shouldComponentUpate()
React.Component：

class A extends React.Component{
  //xxx
}

React.PureComponent：

class B extends React.PureComponent{
  //xxx
}

注意：如果 props 和 state 包含復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，React.PureComponent 可能會因深層數(shù)據(jù)不一致而產(chǎn)生錯誤的否定判斷，即 state、props 深層的數(shù)據(jù)已經(jīng)改變，但是視圖沒有更新。

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

有三種辦法優(yōu)化 shouldComponentUpate 生命周期
（1）只用簡單的 props 和 state 時，考慮?PureComponent?（理由如 第 1 點）
（2）當(dāng)開發(fā)者知道 深層的數(shù)據(jù)結(jié)構(gòu) 已經(jīng)發(fā)生改變時使用?forceUpate()?
（3）使用?不可變對象（如 Immutable.js）?來促進(jìn)嵌套數(shù)據(jù)的快速比較

3、React 強(qiáng)制更新狀態(tài)之 forceUpdate()
我們都知道，當(dāng) state、props 狀態(tài)改變時，React 會重渲染組件。

但如果你不用 props、state，而是其他數(shù)據(jù)，并且在該數(shù)據(jù)變化時，需要更新組件的話，就可以調(diào)用 forceUpdate()，來強(qiáng)制渲染

舉個例子：

class A extends Component {
  this.a=1

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

流程：當(dāng)調(diào)用 forceUpdate() 方法后

注意：
（1）如果改變標(biāo)簽的話，React 僅會更新 DOM。
（2）render() 函數(shù)中最好從 this.props 和 this.state 讀取數(shù)據(jù)，forceUpdate()?僅在“寶貴”的時刻用。

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

5、ReactDOM.unmountComponentAtNode(container)
這個方法會從 DOM 中刪除已經(jīng)掛載的 React component 并且清理上面 注冊的事件 和 狀態(tài)，如果 container 中沒有掛載 component，則調(diào)用此函數(shù)不執(zhí)行任何操作。

返回 true 或 false

6、babel-plugin-transform-remove-console
在打包React項目后，清除所有console.log()語句

7、antd 的 Modal 去掉 onCancel 后，點擊遮罩層或右上角叉，不會關(guān)閉 模態(tài)框

8、利用 ref 實現(xiàn)

滾動到最下方

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" ：循環(huán)時，不能添加/刪除對象屬性

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：使用數(shù)組結(jié)構(gòu)來賦值

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

12、error Use object destructuring：使用對象結(jié)構(gòu)來賦值

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

13、Require Radix Parameter (radix)：缺少參數(shù)

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

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

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

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

（完）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103746.html

相關(guān)文章

  • 前端小知識10點（2019.5.18）

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

    neuSnail 評論0 收藏0

  • 前端小知識10點（2019.5.28）

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

    Imfan 評論0 收藏0

  • 前端小知識10點（2019.5.2）

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

    yibinnn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<