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

对列表项进行反应JS memoization

1 个答案: