Optymalizowanie renderowania metodą reagowania za pomocą funkcji Częściowe zastosowanie

Question

Komponenty reaktywne porównują rekwizyty z równaniem odniesienia do obiektu, a po częściowym zastosowaniu funkcji otrzymuje się nową funkcję z innym odniesieniem, która powoduje, że komponent reagujący uruchamia ponowne renderowanie za każdym razem .

Czy ktoś napotkał ten problem?

Mam funkcję, która renderuje składnik w określonej karcie. A jednym z rekwizytów jest this.setTab.bind(this, tab), który zwraca nową funkcję za każdym razem. Byłoby naprawdę super, gdyby to był jakiś rodzaj niezmienność pomocnika, który pozwala na to, aby być równy na podstawie wartości związanej ...

Answer 1

Jeśli funkcja render opiera tylko na danych z this.props i this.state można zaimplementować shouldComponentUpdate method, aby porównać stare i nowe rekwizyty, a następnie powiedzieć React, kiedy dokładnie nie zmienił się przewodnik, aby zapobiec niepotrzebnemu ponownemu renderowaniu.

Należy jednak zachować ostrożność: jeśli logika w numerze shouldComponentUpdate jest niepoprawna (zwróci false, gdy coś się zmieni), komponent przestanie się aktualizować. Te błędy są trudne do znalezienia później, więc uważaj. (Użyj Profiler, aby dowiedzieć się, czy naprawdę potrzebujemy tego konkretnego przyrost wydajności.)

Answer 2

ja ciągnąc to bezpośrednio z docs plugin eslint "jsx-no-bind" i wspomina jedno możliwe rozwiązanie w celu zmniejszenia liczby:

---

wspólna sprawa wykorzystanie wiążą się uczynić to przy renderowaniu listy, aby mieć zwrotnego oddzielna każdej pozycji listy:

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}> 
      ... 
      </li> 
     )} 
     </ul> 
    ); 
    } 
}); 

Zamiast robić to w ten sposób, pociągnąć powtarzającego sekcję do własnego komponentu:

var List = React.createClass({ 
    render() { 
    return (
     <ul> 
     {this.props.items.map(item => 
      <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} /> 
     )} 
     </ul> 
    ); 
    } 
}); 

var ListItem = React.createClass({ 
    render() { 
    return (
     <li onClick={this._onClick}> 
     ... 
     </li> 
    ); 
    }, 
    _onClick() { 
    this.props.onItemClick(this.props.item.id); 
    } 
}); 

Spowoduje to przyspieszenie renderowania, ponieważ pozwoli uniknąć konieczności tworzenia nowych funkcji (poprzez wywołania bindów) dla każdego renderowania.