反應：不要渲染表中不可見的組件

我有一個具有> 30行和> 50列的表。每行和每個單元格都是特定的React組件，因爲您可以操縱它們，它們會根據更改的數據更改行爲並進行查看。反應：不要渲染表中不可見的組件

所以我的組件層次結構是這樣的：

Grid -> Row -> Cell

我使用MobX來處理應用程序的狀態，它似乎有點慢，當它涉及到的是影響一些電池組件的狀態變化。由於不是每個單元格和行都對用戶可見（表格可滾動），我認爲這可能是性能改進，只讓React組件實際可見。

我想知道是否可能有一個現有的組件，或者我將如何以高性能的方式創建這樣的組件。

此外，我認識到，每當狀態改變時，單元格和行都會重新渲染。也許這與事實有關，即每個單元格和行組件注入appStore。我如何告訴MobX它只應該改變那些已更改的組件？這甚至有可能嗎？

所以基本上我正在尋找任何一種方式。

來源

2017-02-10 Johannes Klauß

我不熟悉Mobx或與此相關的任何解決方案，但只顯示可見組件在社區中採用了「無限」組件名稱。所以搜索「無限滾動」或「無限列表」可能會給你一些想法。

我找到並享受的最好的圖書館是react-infinite。基本上，圖書館是一個HOC，你傳遞了兒童組件。

如果您正在尋找沒有第三方庫的純粹JavaScript實現，Facebook團隊的Ben Alpert發佈了this fiddle/code on SO。

來源

2017-02-10 12:53:09

您可以在行組件上使用React的shouldComponentUpdate（PureComponent實現它），以防止重新渲染。如果您有<Row key={person.id} person={person} edit={this.edit}/>，則SCU會比較person和edit道具，如果它們相同，則會阻止重新渲染該行。所以當你追加到行時，只有被更改的行會重新渲染。

這種優化將受挫如果key丙是數組索引或edit函數是一個內聯函數 - edit={this.edit}每次呈現相同的參考，edit={() => this.edit(person.id}每次呈現不同的參考。

https://60devs.com/pure-component-in-react.html

https://mobx.js.org/best/react-performance.html

來源

2017-02-10 13:06:26 aitchnyu

我會用react-visibility-sensor去。

喜歡的東西：

const VisibilitySensor = require('react-visibility-sensor'); 

class TableRow extends React.Component { 

    onChange(isVisible) { 
     this.setState({isVisible: isVisible}); 
    }; 

    render() { 
     const { isVisible } = this.state; 

     return (
      <VisibilitySensor onChange={onChange}> 
       {isVisible && {/* Table row content */}} 
      </VisibilitySensor> 
     ); 
    } 
}

來源

2017-02-10 13:16:07 Daniel

反應：不要渲染表中不可見的組件

回答

相關問題