배열 요소를 제거하면 여러 번 렌더링됩니다.

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는 바닐라 자바 ​​스크립트처럼 보이지만, 관찰 가능 어레이의 모든 변경은 모든 옵저버의 동기식 업데이트를 유발합니다. 이를 완화하려면 transaction의

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

에있는 변경 사항을 그냥 감싸 주면됩니다.