Entfernen von Elementen des Arrays verursacht mehrere Rendern

Question

Ich habe ein beobachtbares MobX-Array, und ich möchte mehrere Elemente mit lodash remove entfernen. Dies führt zu einem erneuten Rendern für jedes Element im Array.

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') 
); 

Wenn ich versuche, jedes Vorkommen von 1 zu entfernen, wird Rendering... für jedes Element einmal protokolliert:

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

Wie kann ich es so machen, es rendert wieder einmal nur?

Answer 1

Die API zu MobX sieht aus wie Vanilla-JavaScript, aber jede Änderung des beobachtbaren Arrays verursacht eine synchrone Aktualisierung aller Beobachter. Um dies zu verringern, wickeln Sie einfach die Änderung in einen :

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