reactjs - MUI - 如果在方法中使用 Prop ，则 makeStyles 变慢

Question

我有一个问题，我渲染了很多组件，其中每个组件都有一个 useStyles。我们希望组件 Prop 影响样式，所以我们将 Prop 和主题设置结合起来。工作正常，除了它非常慢，我已经将它缩小到它是由 makeStyles 中的 prop 方法引起的。

类是否被使用其实并不重要。如果所有类都是静态的，它会很快，但如果我添加一个未使用的类，它是一个方法，它会很慢。 Prop 也不重要，就像如果我添加 test: { fontWeight: () => 'bold' } 它会再次变慢。

确实很奇怪。我正在使用 Material UI ^4.11.0。不是最新版本的 v4。漏洞？有人听说过这个吗？有人有更好的解决方案来添加基于 Prop 的样式并同时使用主题吗？任何人都通过使用 useMemo 或其他东西获得了性能提升？ (我试过没有效果)。

 const useStyles = makeStyles(({ typography }) => ({
  fontFamily: {
    fontFamily: ({ fontFamily }: any) => fontFamily,
  },
  fontFamilySecondary: {
    fontFamily: typography.fontFamilySecondary,
  },
  ...filterCustomVariants(typography),
  bold: {
    fontWeight: typography.fontWeightBold,
  },
  boldScondary: {
    fontWeight: typography.fontWeightBoldSecondary,
  },
  italic: {
    fontStyle: "italic",
  },
  thisIsNotEvenUsed: {
    fontWeight: () => {
      console.log("Running running running") // Runs many times anyway!
      return "bold"
    },
  },
}))

和实现:

const styleProps = { fontFamily: fontFamily }
const classes = useStyles(styleProps)

编辑:这是一个显示此行为的 CodeSandbox，使用最新的 MUI v4 并且没有我的应用复杂性:https://codesandbox.io/s/black-monad-tr05l?file=/src/App.tsx

Answer 1

这不是错误，v5 中的 makeStyles 行为方式相同。使用回调的动态样式是 JSS feature .但众所周知，JSS 的动态性能非常糟糕(有关更多详细信息，请参阅 performance 部分，它比 emotion 慢大约 6 倍)。这是 MUI 团队决定放弃它以支持大量使用动态样式的 v5 中的情感的原因之一。

是的，即使您没有在内部传递任何内容并且没有使用 classes 对象，它也会始终调用回调。它遍历样式对象和invoke every callbacks它在您调用 useStyles 时找到。有关 makeStyles 工作原理的更多详细信息，我建议您阅读 this瑞安的回答。

const useStyles = makeStyles({
  thisIsNotEvenUsed: {
    fontWeight: () => {
      console.log("Running running running"); // Runs many times anyway!
      return "bold";
    }
  }
});

const unusedClasses = useStyles(); // generate the styles

有一些策略可以提高性能。最简单的(视情况而定)是升级到 v5 以利用情感及其有效生成动态样式的能力。另一种方法是使用内联样式:

<Typography style={{ fontWeight: props.fontWeight }}>

但是如果你不想用内联样式污染你的组件，你仍然可以使用 makeStyles 通过在包含大量样式的容器中创建嵌套样式来使用“样式注入(inject)”方法内部元素的数量(Grid、List、Stack...)

const useStyles = makeStyles({
  root: {
    "& MuiTypography-root": {
      fontWeight: () => 'bold'
    }
  }
});

<div className={classes.root}>
  {[...Array(100)].map((_, index) => {
    return <Text key={`text_${index}`}>Text Component</Text>;
  })}
</div>