列表项上的 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;
}

列表项上的 React JS 记忆

React JS memoization on list items

javascript

reactjs

memoization