Javascript 在render-React中执行函数的性能

我有一个无状态的功能组件，它一次又一次地呈现相同的组件结构。相反，我想创建一个函数来防止我重复自己的操作。如果我在返回中执行函数，会导致性能下降吗

const-Example=props=>{ 返回{ 标题1 {data1} 标题2 {data2} 标题3 {data3} 标题4 {data4} } } //vs。 const-Example=props=>{ 函数customComponenttitle、数据{ 回来 {title} {data} } 回来 customComponentTitle 1，数据1 customComponentTitle 2，数据2 customComponentTitle 3，数据3 customComponentTitle 4，数据4

---

} 在这种情况下，您应该将标记提取到其自己的功能组件中：

const CustomComponent = ({title, data}) => (
    <div>
        {title}
        {data}
    </div>
);

然后你可以做：

const Test = props => {
    return (
        <React.Fragment>
            <CustomComponent title="Title 1" data={data1} />
            <CustomComponent title="Title 2" data={data2} />
            <CustomComponent title="Title 3" data={data3} />
            <CustomComponent title="Title 4" data={data4} />
        </React.Fragment>
    );
}

你的数据来自哪里还不是很清楚。假设将数组中的项目作为道具传递，则可以按如下方式渲染：

const Test = props => {
    return (
        <React.Fragment>
            {props.items.map(({title, data}) => (
                <CustomComponent title={title} data={data} />
            ))}
        </React.Fragment>
    );
}

---

这是中国的日常事务。如果组件包含重复的jsx，则提取一个新组件。如果有的话，性能损失很小，您不必担心，只要它在您的真实应用程序中不是太慢。

听起来您是在要求我们用我们的空闲时间为您进行基准测试？除了一个是小写外，Test和customComponent有什么区别？只需通过传递一个props对象使其成为一个组件，并给它一个有意义的名称。我之所以选择不这样做，是因为它创建了一个新的抽象层。我宁愿使用customComponent函数，因为我可以很容易地看到该函数正在做什么。“我的方法有什么害处吗？”米德尔兹我真的不明白为什么这样做不那么容易。而且，抽象在大多数情况下是一件非常好的事情。使用普通函数的危害在于react不知道它是一个组件，不能在阴影dom中进行扩散，也不能调试和检查它。最终，功能组件与功能无关，但如果希望将其视为组件，则需要遵守react的约定。我试图避免的是必须导航到另一个文件并扫描组件以查看其功能。我还认为写出多行组件比array.map更容易阅读。最后，我的数据来自props，但它必须经过验证，并且不是可以轻松映射的数组的一部分。@MiddleZ您可以在同一个文件中定义任意多个组件。没有要求每个组件都有一个单独的文件。如果map不符合您的要求，您也不需要使用它。这只是一个例子。使用贴图渲染相同形状的数据是常见的做法，并且可读性很强。由于我不知道你的申请，我只是猜测这可能会对你有所帮助。渲染前验证数据的问题在哪里？扫描功能和扫描组件有什么区别？功能组件就是功能。