是否有任何方法可以防止React重新渲染添加到MobX观察数组中的每个项目(使用Hooks)

Question

我对React还比较陌生，所以这可能不是一个问题，也不是一个可以解决的问题。我在这里用Mobx和React(钩子(做了一个非常做作的(不要评判：P(实验。

我想知道的是，是否有任何方法可以避免重新渲染添加到标记为observable的数组中的每个项的父项(应用程序(，尽管这些项是通过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次(每个"跳舞"的项目1次(，请查看此处注释该部分的示例：https://codesandbox.io/s/interesting-mountain-wdtdg