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中添加或删除某个项目，则不会更新该列表。为了使其更新，我需要在observer周围包裹TodoList。 @observer上的TodoListContainer没有做任何事情，因为我没有访问任何观察到的属性。但是，仅出于学习目的，我只想在容器上使用observer。我希望每次todos更改时都会让容器重新呈现。

执行此操作的一种方法是在TodoListContainer中执行迭代所有todos的任何操作。例如，在TodoListContainer.render中，我可以添加for (let todo of todos) {}或todos.forEach(_ => _)。有没有更好的方法呢？例如，在Ember数据中，您可以todos.[]表示收听todos中的所有更改。

Answer 1

容器组件并不确切知道TodoList正在访问哪些数据。在您的示例中，它循环遍历数组并访问每个todo对象的id属性。 MobX非常聪明地跟踪变化。因此，例如，如果您更改第3个待办事项的ID：todoStore.getTodos()[2].id = 3;，则即使没有从阵列中添加或删除项目，MobX也会重新呈现TodoList。

一般情况下，我建议将@observer添加到所有组件中，让MobX负责跟踪/重新渲染。

使用MobX侦听数组更改

1 个答案: