Reactjs 为什么react会重新创建列表上的所有项，并且从不调用ComponentUpdate

在给出以下代码的情况下，如何避免重新呈现整个列表？ 对于列表中的所有项，当父组件道具更改并且所有项重新装载时，将永远不会调用shouldComponentUpdate

父列表组件：

class TaskList extends React.Component {
tasksList = (tasks) => {
    return _.map(tasks, (task) => (<TaskCard key={task.id} task={task}/>));
};

render() {
    const {tasks, loadMore} = this.props;
    return (
        <React.Fragment>
            <div id="tasks-list">
                    {this.tasksList(tasks)}
            </div>

            <div>
                <button type="button" onClick={loadMore}>Load more</button>
            </div>
        </React.Fragment>
    );
}

class TaskCard extends React.Component {
componentWillMount() {
    console.log('component will always mount');
}

shouldComponentUpdate(nextProps) {
    console.log('should component update never called');
}

render() {
    const {task} = this.props;

    return (
        <div key={task.id}>
            <div className="card">
                <div className="card-header">{renderStatus(task.status)}{task.url}</div>
                <div className="card-body">
                    <TaskResults task={task}/>
                </div>
            </div>
        </div>
    );
}

类任务列表扩展了React.Component{
任务列表=（任务）=>{
返回u.map（tasks，（task）=>（））；
};
render（）{
const{tasks，loadMore}=this.props；
返回(
{this.tasksList（tasks）}
加载更多
);
}

子项组件：

class TaskList extends React.Component {
tasksList = (tasks) => {
    return _.map(tasks, (task) => (<TaskCard key={task.id} task={task}/>));
};

render() {
    const {tasks, loadMore} = this.props;
    return (
        <React.Fragment>
            <div id="tasks-list">
                    {this.tasksList(tasks)}
            </div>

            <div>
                <button type="button" onClick={loadMore}>Load more</button>
            </div>
        </React.Fragment>
    );
}

class TaskCard extends React.Component {
componentWillMount() {
    console.log('component will always mount');
}

shouldComponentUpdate(nextProps) {
    console.log('should component update never called');
}

render() {
    const {task} = this.props;

    return (
        <div key={task.id}>
            <div className="card">
                <div className="card-header">{renderStatus(task.status)}{task.url}</div>
                <div className="card-body">
                    <TaskResults task={task}/>
                </div>
            </div>
        </div>
    );
}

类任务卡扩展了React.Component{
组件willmount（）{
log（'组件将始终安装'）；
}
应更新组件（下一步）{
log（'是否从未调用组件更新'）；
}
render（）{
const{task}=this.props；
返回(
{renderStatus（task.status）}{task.url}
);
}

单击按钮上的loadMore方法将新任务与旧任务一起添加到列表中。我不希望重新呈现旧任务。

---

非常感谢您的建议。

谢谢，我发现了问题所在， 上面的代码是有效的，实际上问题在于如何创建父组件

export default withTasks(TaskList);

每次道具更改时，这个HOC都会重新创建父列表，因此创建父组件的内容和方式非常重要。 谢谢