标签: mobx-react-lite

我的上下文如下所示：

class AuthStoreClass {
    authUser = null

    constructor() {
        makeAutoObservable(this)
    }

    login = async (params) => {
        const { data: { data: authUser } } = await loginUser(params)
        this.authUser = authUser
    }
}

const AuthStoreContext = React.createContext(null);

export const authStoreObject = new AuthStoreClass()

export const AuthStoreProvider = ({ children }: any) => {
    return <AuthStoreContext.Provider value={authStoreObject}>{children}</AuthStoreContext.Provider>;
};
export const useAuthStore = () => {
    return React.useContext(AuthStoreContext);
};

我在组件的其他地方使用上下文：

const LoginPage = observer(() => {
    const authStore = useAuthStore()
    ...
    authStore.login(...) …

在mobx-react 文档中，store 的创建方式存在差异。例如，在React Context页面上：

在第一个代码示例中，商店使用 useLocalStore 实例化：

  const store = useLocalStore(createStore)

在第二个代码示例中，商店是通过直接“新建”商店来启动的：

  counterStore: new CounterStore(),
  themeStore: new ThemeStore(),

通过推断，第一个是“本地”存储（因此需要 useLocalStore），第二个是“全局”存储，因此不需要。然而，目前尚不清楚这是为什么，以及随后的行为差异是什么。

为什么useLocalStore在第二个例子中不需要，这对 React 中的 store 和 mobx 的行为有什么不同？

感谢您提供任何意见

几乎所有示例（甚至官方文档）都mobx-react-light与useContext()hook结合使用。

然而，React、许多文章和博客文章建议不要 useContext()用于中/高频更新。状态不是可以非常频繁地更新的东西吗？

应该将包与钩子结合使用还是会出现性能问题？

因此，我刚刚将ignite-bowser项目升级到他们的5.0 模板，其中包括 React Navigation 5，这需要从使用SwitchNavigator在“Auth”和“App”StackNavigators 之间交换的传统推荐方法更改为新的声明式身份验证流程方法使 SwitchNavigator 变得冗余。

仅供参考，Ignite Bowser 项目本质上是 React Native 模板应用程序，由

React Native
React Navigation
MobX State Tree
TypeScript
Reactotron
And more!

true因此，这一切看起来都很简单，但是当使用存储在应用程序商店之一中的布尔值并设置为在身份验证方法中调用的操作中时，我无法让实际的导航器进行切换。

根据服务器日志和 Reactotron 源，身份验证工作正常。之后重新加载应用程序确实会呈现应用程序导航器，但会话实际上并不有效，因为内存已被清除。所有后续请求都会失败，但应用程序不会切换到身份验证导航器。

以下是相关代码片段：

根导航器.tsx

const RootStack = () => {
  const { pbidStore } = useStores()

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        stackPresentation: "modal",
      }}
    >
      {pbidStore.isAuthenticated ? (
        <Stack.Screen
          name="pbidStack"
          component={PbidNavigator}
          options={{
            headerShown: false,
          }}
        />
      ) : (
        <Stack.Screen
          name="authStack"
          component={AuthNavigator} …

我正在尝试使用 react 和 mobx 构建一个自定义组件视频播放器，我需要从主组件到子组件钻取一个引用，但是当我在一个组件上使用 forwardRef 函数时我收到一条错误消息观察者。错误消息是“baseComponent 不是函数”这是代码：

// code for main component
const videoPlayer = () => {

const controlsRef = useRef<any>(null);

return (<div>
// video player screen code //
<VideoPlayerButtonCode ref={controlsRef} />
<div>)

}

// the code for the players component

interface IProps{
 controlsRef: any;
}

const VideoPlayerButtonCode: React.FC<IProps> = fowardRef({props from iprops}, controlsRef ) => {

return (<div>

<Button ref={controlsRef}>Button i want to get a ref for from main</Button>
<div>)

}

export default observer(VideoPlayerButtonCode)

这是代码的模糊抽象，但实现相同。mobx 对 ref …