Открыть список
Как стать автором
Обновить

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

Рассматривали ли вы возможность писать на чистом react-native и запускать в браузере через react-native-web? И если рассматривали, то почему отказались?

react-native-web не рассматривали, решили сделать свою реализацию, чтобы не ставить зависимостью еще одну «фундаментальную» библиотеку.
Возникает вопрос: как же объединить это в один компонент и в то же время разделить рендеринг? Тут на помощь приходит React паттерн под названием HOC или Higher Order Component.
Дополню, что это лишь один из нескольких способов. Вообще, если бы функция render была бы отделена от компонента, как в Vue.js, то такой проблемы не возникало бы. Это хороший пример недостатка, когда логика объединена с view.

Тем не менее, вместо HOC можно воспользоваться паттерном стратегия. Тогда не будут создаваться дополнительные компоненты в дереве компонентов.
class BaseCrossPlatformComponent extends PureComponent
  render() {
    const renderStrategy = this.config.renderStrategy; // renderStrategy, например, присваиваем в конструкторе
    return renderStrategy(this.props);
  }

const renderButtonWeb = ({ propA, propB }) => (<div> ... </div>);
const renderButtonNative = ({ propA, propB }) => (<div> ... </div>);

Мне хочется продемонстрировать свой подход. Может кому-то будет интересно.
github.com/sergeysibara/entity-component-behaviour-approach-in-react
Вот только пока без нормальной документации.

В моем подходе и render и логика компонента вынесены вне компонентов. Т.е. любой компонент у меня просто объект с одинаковым минимальным функционалом, который позволяет добавлять необходимую логику. За счет этого получаем повторно используемую логику в компонентах-классах, подобно custom hooks.

Ваши компоненты в моем подходе выглядели бы так:
const renderButtonWeb = ({ propA, propB, ...props}) => (<div> ... </div>);
const renderButtonNative = ({ propA, propB, ...props}) => (<div> ... </div>);

const WebButton = createContainerComponent("WebButton", {
  behaviours: [
     { behaviour: CommonButtonMethods },
     { behaviour: WebButtonMethods }
  ], 
  render: renderButtonWeb
});

const NativeButton = createContainerComponent("NativeButton", { 
   behaviours: [
     { behaviour: CommonButtonMethods },
     { behaviour: NativeButtonMethods }
   ], 
   render: renderButtonNative 
});
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Информация

Дата основания
Местоположение
Россия
Сайт
career.luxoft.com
Численность
свыше 10 000 человек
Дата регистрации
Представитель
LuxoftRussia

Блог на Хабре