第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React.PureComponent 呈現(xiàn)列表組件中的所有項(xiàng)目

React.PureComponent 呈現(xiàn)列表組件中的所有項(xiàng)目

溫溫醬 2022-01-07 14:20:59
我們使用 ReactJS 創(chuàng)建了一個(gè)可重用的列表組件。但是,由于性能問題,我們決定實(shí)現(xiàn) - shouldComponentUpdate方法,條件是我的列表組件何時(shí)呈現(xiàn)public shouldComponentUpdate(nextProps: TreeItemInternalProps, nextState: {}): boolean {  if (this.props.treeObject.selected !== nextProps.treeObject.selected) {    return true;  }  if (this.props.treeObject.expanded !== nextProps.treeObject.expanded) {      return true;    }  return false;}意思是,我只想在列表項(xiàng)復(fù)選框的值更改時(shí)才呈現(xiàn)我的組件。比方說,由于某種原因,我不能再這樣做了?,F(xiàn)在,我的替代方案是使用 PureComponent 進(jìn)行淺比較。因此,它應(yīng)該只呈現(xiàn)更改的列表項(xiàng)。但是,即使在使用 PureComponent 之后使用,整個(gè)組件也會(huì)被渲染。要正確解釋該場景,請參閱以下屏幕截圖 -不使用 PureComponent / 使用 shouldComponentUpdate 中的條件檢查在這里,你可以看到日志“組件被渲染”只被調(diào)用了一次,意思是,只針對我在 prop 中所做的更改(這是相同的要求,我想使用 PureComponent 來實(shí)現(xiàn))使用 PureComponent在這里,您可以看到日志“組件已渲染”被調(diào)用了 3 次,即使我只更改了第一個(gè)列表項(xiàng)的 props。這是使用 PureComponent
查看完整描述

2 回答

?
翻翻過去那場雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

PureComponent 始終為您渲染,因?yàn)槟腜rops或State包含在父組件重新渲染期間在父組件中創(chuàng)建的任何對象或數(shù)組。


正如其他人所說,它對重新渲染進(jìn)行了淺層比較(意味著對象引用不會(huì)等于 NEW 對象引用,即使它們是 DEEP 相等),所以父組件是它的 PureComponent 子組件的瓶頸,因?yàn)槊看沃匦落秩径紩?huì)重新創(chuàng)建一個(gè)全新的對象引用


如果您真的想使用 PureComponent,則必須將組件中的所有其他道具簡化為基元或?qū)ο?數(shù)組,在每次重新渲染父級時(shí)都不會(huì)獲得新的引用


問題示例:


class Todo extends PureComponent {

  render() {

    return <div>this.props.foo</div>;

  }

}


class MyTodoList extends Component {

 render () {

   const fooBar = {foo: 'bar'}

   return <Todo fooBar={fooBar} />

  }

}

修復(fù)示例:


class Todo extends PureComponent {

  render() {

    return <div>this.props.foo</div>;

  }

}


class MyTodoList extends Component {

 render () {

   return <Todo fooBar={props.fooBar} />

  }

}

可能您想要做的最好的事情就是盡可能高地將對象創(chuàng)建提升到不會(huì)重新渲染此類更改的組件,或者將每個(gè)單獨(dú)的道具簡化為非對象。


查看完整回答
反對 回復(fù) 2022-01-07
?
森欄

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊

React.PureComponent 對它們的 props 和 state 進(jìn)行了淺層比較。因此更改 state 或 props 的 object 屬性不會(huì)重新渲染組件。只有當(dāng)利益的狀態(tài)或道具發(fā)生變化時(shí),我們才需要重建狀態(tài)或道具。例如,我們可以編寫如下代碼,僅在設(shè)置 forceRender 標(biāo)志時(shí)重新渲染。


class ShalloWCompareComponent extends React.PureComponent {

  constructor() {

    super();

    this.state = {

      userArray: [1, 2, 3, 4, 5]

    }

  }


  update() {

    const { forceRender } = this.props;

    const { userArray } = this.state;

    if (forceRender) {

      this.setState({

        userArray: [...userArray, 6]

      });

    } else {

      this.setState({

        userArray: userArray.push(6)

      });

    }

  }


  render() {

    return <b>Array Length is: {this.state.userArray.length}</b>

  }

}

如果該組件接收到 forceRender={false} 的 props,由于 React.PureComponent 的淺比較,調(diào)用 update() 不會(huì)重新渲染該組件。


查看完整回答
反對 回復(fù) 2022-01-07
  • 2 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號