Question

如何避免在给定以下代码的情况下重新呈现整个列表？对于列表中的所有项目，当父组件更改并且重新重新安装所有项目时，永远不会调用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>
    );
}

单击按钮时的loadMore方法会在列表中添加新任务以及旧任务。我没有魔杖重新渲染旧的。非常感谢您的任何想法。

Answer 1

谢谢，我发现问题所在，上面的代码是一个工作的，实际上问题是我如何创建父组件

export default withTasks(TaskList);

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

为什么反应会重新创建列表中的所有项目，而shouldComponentUpdate从未调用过

1 个答案: