fullstack-development / react-redux-starter-kit

Modular starter kit for React+Redux+React Router projects.
https://demo.fullstack-development.com/
MIT License
91 stars 13 forks source link

Выпилить shared/helpers/react/areComponentsEqual #140

Closed sk1e closed 4 years ago

sk1e commented 4 years ago

Код совершенно не гарантирует равенства компонентов. Непонятно зачем надо. Опишите use cases пожалуйста. Подозреваю что кто-то использовал это для каких-то костылей, а в таком случае оно не должно лежать тут.

in19farkt commented 4 years ago

Да, ты прав, это по сути костыль для того чтобы сравнение компонент одинаково работало в дев режиме и в продакшене. В дев режиме в код врывается react-hot-reload и все element.type оборачивает в свои прокси, таким образом сравнение element.type с конструктором этого элемента всегда возвращает false, хотя должно true.

sk1e commented 4 years ago

Тут даже само понятие «равные компоненты» сомнительно: что есть равные компоненты? И использование: для чего может потребоваться сравнивать компоненты на «равенство»

in19farkt commented 4 years ago

для чего может потребоваться сравнивать компоненты на «равенство»

Сравниваются не компоненты (которые React.ReactElement), а их конструкторы (которые React.ReactElement['type']). Это нужно когда ты хочешь реализовать такое апи:

<Table data={paginatedList} separated>
  <Table.Column>
    <Table.Head align={'center'}>#</Table.Head>
    <Table.Cell align={'center'}>
      {({ index }) => (
        <Typography variant="body1" className={classes.memberNumber}>
          {index + 1}
        </Typography>
      )}
    </Table.Cell>
  </Table.Column>
  <Table.Column>
    <Table.Head align={'right'}>{t(tKeys.columns.size.getKey())}</Table.Head>
    <Table.Cell align={'right'}>{({ data }) => formatBalance(data.value)}</Table.Cell>
  </Table.Column>
  <Table.Column>
    <Table.Head align={'right'}>{t(tKeys.columns.blocksLeft.getKey())}</Table.Head>
    <Table.Cell align={'right'}>{({ data }) => data.remainingBlocks.toString()}</Table.Cell>
  </Table.Column>
</Table>

Компонента Table будет парсить чилдренов, и различать их по полю type, сравнивая с конструкторами (класс/функция)