React JS 对列表项的记忆

【问题标题】：React JS memoization on list itemsReact JS 对列表项的记忆
【发布时间】：2017-11-10 17:19:27
【问题描述】：

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

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 函数？

【问题讨论】：

标签： javascript reactjs memoization

【解决方案1】：

可以通过将renderRow 的输出移动到单独的<Row title={company.title} /> 组件来完成。然后您就可以对每个行项使用shouldComponentUpdate，检查道具title 是否已更改：

在<Row/> 组件中：

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

【讨论】：