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

中

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

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

1 个答案: