Question

我无法在任何地方找到如何实现这个易于实现的功能。

此开头讲话https://youtu.be/-DX3vJiqxm4?t=1741

中提到了此功能

他提到对于数组中的每个对象，他检查upvotes和downvotes来检查列表行是否需要更新，但我无法实现它。

我有一个应用程序JS与很多项目，我只更改一个随机项目。 React当然会在虚拟DOM中重新呈现整个列表，并且会对整个列表中的前一个和当前虚拟DOM进行区分，这需要很长时间。

但我想避免渲染未更改的列表项。在我的应用程序中 - 如果＆＃34; todo＆＃34;财产没有变化，该项目不需要更新。以下是我的应用的演示：https://jsfiddle.net/2Lk1hr6v/29/

shouldComponentUpdate:function(nextProps, nextState){
return this.props.todo!==nextProps.todo;
},

我在列表项组件中使用此方法，但this.props.todo与nextProps.todo相同，因此当我更改前五项中的随机项时，不会更新任何行。

Answer 1

这是因为您还没有更新Todo列表数组this.props.todos的引用。

changeOne:function(){
    var permTodos = this.props.todos.concat([]);
    permTodos[Math.floor((Math.random() * 5) + 0)]= {todo:((Math.random() * 50) + 1)};
    this.setState({ todos: permTodos });
},

这就是不变性很重要的原因。

如果你认为这太复杂了。使用immutableJS这样的库可以自动为您完成。

编辑：工作小提琴链接！ https://jsfiddle.net/11z2zzq6/1/

React JS - 列表项上的shouldComponentUpdate

1 个答案: