Реагировать на изоморфные неудобства

Я создаю изоморфное приложение, используя Node.js и ReactJS.

Я встречал ситуацию, когда внутри какого-то изоморфного компонента React (отрисовываемого как на стороне клиента, так и на стороне сервера) мне нужно включить только клиентскую зависимость (например, какую-то библиотеку уведомлений).

Каков наилучший способ, чтобы он работал (скомпилирован) как на стороне сервера, так и на стороне клиента?

P.S. У меня мало мыслей о возможных обходных путях, таких как проверка переменных браузера env (например, некоторых typeof window !== 'undefined') и т. д., но я не уверен, что это хороший способ.


reactjs node.js isomorphic-javascript
person oleh.meleshko    schedule 18.01.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

«Недостатком» является то, что если ваша зависимость на стороне клиента улучшает элемент, например, или изменяет какое-либо его свойство, оно сначала получит свойство по умолчанию, поскольку оно было обработано на стороне сервера, и когда componentDidMount запустится, оно будет изменено, вызывая «мигание» .

person Henrik Andersson    schedule 18.01.2016
comment
как я сказал напр. Мне нужно включить notificatoins lib. Я хочу включить его один раз, для этого мне нужно иметь componentDidMount только в компоненте React верхнего уровня, верно? Есть ли способ безопасно передать его (ссылку на зависимость) через всю иерархию компонентов? - person oleh.meleshko; 18.01.2016
comment
Просто включите его там, где он вам нужен, я имею в виду, что вам нужно его откуда-то потребовать, или вы хотите условно загрузить какой-нибудь javascript? - person Henrik Andersson; 18.01.2016
comment
Я подумал, что могу включить его только один раз глобально, а затем использовать, когда мне нужно. И я не хотел бы требовать его внутри componentDidMount, который может потребовать его много раз позже, динамически зависит от элементов монтажа. - person oleh.meleshko; 18.01.2016
comment
Да, точно, это правильно. Если он уже включен глобально, вы можете ссылаться на него в своем компоненте, который может находиться где угодно в иерархии. - person Henrik Andersson; 18.01.2016
comment
да .. это нормально, например, для клиентской стороны, но nodejs не понимает, что это требует :) или наоборот - person oleh.meleshko; 18.01.2016
comment
А, теперь я понимаю — библиотека, которую вы хотите использовать, не предназначена для Node. Хорошо, тогда вам нужно иметь два пакета, 1 для сервера и 1 для клиента. По крайней мере, я бы так поступил. - person Henrik Andersson; 18.01.2016

arrow_upward
0
arrow_downward

Если вы используете браузер, я часто использую process.browser, что верно только в браузерном коде.

Если вы хотите пофантазировать и удалить серверный код из браузера, вместо этого есть isbrowser, который сделает именно это. .

Другой способ (веб-пакет или браузер) — воспользоваться преимуществами поля браузера в пакет.json. Вы можете сделать так, чтобы серверу требовался файл noop, а браузеру требовался файл, открывающий API на стороне клиента.

person Piercey4    schedule 25.09.2016

arrow_upward
0
arrow_downward

Я определил переменную в файле конфигурации веб-пакета с именем process.env.WEBPACK и в своем коде, когда мне нужно что-то вроде bottstrap js или что-то еще, я просто пишу

  if(process.env.WEBPACK){
     //awesome lib included or scss or whatever
  }
person mr.Deepwest    schedule 11.10.2017