уже по названиям понятно, что делают

Господа, на сколько большие у вас компоненты? У меня компонент на 125 строк, бить за такое не будут?

это вместе с методами или только дом?

Совет - в таких либах открывай сразу исходник, доки можно сразу игнорить

Я уже разобрался, в исходниках порылся.

это вместе с методами или только дом?

вместе с методами

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

И кстати, такой вопрос. Это норм, что бандл 6мб? Я просто не юзал реакт, недавно только взялся за него. Кропотливо относился к минификации своего бандла, без jq. 1мб это для меня был ад, а тут реакт аж на 6мб бандл создал.

То есть, для реакта это норм?

не, это плохо.

Много статей как уменьшить бандл

вот тебе на русском https://habrahabr.ru/post/308926/

И кстати, такой вопрос. Это норм, что бандл 6мб? Я просто не юзал реакт, недавно только взялся за него. Кропотливо относился к минификации своего бандла, без jq. 1мб это для меня был ад, а тут реакт аж на 6мб бандл создал.

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

devtool в вебпаке закоменти и сбилди, будет в разы меньше

вот тебе на русском https://habrahabr.ru/post/308926/

Найс статья, типа "включите минификацию чтобы билд был меньше". Уж лучше это время потратить на чтение доков на офсайте

Статья конечно капитанская, да еще и для w1

чятик чмоке вопрос нубский — кто как передает индекс/пропнейм в чайлд-компонент чтобы обратно получить его в onChange например? с мемоизацией как-то ебловато выглядит this.getOnChange = _.memoize((i)=> (value)=> this.onChange(value, i)) this.onChange = (value, i) => console.log(i) ... ... arr.map(item, index) => {<SomeInput onChange={this.getOnChange(index)}}

Понял, спасибо

@syabro ты имеешь в виду подход к обмену данными между родителем и ребенком? посмотри тут #1

https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.k890slyvs

больше никому не показывай это

()=> создает новую функцию каждый раз

соответственно привет ререндер на каждый чих

это понятно, но суть не в этом.

так суть именно в этом

чтобы этого не было есть два варианта: — мемоизация функций по индексу, как в моем коде — передача какого-то аттрибута в чайлд, который он будет пробрасывать назад в onChange

()=> создает новую функцию каждый раз

нельзя делать компоненты через () => ?

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

нельзя делать компоненты через () => ?

нельзя делать onChange={(=>...}

можно конечно в shouldComponentUpdate еще исключить props.onChange

но бойлерплейта много тоже получается

в каждом компоненте это фигачить

Найс статья, типа "включите минификацию чтобы билд был меньше". Уж лучше это время потратить на чтение доков на офсайте

Это я через гугл нашел первую) Но таких статей много насамом деле, чуть ли не каждый день пишут

соответственно привет ререндер на каждый чих

во первых ты уверен что тебе нужна именно там оптимизация? во вторых у тебя дочерние от PureComponent что ли наследуются?

ага, Pure

ты для конкретного кейса рассматриваешь или в общем?

в общем — хочу определить "политику партии" для проекта, чтобы код консистентный был

в общем я бы не советовал везде Pure пихать

чтобы onChange был по одному паттерну

а если не везде Pure то и не обязательно парится насчет создания новой функции

плюс ты мемоизацией память просадишь

GC не соберет

вот тут да

а Pure какие проблемы?

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

а Pure какие проблемы?

shallow compare в каждом компоненте, думаешь это быстро?

ререндер быстрее чтоли? )

а с каких пор ререндер медленный?

ну я плюсом стараюсь отдавать примитивы в пропсах

<SomeInput onChange={this.getOnChange}} /> передаст тебе в getOnChange по умолчанию event и уже в функии ты можешь вытянуть value из target или значение index ты из чего друго достаешь?

то есть тебе нужно считать каждый раз что быстрее в каждом кейсе ререндер или shallow compare

имхо это не нужно

Alex, я сейчас не про нативные инпуты — они у меня все во врапперах

вот например у меня один из инпутов

именно весь скрин это один инпут

RuleField

который по onChange возвращает обьект

в общем мой тебе совет, пиши проще и не мудри ? нужна будет оптимизация - сделаешь там по-другому, учитывая что все варианты tradeoff и нет идеального решения

ну передавать ключ и autobind трейдоф в принципе

но просто эти сволочи уже заняли проп key и я не могу придумать нормальное название )

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

чтобы можно было передать index или name

в одной переменной

заранее

:)

ERROR: S client not available

заранее

вот я и говорю - не надо ?сам потом будешь разбиратся зачем ты это нагородил и о других подумай, кто будет работать с этим)

:/

ну ладн

а во

еще четвертый вариант

в onChange наверх отдавать value, this.props

а в родителе можно в пропсах передавать индекс, нейм и вообще все что душе пожелает

и получать соответственно в onChange это

плюс ты мемоизацией память просадишь

При нормальном подходе просто нечему просаживаться будет

shallow compare в каждом компоненте, думаешь это быстро?

Кошмар какой, что я только что прочитал

Никому больше про это не говори, нет, правда, это адуха полнейшая

Кошмар какой, что я только что прочитал

может ты лучше аргументы приведешь чем тупо будешь говорить кошмар

Я даже не знаю, с чего начать, то, настолько это радикальная жесть

Shallow compare это максимально быстрая проверка

Shallow compare это максимально быстрая проверка

быстрее чего?

Это, условно, === для каждого пропса

Это if чувак

Вместо полноценного ререндера

Вместо полноценного ререндера

ты хочешь сказать что проверка не отнимает совсем процессорного времени в отличие от рендера?

https://twitter.com/dan_abramov/status/759383530120110080

Вместо полноценного ререндера

я просто не понимаю что ты хотел этим сказать, какая жесть

Никому больше про это не говори, нет, правда, это адуха полнейшая

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

Ничего что все компоненты по умолчанию при вызове shallow compare возвращают true

Что там такое просядет если в некоторые из них я добавлю пару чеков?

Что там такое просядет если в некоторые из них я добавлю пару чеков?

ключевое тут - некоторые. мы говорили про все

Так все и так возвращают тру

Насколько много цпу займет if?

Ничего что все компоненты по умолчанию при вызове shallow compare возвращают true

я если честно вот это не понял, можешь подробней раскрыть мысль?

В сравнении с прогоном через дом тот же

В сравнении с прогоном через дом тот же

кого ты собрался через дом прогонять?

ребят подскажите как рендерить по имени массива

http://jsbin.com/temicofeje/edit?html,js,console,output