有什么方法可以防止 React 为添加到 MobX 观察数组的每个项目重新渲染（使用 Hooks）

Question

我对 React 还是比较陌生，所以这可能不是问题，也不是可以解决的问题。我使用 Mobx 和 React（挂钩）here.

进行了一个非常人为的（不要判断：P）实验

我想知道的是，尽管通过 concat.

例如：

export class MyModel {
  constructor() {
    this.messages = [];
  }
  addMemo(msg: string, done = false) {
    const memos: Memo[] = [];
    for (let i = 0; i < 10; i++) {
      const memo = new Memo(`${msg}-${i}`);
      memo.letsDance();
      memos.push(memo);
    }
    this.messages = this.messages.concat(memos);
    return memos.shift();
  }
}

decorate(MyModel, {
  messages: observable,
  addMemo: action
});

导致 React 渲染消费者 10 次：

const App = () => {
  // ...
  const myModel = useObservable(new MyModel());
  // ...
  return useObserver(() => (
    <div>
      {/* ... */}
    </div>
  ));
};

https://codesandbox.io/s/white-tdd-jh42r

Answer 1

您的 async letsDance() 使 React 重新渲染 10 次（'dances' 的每个项目 1 次）在此处查看注释掉该部分的示例：https://codesandbox.io/s/interesting-mountain-wdtdg

有什么方法可以防止 React 为添加到 MobX 观察数组的每个项目重新渲染（使用 Hooks）

Is there any way to keep React from re-rendering for each item added to a MobX observed array (using Hooks)

reactjs

mobx