英文:
What are the differences between <Div>, <StyledDiv>, and <Box sx={...}> in MUI?
问题
The MUI文档中有一个性能测试案例表，链接在这里。但是这些不同的情况对我来说不太清楚。请用实际示例解释以下内容的区别：
<Div><StyledDiv><Box sx={…}>
我假设这些与以下内容相关联：
<Box><Box mb={2}><Box sx={{mb:2}>
如果我的理解正确，而且你关注性能，那么你应该更倾向于使用系统属性而不是 sx 属性。然而，只有少数 MUI 组件支持 system properties，而所有组件都支持 sx。这导致我的团队使用 Box 结合 component 属性认为它在性能上更好，181毫秒而不是296毫秒。例如，
- 而不是
<Paper sx={{mb:2}}> - 我们使用
<Box component={Paper} mb={2}>
使用 React Dev Tools 检查组件，似乎系统属性直接转换为 sx 属性，这意味着我的团队的决策在性能上并不更好，也与 <StyledDiv> 不相关。
使用 mb={2} 作为属性传递的 Box，反过来会渲染一个具有 mb:2 的 sx 属性的 div styled。
值得注意的是，<Box component={Paper} mb={2}> 的方法，而不是 <Paper sx={{mb:2}}>，虽然它不会创建额外的 DOM 元素，但会创建额外的组件。
与
所以，你应该更倾向于使用 system properties 而不是 sx 属性吗？
英文:
The MUI documentation has a table of benchmark cases here. But the different cases aren't clear to me. Please explain what the differences are with real examples between the following:
<Div><StyledDiv><Box sx={…}>
I am assuming these correlate to:
<Box><Box mb={2}><Box sx={{mb:2}>
If this is correct and you are focusing on performance, then you should favor system properties over the sx property. However, only a few MUI components support system properties while all support sx. This has led my team to using Box in combination with the component property thinking it is better for performance, 181ms instead of 296 ms. For example,
- Instead of
<Paper sx={{mb:2}}> - We use
<Box component={Paper} mb={2}>
Inspecting the components using React Dev Tools, it seems like the system properties are converted directly into the sx property meaning my team's decision is not better for performance and does not correlate to <StyledDiv>.
The Box with mb={2} passed as a property in turn renders a div styled that has mb:2 inside the sx property.
It is also worth noting, that the <Box component={Paper} mb={2}> approach rather than <Paper sx={{mb:2}}> while it doesn't create additional DOM elements there are additional components.
versus
So should you favor system properties over the sx property or not?
答案1
得分: 2
以下是文档中提到的Div、StyledDiv和Box的示例。
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
function Div() {
return <div>我是一个简单的Div组件</div>;
}
const StyledDiv = styled("div")`
border: black solid 1px;
`;
export default function App() {
return (
<>
<Div />
<StyledDiv>我是一个StyledDiv</StyledDiv>
<Box sx={{ border: "purple solid 1px" }}>我是一个Box</Box>
</>
);
}
关于性能基准测试的差异与使用sx和系统属性无关，它们基本上只是相同基础功能的两种语法替代方式，我不会预期在这两者之间有任何显著的性能差异。我预期，将其他Material-UI组件用Box包装以使用系统属性而不是sx会比在初始的Material-UI组件（例如Paper）上使用sx性能差。
相关回答：https://stackoverflow.com/questions/71596050/why-is-the-sx-prop-so-much-slower/71695686#71695686
英文:
Below are examples of what the documentation means when referring to Div, StyledDiv, and Box.
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
function Div() {
return <div>I'm a simple Div component</div>;
}
const StyledDiv = styled("div")`
border: black solid 1px;
`;
export default function App() {
return (
<>
<Div />
<StyledDiv>I'm a StyledDiv</StyledDiv>
<Box sx={{ border: "purple solid 1px" }}>I'm a Box</Box>
</>
);
}
The differences in the benchmarks have nothing to do with using sx vs. system properties -- those are basically just two syntax alternatives for the same underlying functionality and I wouldn't expect any significant performance difference between the two. I would expect that wrapping other Material-UI components with Box in order to use system properties instead of sx would be worse performance than using sx on the initial Material-UI component (e.g. Paper).
Related answer: https://stackoverflow.com/questions/71596050/why-is-the-sx-prop-so-much-slower/71695686#71695686
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论