javascript - React JS 对列表项进行内存

Question

如果我有一个简单的应用程序，如下所示:

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

当公司名称没有更改时，我不想重新渲染每个列表项 - 有没有办法为行(li 项)实现 shouldComponentUpdate 函数？

Answer 1

可以通过移动 renderRow 的输出来完成到一个单独的<Row title={company.title} />成分。然后你就可以使用 shouldComponentUpdate对于每个行项目检查是否支持 title已更改:

在 <Row/>组件:

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