javascript - shouldComponentUpdate()没有被调用

问题

我有一个父类，它包含项目列表并为列表中的每个项目渲染组件。更改某些项目（甚至只有一项）后，列表中的所有项目都将重新呈现。

所以我尝试实现shouldComponentUpdate()。我正在使用console.log()来查看它是否被调用，但是看不到日志。我发现了问题shouldComponentUpdate is not never called，并尝试返回return (JSON.stringify(this.props) !=JSON.stringify(nextProps));，但是组件仍然再次呈现自身。所以我只是尝试return false（就像从不更新一样），但是它仍然可以。作为上一次尝试，我使用了PureComponent，但仍在重新渲染。



题

如果父级列表发生更改，如何停止子级重新渲染，为什么从不调用ShouldComponentUpdate？



编辑

我注意到了我没有提到的一些问题，对此我感到抱歉。我正在使用上下文。如果我不使用上下文->没关系。使用上下文时是否有机会停止重新渲染？ （我没有在更新的项目上使用上下文-上下文的值没有改变）。



例

我有一个父类，它遍历列表并为列表的每个项目呈现TaskPreview组件：

class Dashboard extends React.Component
{
   constructor(props) {
      this.state = {
         tasks: {},
      };
   }

   onTaskUpdate=(task)=>
      this.setState(prevState => ({
         tasks: {...prevState.tasks, [task._id]: task}
      }));

   // ... some code

   render() {
      return (
         <div>
             {(!Object.entries(this.props.tasks).length)
                ? null
                : this.props.tasks.map((task,index) =>
                     <TaskPreview key={task._id} task={task} onChange={this.onTaskUpdate}/>
             })}
         </div>
      )
   }
}

我有孩子TaskPreview类：

class TaskPreview extends React.Component
{
   shouldComponentUpdate(nextProps) {
        console.log('This log is never shown in console');
        return false; // just never!
   }

   render() {
        console.log('task rendered:',this.props.task._id); // indicates rerender
        return(<div>Something from props</div>);
   }
}

TaskPreview.contextType = TasksContext;
export default TaskPreview;

正如@Nicolae Maties所建议的那样，我尝试使用Object.keys进行迭代而不是直接映射，但是它仍然不调用“ shouldComponentUpdate”，即使没有更改也仍然被重新呈现。

更新的代码：

render() {
      return (
         <div>
             {(!Object.entries(this.props.tasks).length)
                ? null
                : Object.keys(this.props.tasks).map((key,index) => {
                     let task = this.props.tasks[key];
                     <TaskPreview key={task._id} task={task}/>
                }
             })}
         </div>
      )
   }

最佳答案

尝试在您的return (JSON.stringify(this.props) != JSON.stringify(nextProps));生命周期中使用shouldComponentUpdate()，而不是指定return (JSON.stringify(this.props.tasks) != JSON.stringify(nextProps.tasks));