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

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..."

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

Removing elements of array causes multiple re-renders

javascript

lodash

mobx