black swan

Откуда вообще пошло понятие "Селекторов" в Redux ? Есть статьи на этот счет?

Как организовывать лучше и так далее

не reselect, а просто пока сам смысл

Типа, просто вместо операций в присваивании в mstp делают именную функцию после редьюсеров ( которая выполняет ту же задачу, например, возвращает массив из элементов, которые > 0 )

ии...Всё ?

Потому что он должен быть предсказуемый, стабильный для одного и того же элемента) На то он и нужен. Но если ты знаешь, что реакту не понадобится делать какие-то манипуляции, которые могут полагаться на key, то можешь, конечно, рандомные их делать.

Для кого предсказуем? Я key никак не буду использовать, это нужно для оптимизации самому реакту. А чем тебе не стабильный обычный набор чисел? Это для нас это рандомное значение, а для реакта это просто числа, то же самое как очень длинное id

потому что на нем завязана внутренняя реализация реакта

он в зависимости от ключей перестраивает дерево тратя на это меньше ресурсов

а если ключи будут каждый раз разные, то перестраивать он будет все

думая что все поменялось т.к. поменялся ключ

а если ключи будут каждый раз разные, то перестраивать он будет все

Почему он будет каждый раз разный. Он при построении запомнит эти значения и дальше будет работать только с ними

Если ты задал ключи как индексы элемента, то при удалении одного элемента из массива данных у тебя поменяются все ключи и будет перестроено все дерево

Поменяются пропсы у родительского компонента, в котором формируются дочерние, ключи поменяются

вместо перестроения (удаления) одного куска

посмотри скринкаст у Кантора на сайте

он хоть не очень, но это там объяснено нормально

а если ключи будут каждый раз разные, то перестраивать он будет все

Там 1 инпут, чел

Нечего перестраивать

вместо перестроения (удаления) одного куска

Я через консоль проверял с этими ключами, и у меня не все компоненты перестраивается, а только один. И поэтому нормально такие ключи отрабатывает. Я проверял и сними и без них

у тебя виртуальное дерево обрабатывается, а затем перестраивается и DOM

Там 1 инпут, чел

я это к вопросу, почему ключи должны быть предсказуемыми, а не рандомным значением / индексом элемента

если ты key вообще не задашь, то у тебя по умолчанию будет браться индекс, а реакт будет яростно вопить

Как в компонент Master передать this.state.data ? <Route path="/master/:name" exact component={Master} />

render prop

<Route path="..." render={() => <Master data={this.state.data} />

ребята, подскажите пожалуйста у кого был опыт: есть два варианта использования реакт с ssr 1. берем бэкэнд пишет на любимом фреймворке и ходим по по локалхосту за рендерингом к ноде, и второй вариант, берем ноду, рендерим с нодой, а за данными ходим к любимому бэкэнду, так вот при реализации второго подхода у меня получилось, что получает он верстку от ноды за 125 мс (причем это не продакшн, то есть запроса по сети как такого нет), и при первом подходе 125 сек, только там уже данные берутся у фреймворка и передаются ноде и все это уже как бы работает в сети, либо я чет намудрил, либо что хз, но чет как-то странно.

"и при первом подходе 125 сек" билдится весь проект при каждом обращении? :))

да нет) сделал по туториалу обертку на create react app

добавил там ssr

ааа во втором

в первом у меня вызывается renderToString, через context у StaticRouter передаю данные от бэкэнда и все

https://github.com/dikiigr/django-react-boilerplate/blob/master/frontend/server/middleware/renderer.js

это второй подход

Зачем так нужен сср, можете пояснить? Все равно это мертвая верстка, с которой пользователь никак не может взаимодействовать

Зачем так нужен сср, можете пояснить? Все равно это мертвая верстка, с которой пользователь никак не может взаимодействовать

ты это сеошникам расскажи...

seo, проекты которые продают и им важен трафик с поисковых систем нужнаются в этом как никто другие

import express from 'express'; import React from 'react'; import { renderToStaticMarkup, renderToString } from 'react-dom/server'; import { StaticRouter } from 'react-router-dom'; import MainRouter from './app/routing/MainRouter'; var bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.get('/', (req, res) => { let reactMarkup = renderToStaticMarkup( <StaticRouter location={req.body.url} context={req.body}> <MainRouter /> </StaticRouter> ) let markup = (` ${reactMarkup} <script>window.__DATA__ = ${JSON.stringify(req.body)}</script> `) return res.json({error: null, markup}); }); app.listen(process.env.PORT || 3000, () => { console.log('Server is listening'); });

это было при первом подходу

seo, проекты которые продают и им важен трафик с поисковых систем нужнаются в этом как никто другие

а в чём собственно проблема 125 мс медленно?

ну медленно, учитывая что там не было даже запроса к апи

и это было по локалхосту, то есть не было выхода в сеть как такового

пытаюсь понять, где ж это я паям так усложнил, чтоб запрос был 125 мс

попробй зарендери <div>123</div>

94 мс

тоже много

ну медленно, учитывая что там не было даже запроса к апи

у меня страницы с запросами к графу (примерно по 8-10 штук) некоторые последовательно выполняются, и рендер занимает ~300-500, сам рендер реактом(кгда уже данные собраны) занимает около 80мс Ну и всегда есть console.time() console.timeEnd()

чет не пойму, че там может быть не так

чет не пойму, че там может быть не так

проект то сбилжен???

там как-то он странно сервер запускает (по туториалу), я в первом подходе webpack собирал

а тут чет как-то намудренно

require('ignore-styles'); require('url-loader'); require('file-loader'); require('babel-register')({ ignore: [ /(node_modules)/ ], presets: ['es2015', 'react-app'], plugins: [ 'syntax-dynamic-import', 'dynamic-import-node', 'react-loadable/babel' ] }); require('./index');

сама команда "server": "NODE_ENV=production node server/bootstrap.js"

тут случаем не получается, что на лету происходит трансляция es6 в понимаемый код нодой и тд и тп?

там как-то он странно сервер запускает (по туториалу), я в первом подходе webpack собирал

да так и происходит

да так и происходит

тогда недочет найден, спасибо, а то я прям чет напрягся

интересный вопрос: имеем объект/массив возможных цветов, имеем имя пользователя....можно ли как то на основе имени пользователя высчитывать цвет его аватара к примеру? (на основе хэша от имени или как то иначе)

<Route path="..." render={() => <Master data={this.state.data} />

спасибо)

ребята, подскажите пожалуйста у кого был опыт: есть два варианта использования реакт с ssr 1. берем бэкэнд пишет на любимом фреймворке и ходим по по локалхосту за рендерингом к ноде, и второй вариант, берем ноду, рендерим с нодой, а за данными ходим к любимому бэкэнду, так вот при реализации второго подхода у меня получилось, что получает он верстку от ноды за 125 мс (причем это не продакшн, то есть запроса по сети как такого нет), и при первом подходе 125 сек, только там уже данные берутся у фреймворка и передаются ноде и все это уже как бы работает в сети, либо я чет намудрил, либо что хз, но чет как-то странно.

я долго мучался с SSR и обратился к https://github.com/reframejs/reframe

интересный вопрос: имеем объект/массив возможных цветов, имеем имя пользователя....можно ли как то на основе имени пользователя высчитывать цвет его аватара к примеру? (на основе хэша от имени или как то иначе)

отвечу сам...берем строку, берем сумму всех charCodeAt, потом математика и вуаля - цвет от имени) всем спасибо)

А есть ли документация реакта на великом и могучем?

я долго мучался с SSR и обратился к https://github.com/reframejs/reframe

зря... собрать реакт с ssr как бы не сложно

я долго мучался с SSR и обратился к https://github.com/reframejs/reframe

лучше никогда не использовать то, в чем есть слово “фреймворк"

зря... собрать реакт с ssr как бы не сложно

у меня там еще и react-native-web…, вообщем может в каникулы заморочюсь вновь вебпаком)

ERROR: S client not available

лучше никогда не использовать то, в чем есть слово “фреймворк"

next ?

next ?

мелким шрифтом *кроме фреймворков завереных совой*

хотя я на его кастомизацию потратил времени наверное столько же

сколь бы ушло на написание обыного ssr

лучше никогда не использовать то, в чем есть слово “фреймворк"

Как категорично

Даже для Совы

хотя я на его кастомизацию потратил времени наверное столько же

+

ContextApi заменит полностью Redux?

нет

к сожалению

хотя это вообще о разном

нет

Почему, какие нюансы?

ну это разные вещи

редакс работает через контекст

сам контекст это механизм распределения данных

он ничего нам не говорит о их менеджменте

ContextApi заменит полностью Redux?

он будет использоваться в react-redux

покажите структуру ваших проектов

Группируйте компоненты по функциям?

Группируйте компоненты по функциям?

да

можешь пример скинуть? какие еще папки есть кроме components

можешь пример скинуть? какие еще папки есть кроме components

http://github.com/sergeysova/instaclone-frontend.js

http://github.com/sergeysova/instaclone-frontend.js

ty

ого https://medium.com/@lucyhackwrench/%D1%87%D1%82%D0%BE-%D1%83%D0%BC%D0%B5%D1%8E%D1%82-%D0%B8-%D1%87%D0%B5%D0%B3%D0%BE-%D0%BD%D0%B5-%D1%83%D0%BC%D0%B5%D1%8E%D1%82-css-custom-properties-18949a22ee81?ct=t(hamail_20180515)

интересно как с этим можно sc закрутить

не нужно

есть же стейт менеджеры и вставка жс переменных

ну я вот хз как эти переменные с js закрутить

допустим для тем

у жс есть все для этого

или просто хуярить как раньше color:${props.color}