我有一個問題，我渲染了很多組件，其中每個組件都有一個useStyles. 我們希望組件 props 影響樣式，所以我們結合了 props 和主題設定。作業正常，除了它非常慢而且我已經將其縮小到它是由 .prop 方法引起的makeStyles。
是否使用該類實際上并不重要。如果所有類都是靜態的，它會很快，但是如果我添加一個未使用的類作為方法，它會很慢。道具也無關緊要，就像我添加test: { fontWeight: () => 'bold' }它會再次變慢一樣。
確實很奇怪。我正在使用 Material UI ^4.11.0。不是最新版本的 v4。漏洞？有人聽說過這個嗎？有人有更好的解決方案來添加基于道具的樣式并同時使用主題嗎？任何人都通過使用 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://www.uj5u.com/shujuku/337378.html
上一篇：React大陣列排序（5k項）