The 从 v4 迁移到 v5 https://mui.com/guides/migration-v4/#box指南指出:
The Box
系统 props 在 v5 中有一个可选的替代 API,使用sx
支柱。你可以阅读本节 https://mui.com/system/basics/#api-tradeoff了解这个新 API 背后的“原因”。
<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
所提到的部分表明:
将系统置于一个支柱下(sx
) 有助于区分仅为 CSS 实用程序而定义的 props 与为组件业务逻辑而定义的 props。这对于关注点分离.
但说到性能,这两种方式都属于基准项目吗d. Render 1,000 Box
in 性能权衡 https://mui.com/system/basics/#performance-tradeoff?或者使用之间有什么区别系统属性 https://mui.com/components/box/#system-props and sx prop https://mui.com/system/the-sx-prop/?
实际上,它们应该是相同的,某些组件中的系统道具,例如Box
or Typography
将被捕获并再次传播sx
prop (Source https://github.com/mui-org/material-ui/blob/e0cdcd130db60d252c4382570844ea7278649a08/packages/mui-system/src/createBox.js#L14-L15)。所以它的内部看起来像这样:
const { sx: originalSx, ...otherSystemProps } = props;
// sx and system props will be merged into mergedSx
const { ..., mergedSx } = extendSxProp({ originalSx, ...otherSystemProps });
return <BoxRoot sx={mergedSx} {...} />
这意味着两种方法都使用sx
引擎盖下的道具(最慢的造型方法)。使用系统属性的可能会慢一点,因为它需要与另一个合并sx
内部支持,但我认为这不是一个大问题(两种方法都应该同样慢)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)