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

Question

我有一个 react 功能组件，它使用 useContext 访问 MobX 存储。我找到了两种方法来观察一个从 store 中可以观察到的数组。首先，useObserver Hook 并用观察者包装组件。
我认为这些是相同的，但是 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} />
            ))}
    );
});

Answer 1

useObserver必须返回带有可观察值的 JSX。
这个钩子(Hook)负责跟踪更改并重新渲染它们。
如果 JSX 中不存在可观察值，则不会重新渲染。
例如。:

const SomeContainer =() => {
    const { someStores } = useStores();

    return useObserver(()=>(
            {someStore.data.map(val => (
                <Apple key={val.id} val={val} />
            ))}
    ));
};