Reagieren JS memoization auf Listenelemente

Question

Wenn ich eine einfache Anwendung, so etwas wie dieses:

function renderRow(company) { 
return DOM.li({ 
     className: 'item' 
    }, 
    company.title); 
} 

function renderApp(companies) { 
    return DOM.ul({ 
     className: 'list' 
    }, 
    companies.sort(function(a, b) { 
     return a.votes - b.votes; 
    }).map(renderRow)) 
} 
var appModel = getCompaniesJSON(100); 
renderComponent(renderApp(appModel), document.body); 

Und ich möchte nicht jedes Listenelement rerender, wenn ein Titel eines Unternehmens nicht geändert hat - ist es eine Möglichkeit, eine sollteComponentUpdate-Funktion für die Zeilen (Li-Elemente) zu implementieren?

Answer 1

Dies kann durch Verschieben des Ausgangs renderRow in eine separate Komponente <Row title={company.title} /> erfolgen. Dann würden Sie in der Lage sein shouldComponentUpdate für jede Zeile Element verwenden Überprüfung, ob die Stütze title hat sich geändert:

In <Row/> Komponente:

shouldComponentUpdate(nextProps, nextState){ 
    return nextProps.title !== this.props.title; 
}