MobXを使用した配列変更のリッスン

Question

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から項目を追加または削除する場合は、リストが更新されません。更新するには、TodoListの周りにobserverをラップする必要があります。 の@observerは、私が観測されたプロパティにアクセスしないので何もしません。しかし、学習目的のために、observerをコンテナにのみ使用したいと考えています。 todosが変更されるたびにコンテナを再レンダリングさせたい。

これを行う1つの方法はTodoListContainerの中でtodosのすべてを反復処理することです。たとえば、TodoListContainer.renderには、for (let todo of todos) {}またはtodos.forEach(_ => _)を追加できます。それを行うより良い方法はありますか？たとえば、Ember Dataでは、todos.[]を実行して、すべての変更をリスンすることを表すことができます（todos）。

Answer 1

コンテナコンポーネントは、データTodoListがアクセスしていることを正確には把握していません。あなたの例では、配列をループして、各todoオブジェクトの属性idにアクセスしています。 MobXは変更を追跡するのに賢いです。したがって、たとえば、3番目の遂行アイテムのIDをtodoStore.getTodos()[2].id = 3;に変更した場合、MobXはアレイにアイテムが追加または削除されていなくてもTodoListを再レンダリングします。

一般に、すべてのコンポーネントに@observerを追加し、MobXで追跡/再レンダリングを処理することをおすすめします。