Javascript 使用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}/>;
    }
}

consttodolist=（{todos}）=>(

{todo.map（todo=>

）}

);
module.exports=@observer类TodoListContainer扩展React.Component{
静态上下文类型={
todoStore:React.PropTypes.instanceOf（todoStore），
};
render（）{
让todos=this.context.todoStore.getTodos（）；
返回；
}
}

如果我从

todos

中添加或删除一个项目，则列表不会更新。为了使其更新，我需要将

observer

环绕

TodoList

。

todolistcainer

上的

@observer

没有做任何事情，因为我没有访问任何观察到的属性。但是，为了便于学习，我只想在容器上使用

observer

。我想在每次

todos

更改时重新加载容器

---

一种方法是在

todolistcainer

中执行任何迭代所有

todo

的操作。例如，在

todolistcainer.render

中，我可以添加

For（let todo of todos）{}

或

todos.forEach（{u=>}

）。有更好的方法吗？例如，在Ember数据中，您可以执行

todos。[]

来表示侦听

todos

中的所有更改，容器组件并不确切知道TodoList正在访问什么数据。在您的示例中，它在数组中循环并访问每个todo对象的

id

属性。MobX在跟踪变化方面很聪明。因此，例如，如果更改第三个todo项的id:

todoStore.getTodos（）[2]。id=3

，MobX将重新加载

TodoList

，即使未从阵列中添加或删除任何项

---

一般来说，我建议将

@observer

添加到所有组件中，并让MobX负责跟踪/重新渲染。

经过一些基准测试后，我认为强制渲染的最快黑客方法是将

todos.length

放入

渲染
中。