mobx-react钩外渲染

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

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

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