Блог

Главная - Вопросы по программированию - Есть ли что-то неправильное в передаче функции, которая возвращает компонент в качестве реквизита?

Есть ли что-то неправильное в передаче функции, которая возвращает компонент в качестве реквизита?

#reactjs

#reactjs

Вопрос:

У меня есть несколько очень похожих таблиц во всем моем приложении.

Таким образом, я хотел разработать модульный RootTable компонент, который можно использовать для составления других таблиц. Предположим, что я хочу сгенерировать таблицу, содержащую список лиц, и таблицу, содержащую список зданий. Теперь моя проблема в том, что a <tr> в таблице построения выглядит совсем иначе, чем a <tr> в таблице person.

Чтобы решить эту проблему, я подготовил два компонента PersonRow и BuildingRow и предназначен RootTable для использования следующим образом:

 <RootTable
  some_prop="some_val"
  ...
  renderRow={(entry) => <BuildingRow some_prop="some_val", ... />
>

Итак, по какой-то причине передача функции, которая возвращает компонент в качестве реквизита, является плохим стилем?

Комментарии:

1. Нет, нет ничего плохого в предоставлении функции creator или функции визуализации в качестве реквизита для компонента. На самом деле это установленный шаблон с именем render props .

2. Возможно, вы захотите добавить a key в любую созданную вами строку, потому что этот вариант использования, похоже, создает массив строк. И клавиши сообщают средству согласования, если какая-либо строка была изменена, добавлена или удалена. Но это актуально только в том случае, если записи вашей таблицы когда-либо обновляются после первого рендеринга.

Ответ №1:

Избегайте определения встроенной функции в функции визуализации.

Поскольку функции являются объектами в JavaScript ({} !== {}), встроенная функция всегда будет отказывать prop diff, когда React выполняет проверку diff. Кроме того, функция со стрелкой создаст новый экземпляр функции при каждом рендеринге, если она используется в свойстве JSX. Это может создать много работы для сборщика мусора.

Вместо определения встроенной функции для реквизита, вы можете определить функцию стрелки.

 const renderRow = (entry) => <BuildingRow some_prop="some_val", ... />

<RootTable
  some_prop="some_val"
  ...
  renderRow={renderRow(entry)}
>

Комментарии:

1. У этого ответа есть некоторые проблемы: во-первых: renderRow={renderRow(entry)} вызовет функцию вместо ее назначения. И второе: создание постоянной функции со стрелкой внутри функции рендеринга не отличается от ее встраивания. Чтобы что-то изменить, вам нужно будет создать его вне функции рендеринга, поэтому он статичен . И третье: для абсолютно большинства случаев использования встраивание функций со стрелками в React абсолютно нормально, и есть только редкие случаи, когда useCallback это повышает производительность.

Метки: ,