使用MobX監聽數組更改

我剛剛開始學習MobX，並且想要使用MobX監聽所有數組更改（插入，刪除等）。一個例子可以說明這更好的：如果我添加使用MobX監聽數組更改

const TodoList = ({todos}) => (
    <ul> 
     {todos.map(todo => <li key={todo.id}> 
      <TodoContainer todo={todo}/> 
     </li>)} 
    </ul> 
); 

module.exports = @observer class TodoListContainer extends React.Component { 
    static contextTypes = { 
     todoStore: React.PropTypes.instanceOf(TodoStore), 
    }; 

    render() { 
     let todos = this.context.todoStore.getTodos(); 

     return <TodoList todos={todos}/>; 
    } 
}

或todos刪除一個項目，不更新列表。爲了使它更新，我需要包裝observer約TodoList。 TodoListContainer上的@observer不會執行任何操作，因爲我沒有訪問任何觀察到的屬性。但是，僅出於學習目的，我只想在容器上使用observer。我想讓容器在每次更改todos時都要重新提交。

做到這一點的一種方法是在TodoListContainer中做任何事情，遍歷所有todos。例如，在TodoListContainer.render中，我可以添加for (let todo of todos) {}或todos.forEach(_ => _)。有沒有更好的方法來做到這一點？例如，在Ember Data中，您可以執行todos.[]來代表收聽todos中的所有更改。

來源

2016-11-07 Leo Jiang

經過一番基準測試後，我認爲強制渲染的最快速的方法是將'todos.length'放入'render'中。 –

容器組件不知道哪些數據TodoList正在訪問。在你的例子中，它循環訪問數組並訪問每個待辦事項對象的id屬性。 MobX在追蹤變化方面很聰明。因此，例如，如果您更改了第3個待辦事項項目的ID：todoStore.getTodos()[2].id = 3;，即使沒有項目被添加或從陣列中刪除，MobX也會重新提交TodoList。

一般而言，我建議將@observer添加到所有組件，並讓MobX負責跟蹤/重新渲染。

來源

2016-11-07 06:44:01

使用MobX監聽數組更改

回答

相關問題