İşlev ile Kısaltma İşleminin Kısmi Uygulamasının Optimize Edilmesi

Question

Tepki bileşenleri, nesneleri referans eşitliği ile karşılaştırır ve bir işlevi kısmen uyguladığınızda, her seferinde yeniden oluşturulmasını tetikleyen bir tepki bileşenine neden olan farklı bir referansla yeni bir işlev alırsınız .

Bu sorunla karşılaşan biri var mı?

Belirli bir sekmede bir bileşen oluşturan bir işlev var. Ve sahne oyunlarından biri, her seferinde yeni bir işlev döndüren this.setTab.bind(this, tab). senin render fonksiyon this.props ve this.state alınan verilere sadece dayanıyorsa bazıları bu sınır değerine dayalı eşit olmasını sağlar değişmezlik yardımcı tür ...

Answer 1

olsa daha çok güzel olurdu, sen uygulayabilir shouldComponentUpdate method eski ve yeni aksesuvarları ve durumları karşılaştırmak ve böylece bu gereksiz yeniden oluşturucuları önlemek için işleyicinin tam olarak ne zaman değişmediğine tepki vermek.

Bununla birlikte bir uyarı sözüyle şunu yapın: shouldComponentUpdate mantığınız yanlışsa (aslında bir şey değiştiğinde false döndürürse), bileşeniniz güncelleştirmeyi durdurur. Bu hatalar sonra bulmak zor, bu yüzden dikkat edin. Ben doğrudan eslint eklentisi docs "jsx-no-bind" bu çekiyorum

Answer 2

(. Gerçekten bu özel performans kazancı gerekiyorsa kullanın profilci öğrenmek için) ve sayısını azaltmak için muhtemel bir çözümü bahseder:

---

bir liste oluşturma listesini öğesi başına ayrı geri arama var ne zaman bağlama yaygın bir kullanım durumda işlemek

geçerli:

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

yerine bu şekilde yapıyor, kendi bileşeni içine tekrarlanan bölümü çekin:

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

Bu, görüntülemeyi hızlandırır, çünkü her işlemde yeni işlevler (çağrıları bağlayarak) oluşturma gereğini ortadan kaldırır.