使用 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 中添加或删除项目，列表不会更新。为了使其更新，我需要将 observer 包裹在 TodoList 周围。 TodoListContainer 上的 @observer 没有执行任何操作，因为我没有访问任何观察到的属性。但是，出于学习目的，我只想在容器上使用 observer。我想让容器在每次 todos 更改时重新渲染。

一种方法是在 TodoListContainer 中执行遍历所有 todos 的任何操作。例如，在 TodoListContainer.render 中，我可以添加 for (let todo of todos) {} 或 todos.forEach(_ => _)。有更好的方法吗？比如在Ember数据中，可以做todos.[]表示监听todos中的所有变化。

Answer 1

容器组件不确切知道 TodoList 正在访问什么数据。在您的示例中，它循环遍历数组并访问每个待办事项对象的 id 属性。 MobX 很擅长跟踪变化。因此，例如，如果您更改了第 3 个待办事项的 ID：todoStore.getTodos()[2].id = 3;，MobX 将重新呈现 TodoList，即使没有从数组中添加或删除任何项目。

一般来说，我建议将 @observer 添加到所有组件并让 MobX 负责 tracking/rerendering。

使用 MobX 监听数组变化

Listening for array changes using MobX

javascript

reactjs

mobx