亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端小知識(shí)10點(diǎn)（2019.4.14）

android_c / 1839人閱讀

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

1、React.PureComponent 與 React.Component 的區(qū)別
React.PureComponent?與?React.Component?幾乎完全相同，但?React.PureComponent?通過(guò) prop 和 state 的淺對(duì)比來(lái)實(shí)現(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 可能會(huì)因深層數(shù)據(jù)不一致而產(chǎn)生錯(cuò)誤的否定判斷，即 state、props 深層的數(shù)據(jù)已經(jīng)改變，但是視圖沒(méi)有更新。

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

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

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

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

舉個(gè)例子：

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 僅會(huì)更新 DOM。
（2）render() 函數(shù)中最好從 this.props 和 this.state 讀取數(shù)據(jù)，forceUpdate()?僅在“寶貴”的時(shí)刻用。

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

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

返回 true 或 false

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

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

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

滾動(dòng)到最下方

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個(gè)一定高度的div
      

  )}
}

9、ESLint Unexpected use of isNaN：錯(cuò)誤使用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)時(shí)，不能添加/刪除對(duì)象屬性

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) => {
        // 添加序號(hào)
        item.index = index + 1;
      });

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

11、error Use array destructuring：使用數(shù)組結(jié)構(gòu)來(lái)賦值

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

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

//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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103746.html

相關(guān)文章

  • 前端小知識(shí)10點(diǎn)（2019.5.18）

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

    neuSnail 評(píng)論0 收藏0

  • 前端小知識(shí)10點(diǎn)（2019.5.28）

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

    Imfan 評(píng)論0 收藏0

  • 前端小知識(shí)10點(diǎn)（2019.5.2）

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

    yibinnn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<