reactjs - 当 React 中有重复代码时，最好将它们放在一个数组中并使用 map 进行渲染，还是手动编写整个标记？

问题描述

第一种方式：

    function SampleComponent(){
     const data = [Hello, World];
     return (
       <div>
       { data.map(x => <ChilComponent name={x} />) }
       </div>
    }
    
    function ChildComponent(){
      return( <h1> {name} </h1>
    }

第二种方式：

   function SampleComponent(){
     return (
       <div>
        <h1>Hello</h1>
        <h1>World </h1>
       </div>
    }

在我的原始代码中，子组件具有相同的属性和类名，除了它所采用的名称。但是我只需要渲染 5 个元素。我不确定哪种方式更优化以及为什么。请解释。

标签： reactjsreact-component

我认为在提供的确切用例中快速简单地回答这个问题会更好地像在第二个解决方案中那样手动渲染元素。

假设文本“Hello”，“World”不是动态的，并且仅特定于该组件：

我的理由是，我认为第一种方式的优化（至少在性能方面）会降低是有道理的。显然，在这种情况下，性能不应该成为问题，但我认为它仍然说明了这一点。第二种方法是简单的方法，只是渲染到 DOM。第一种方法与第二种方法相同，只是它需要创建一个数组，然后在执行与选项 2 相同的方法之前遍历该数组。

现在，如果您从严格的代码可读性/可重用性的角度提出问题，我的回答可能会略有不同......

假设data将是来自父级的道具，而不仅仅是示例中的硬编码字符串：

从外部的角度考虑这一点，作为第一次来从事该项目的人，我更愿意看到数据被转换成一个数组，就像你在第一种方法中所做的那样。它更干净/令人愉悦，我觉得它不太容易出现意外错误或拼写错误。

对于这个例子，我认为这最终归结为大量的个人选择。我见过非常优秀的程序员以这两种方式做到这一点，并为每一种方式都提供了很好的论据。

reactjs - 当 React 中有重复代码时，最好将它们放在一个数组中并使用 map 进行渲染，还是手动编写整个标记？

问题描述

解决方案

推荐阅读