时间戳

首页 > 解决方案 > 为什么 react 会重新创建列表中的所有项目，而 shouldComponentUpdate 从未调用过

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

问题描述

给定以下代码，如何避免重新渲染整个列表？对于列表中的所有项目，当父组件 props 更改并且重新安装所有项目时，从不调用 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 方法将新任务与旧任务一起添加到列表中。我不希望旧的被重新渲染。非常感谢您的任何想法。

标签： reactjs

解决方案

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

export default withTasks(TaskList);

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

推荐阅读