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에서 항목을 제거, 목록이 업데이트되지 않습니다. 업데이트하려면 주위에 TodoList을 입력해야합니다. (TodoListContainer)은 관측 된 속성에 액세스하지 않기 때문에 아무 것도하지 않습니다. 그러나 학습 목적으로 만 컨테이너에 observer을 사용하고 싶습니다. todos 변경 될 때마다 컨테이너를 다시 렌더링하려고합니다.

에서 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

답변

관련 문제