Question

我有一个无状态的功能组件，可以一遍又一遍地呈现相同的组件结构。我想创建一个函数，以防止我不得不重复自己。如果我在退货范围内执行功能，是否会导致性能下降？：

const Example = props => {
  return {
    <div>
      Title 1
      {data1}
    </div>
    <div>
      Title 2
      {data2}
    </div>
    <div>
      Title 3
      {data3}
    </div>
    <div>
      Title 4
      {data4}
    </div>
  }
}

// vs.

const Example = props => {
  function customComponent(title, data){
    return (
      <div>
        {title}
        {data}
      </div>
    )
  }

  return (
    customComponent(Title 1, data1)
    customComponent(Title 2, data2)
    customComponent(Title 3, data3)
    customComponent(Title 4, data4)
  )
}

Answer 1

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

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>
    );
}

还不清楚您的数据来自何处。假设您将商品放在数组中作为prop传递，则可以将其渲染为：

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

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

渲染中执行函数的性能-React

1 个答案: