mobx-react-lite useObserver钩子位于渲染外部

问题描述

我看过uSEObserver挂钩示例，如下所示：

const Test = () => {

  const store = useContext(storeContext); 

  return uSEObserver(() => (
    <div> 
      <div>{store.num}</div>
    </div>
  ))

}

但是以下内容也可以使用，我想知道是否有任何理由不使用uSEObserver返回将在渲染中使用的值，而不是返回渲染。

const Test = () => {

  const store = useContext(storeContext); 

  var num = uSEObserver(function (){
    return store.num;
  });

  return (
    <div> 
      <div>{num}</div>
    </div>
  )

}

此外，在同一组件中两次使用uSEObserver时也没有出现任何错误。这样的东西有问题吗？

const Test = () => {

  const store = useContext(storeContext); 

  var num = uSEObserver(function (){
    return store.num;
  });

  return uSEObserver(() => (
    <div> 
      <div>{num}</div>
      <div>{store.num2}</div>
    </div>
  ))

}

解决方法

您可以在组件中使用观察者方法。并使用您想要的任何商店。

import myStore from './myStore'
export class RootStore{
        //Define your stores here. also import them in the imports
         myStore = newMyStore(this)
        }
    
    export const rootStore = new RootStore();
    
    const StoreContext = React.createContext(rootStore);
    
    export const useStore = () => React.useContext(StoreContext);

StoreContext.ts

{{1}}