選択を解除して選択したアイテムのみをMobXで再レンダリングする方法は？

Question

私は私がリストにドスをクリックすると、一度に選択された一つのtodo持つことができますthe following appがあります。私は新しいTODOを選択すると、ドスのリスト全体を再レンダリングされ

class State { 
    @observable todos = [ 
    { id: '1', description: 'Do this' }, 
    { id: '2', description: 'Do that' }, 
    { id: '3', description: 'Do this third thing' } 
    ] 
} 

const state = new State(); 

const TodoView = observer(({ todo, isSelected, onClick }) => (
    <div onClick={onClick}> 
    { todo.description } { isSelected && ' (selected)' } 
    </div> 
)); 

@observer 
class App extends Component { 
    @observable selected = null; 
    render() { 
    return <div> 
     { state.todos.map((todo) => 
     <TodoView 
     key={todo.id} 
     todo={todo} 
     isSelected={this.selected === todo} 
     onClick={() => this.selected = todo} /> 
     )} 
    </div>; 
    } 
} 

を。追加のデータで状態を混乱させることなく、選択済みの選択解除されたtodosをただ再レンダリングする方法はありますか？代わりに、すべてのTodoViewが依存している、あなたが観察mapを使用し、各TodoViewに観察するために独自のキーを与えることができAppコンポーネントで観測可能selectedを持つの

Answer 1

。このmapを小物としてTodoViewに渡し、mapにtodoのIDがキーとして含まれているかどうかを確認してください。 This way only the selected and deselected todos will be re-rendered：

class State { 
    @observable todos = [ 
    { id: '1', description: 'Do this' }, 
    { id: '2', description: 'Do that' }, 
    { id: '3', description: 'Do this third thing' } 
    ] 
} 

const state = new State(); 

const TodoView = observer(({ todo, selectedMap, onClick }) => (
    <div onClick={onClick}> 
    { todo.description } { selectedMap.has(todo.id) && ' (selected)' } 
    </div> 
)); 

@observer 
class App extends Component { 
    selectedMap = observable.map({}); 

    onClick = (todo) => { 
    this.selectedMap.clear(); 
    this.selectedMap.set(todo.id, todo); 
    }; 

    render() { 
    return <div> 
     { state.todos.map((todo, idx) => 
     <TodoView 
     key={todo.id} 
     todo={todo} 
     selectedMap={this.selectedMap} 
     onClick={() => this.onClick(todo)} /> 
     )} 
    </div>; 
    } 
}