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

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，但可观察数组的每次更改都会导致所有观察者的同步更新。缓解这种情况的一种方法是将代码放在runInAction中：

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