Выполнение выполняемой функции в рендере - React

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, извлеките новый компонент. Производительность очень мала, если таковая имеется, и вам не следует беспокоиться, если она не слишком медленная в вашем реальном приложении.