Optimieren des Reactor-Renderings mit Funktion Partial Application

Question

React-Komponenten vergleichen Requisiten mit Objektreferenzgleichheit, und wenn Sie eine Funktion teilweise anwenden, erhalten Sie eine neue Funktion mit einer anderen Referenz, die bewirkt, dass eine reaktive Komponente jedes Mal erneut rending auslöst .

Hat jemand dieses Problem konfrontiert?

Ich habe eine Funktion, die eine Komponente in einer bestimmten Registerkarte rendert. Und eine der Requisiten ist this.setTab.bind(this, tab), die jedes Mal eine neue Funktion zurückgibt. Es wäre wirklich cool, wenn es irgendeine Art von Unveränderlichkeit Helfer war, die dies auf den gebundenen Wert gleich basiert sein können ...

Answer 1

Wenn Ihr render Funktion nur auf Daten von this.props und this.state beruht, können Sie das Gerät shouldComponentUpdate method, um alte und neue Requisiten zu vergleichen und so React anzugeben, wenn sich der Handler nicht geändert hat, um diese unnötigen Re-Render zu vermeiden.

Nehmen Sie dies mit einem Wort der Vorsicht: Wenn Ihre Logik in shouldComponentUpdate falsch ist (so gibt es false zurück, wenn sich etwas tatsächlich geändert hat), wird Ihre Komponente die Aktualisierung stoppen. Diese Bugs sind schwer zu finden, also Vorsicht. (Verwenden Sie Profiler, um herauszufinden, ob Sie wirklich diese spezifische Leistungssteigerung benötigen.)

Answer 2

ich ziehen werde dies direkt von den eslint Plugin docs "jsx-no-bind", und es erwähnt eine mögliche Lösung, um die Zahl zu reduzieren:

---

ein gemeinsamer ist Anwendungsfall bindet in machen, wenn eine Liste zu machen, einen separaten Rückruf pro Listenelement haben:

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> 
    ); 
    } 
}); 

Anstatt es auf diese Art und Weise zu tun, ziehen sie den wiederholten Abschnitt in seine eigenen Komponente:

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); 
    } 
}); 

Dadurch wird das Rendern beschleunigt, da die Erstellung neuer Funktionen (durch Bind-Aufrufe) bei jedem Rendervorgang vermieden wird.