首页 文章

React JS - 列表项上的shouldComponentUpdate

提问于
浏览 次
0

我无法在任何地方找到如何实现这个看起来如此容易实现的功能 .

此开头讲述了这个功能https://youtu.be/-DX3vJiqxm4?t=1741

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

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

但我想避免渲染未更改的列表项 . 在我的应用程序中 - 如果"todo"属性没有't changed, the item doesn' t需要更新 . 这是我的应用程序的演示：https://jsfiddle.net/2Lk1hr6v/29/

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

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

reactjs

1 回答

  • 1

    它's because you haven' t更新了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/

    回复于

相关问题