小编mle*_*ter的帖子

我的上下文如下所示：

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(...) …

我有以下对象（简化）：

@Entity
@Table(name = "delivery_addresses")
data class DeliveryAddress (
        val street: String
) {

    @ManyToOne(fetch=FetchType.LAZY)
    lateinit var user: User
}

当我通过 ID 查询对象时

val deliveryAddress = deliveryAddressService.findById(1)

哪个

val deliveryAddress = deliveryAddressService.findById(1)

我可以看到执行了以下查询：

override fun findById(deliveryAddressId: Long): DeliveryAddress? {
    return deliveryAddressRepository.findById(deliveryAddressId).orElse(null) // JpaRepository
}

我怎样才能使FetchType.LAZY工作作为例外（也@Basic(fetch = FetchType.LAZY）不适合我）？

我有一个静态菜单，可以在各个方面找到。此菜单包含以下路线：

<div className="layout-main">
   <Switch>
      <Route path="/" exact component={Dashboard}/>
      <Route path="/login" exact component={Login}/>
      <Route path="/orders/:id" exact component={OrderPage}/>
      <Route path="/orders" exact component={OrdersPage}/>
  </Switch>
</div>

侧抽屉中的链接如下所示：

<NavLink to='/'>Dashboard</Navlink>
<NavLink to='orders'>Orders</Navlink>

例如，当我在页面上/orders/3并按下 NavLink Orders 时，页面/orders/orders被呈现。我的目标是显示正常/orders路线。

什么是合适的解决方案（菜单应该保持全局​​）？

假设我有一个像这样的性能优化组件：

const PerformanceComponent = ({style}) => {
     return <View style={style}>...</View>
}

export default React.memo(PerformanceComponent)

我在父级内部使用组件，如下所示：

{someArray.map((style) => (
    <PerformanceComponent style={style} />
)}

我正在为 传递不同的对象style，它看起来像这样：

const styles = {
    width: 200,
    height: 200
}

现在 React.memo 不会成功，因为我正在传递一个对象，而 React 只会比较内存地址（我认为它被称为Shallow Compare）。

即使-object 没有改变，我有哪些选择可以避免不必要的重新渲染（PerformanceComponent）styles？

我在一个新的 umi 项目中包含了react-pdf：

• PDF 生成 150 个文本组件在没有 umi 的情况下花费了大约 311.44 毫秒
• 使用 umi：7179.40 毫秒

在 umi 项目中，每个元素都需要大约 10 倍！

我试过的代码示例

import React from "react";
import "./styles.css";
import { Document, Page, pdf, Text, View } from "@react-pdf/renderer";

export default function App() {
  const pdfClickHandler = async () => {
    console.time("PDF generation took:");
    await pdf(
      <Document>
        <Page>
          <View>
            {Array.from(Array(150).keys()).map((key) => (
              <Text key={key}>text-element</Text>
            ))}
          </View>
        </Page>
      </Document>
    ).toBlob();
    console.timeEnd("PDF generation took:");
  };

  return (
    <div className="App">
      <button …

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

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

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

一些博客文章在使用React Context时将上下文分为两个单独的更新和状态上下文。我想知道这是否真的提高了性能或可以减少渲染周期。

const authContext = React.createContext<AuthUser | null | undefined>(undefined)
const authUpdateContext = React.createContext<Dispatch<SetStateAction<AuthUser | null>> | null>(null)

export function useAuth() {
    const authUser = React.useContext(authContext);
    if (authUser === undefined) throw new Error(`useAuth must be used within a ContextAuthProvider`);
    return authUser;
}

export const useAuthUpdate = () => {
    const setAuthUser = React.useContext(authUpdateContext);
    if (!setAuthUser) throw new Error(`useAuthUpdate must be …