ReactJS - 不同组件与条件渲染
假设我正在构建一个
我有 3 种变化。在变体 #1 中，标签位于文本输入上方；在 #2 中，标签是占位符，单击时向上移动；在 #3 中，它位于占位符上方的输入内部。
问题1：性能方面，就 UI 中的加载时间而言，拥有 3 种变体的方法中哪一种更快 - 将其全部放在一个组件中，并在 JSX 中随处进行条件渲染，并有一个可以在之间切换的 prop三个变体，或者拥有 3 个完全独立的组件，然后导入 TextInput 对象并以这种方式调用特定变体
问题2：导入完整的 TextInput 对象是否会以某种方式滞后于组件，而不是仅导入 VariationA 本身？例如，如果主导入中有 1000 个组件（例如导入图标时）。
// This TextInput has TextInput.VariationA
// TextInput.VariationB and TextInput.VariationC
import TextInput from "myCustomTextInput"
// vs
import { VariationA } from "myCustomTextInput"
Let's say I'm building out a <TextInput /> component.
I have 3 variations. In variation #1, the label is above the textinput; in #2 the label is the placeholder and moves up when clicked; in #3 it's inside the input above the placeholder.
Question1: Performance wise, which method of having the 3 variations is faster in terms of load times in the UI - putting it all in one component with conditional rendering in the JSX everywhere and having a prop to toggle between the three variations, or having 3 totally separate components and then importing a TextInput object and calling a specific variation in this fashion <TextInput.VariationA />?
Question2: Does importing the full TextInput object somehow lag the component instead of just importing VariationA by itself? Say for example if there are 1000 components inside the main import (like when importing Icons).
// This TextInput has TextInput.VariationA
// TextInput.VariationB and TextInput.VariationC
import TextInput from "myCustomTextInput"
// vs
import { VariationA } from "myCustomTextInput"
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不认为性能会出现问题，但我想你会用一个组件处理三个不同的类。您可以通过使用表单组件的 props 给出类名。三种不同的 CSS 样式可能会起作用。
我以前没有尝试过，但我认为它可能会起作用。
I don't think performance is going to problem, but I suppose you would handle it three different class with one component. You can give classnames via props where form component is used. And three different css styling will probably works.
I haven't try it before but I think it might works.