这个应用程序中的 useObserver 和观察者有什么区别？

Question

我有一个使用 useContext 访问 MobX 存储的 React 功能组件。我找到了两种方法来观察一个从 store 中可以观察到的数组。首先，useObserver 挂钩并用观察者包装组件。

我认为这些是相同的，但是 useObserver 只观察特定属性（例如传递的数组），但是当数组达到大小 2 并且组件不重新渲染时，我遇到了问题。使用 useObserver 时就是这种情况。用观察者包装时，这是固定的。

谁能解释为什么会发生这种情况以及有什么区别？

const ApplesContainer = observer(() => {
    const stores = useStores();
    const applesArray = stores.fruits.apples;

    return (
            {applesArray.map(apple => (
                <Apple key={apple.id} apple={apple} />
            ))}
    );
});

// OR with useObserver()

function useGlobalState() {
    const stores = useStores();
    return useObserver(() => ({
        applesArray: stores.fruits.apples
    }));
}
const ApplesContainer = observer(() => {
    const { applesArray } = useGlobalState();

    return (
            {applesArray.map(apple => (
                <Apple key={apple.id} apple={apple} />
            ))}
    );
});