删除数组元素会导致多次重新渲染

Question

我有一个MobX观察到的数组,我想删除与lodash的多个元素删除.这会导致重新渲染数组中的每个元素.

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看起来就像vanilla JavaScript,但是可观察数组的每次更改都会导致所有观察者的同步更新.要缓解这种情况,只需将更改包装在事务中:

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