刪除陣列的元素會導致多次重新渲染

Question

我有一個MobX可觀察數組，我想用lodash的remove刪除多個元素。這將導致數組中每個元素的重新渲染。

const array = observable([1,2,3,4,5,1]); 

const App = observer(() => { 
    console.log('Rendering...'); 
    return (
    <div> 
     { array.map(e => <div> {e} </div>)} 
    </div> 
); 
}); 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

如果我嘗試刪除的1每次出現，Rendering...爲每個元素記錄一次：

_.remove(array, num => num === 1); 
> "Rendering..." 
> "Rendering..." 
> "Rendering..." 
> "Rendering..." 
> "Rendering..." 
> "Rendering..." 

我怎樣才能使它所以它只是重新呈現一次？

Answer 1

MobX的API看起來就像香草JavaScript一樣，但每個可觀察數組的變化都會導致所有觀察者的同步更新。爲了減輕這一點，只需將修改包裝在transaction中：

transaction(() => _.remove(array, num => num === 1)); 
> "Rendering..."