渲染之外的 mobx-react-lite useObserver 钩子

Question

我见过这样的 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>
  ))

}

Answer 1

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

import { observer } from "mobx-react-lite";
import { useStore } from "../../stores/StoreContext";

    
    const Test = observer(() => {

          const { myStore } = useStore();
                
          return() => (
            <div> 
              <div>{myStore.num}</div>
              <div>{myStore.num2}</div>
            </div>
          )
        
        }
    );

StoreContext.ts

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);