А как избавиться от const test = (event, i) => <div onClick={event => this.test(event, i)}></div> Тоже при каждом рендере будет создаваться функция.

вынести в компонент

например? В данном случае const test не внутри рендера. А в классе

ойбез конст, конечно. туплю с утра что-то

во-первых, не я. Во-вторых, далеко не факт, что рендер конкретно этого элемента вызывается 100500 раз, в третьих создание функции не такая уж тяжелая операция, в-четвертых, преждевременная оптимизация - корень всего зла

в смысле не факт? Если у тебя там shouldComponentUpdate возвращает false всегда? Ну да, тогда не факт.

еще как тяжелая операция

это не преждевременная оптимизация. Это здравый смысл

export default class Test extends Component { test = (event, i) => { console.log(i) } render() { return <div onClick={event => this.test(event, 1)}/ > } }

вот маленький пример

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

и сохранить евент

а что плохого в data атрибутах-то?

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md тут как раз говорят о таких случаях советуют выносить в отдельный компонент

доставать из них - лишний код

две строчки

ну можно и одну даж

на 1 метод)

вот маленький пример

export default class Test extends Component { test = (event, i) => { console.log(i) } render() { return <Child onClick={this.test} i={1} /> } } class Child extends Component { constructor(props) { super(props); this.onClick = this.onClick.bind(this); } onClick(event) { this.props.onClick(event, this.props.i); } render() { return ( <div onClick={this.onClick} /> ); } }

если у тебя рендер вызывается 100500 раз то вынос байнда тебя не спасет

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

и не париться

а если бизнес-логика такая?

@gusnkt кул, а если надо в 1 компоненте?

@ano

бывает )

@anoru что надо в 1 компоненте?

хотя стоп, только сейчас прочитал

это не решает вопрос, что я писал

ты не можешь подставить переменную в строчке с дивом

опять же дата аттрибут надо)

зачем?

ну, есть у меня 5 дивов. Все они вызывают метод onClick допустим, который принимает event и какую-нибудь переменную - строка, например. Ты сам понимаешь зачем, дискасс идет о подходах кто какие юзает, например

не, хочешь - юзай data-attribute, просто это не всегда возможно

вот что вам пишет эта страничка? http://codepen.io/anon/pen/dMBXbJ?editors=1010#anon-login

а писать bind внутри render - говнокод

это не говнокод

вот что вам пишет эта страничка? http://codepen.io/anon/pen/dMBXbJ?editors=1010#anon-login

0.001724 millis

А бывалислучаи, когда onClick={event => this.test(event, i)} прямо тормозили апп? Ни разу не сталкивался. Ну,если там не 1000 перерендеров в секунду

ок, это среднее время создания функции, если я нигде не налажал

если у тя рендер вызывается 100500 раз - это говнокод

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

1.5 микросекунды

0.001724 millis

0.000719 millis

то что ты не знаешь, как работает v8?)) у тебя эта функция вынесена наверх за цикл))

0.000719 millis

0.001528 millis второй раз уже проиграл(

если у тя рендер вызывается 100500 раз - это говнокод

еще раз, если это бизнес-логика? realtime данные

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

ты меня не слышишь)) Разные данные постоянно приходят, РАЗНЫЕ. Знаю я про shouldComponentUpdate

на codepen сломался логин через github(

впрочем через фейсбук тоже не работает

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

вот что вам пишет эта страничка? http://codepen.io/anon/pen/dMBXbJ?editors=1010#anon-login

0.000902 millis

вот что вам пишет эта страничка? http://codepen.io/anon/pen/dMBXbJ?editors=1010#anon-login

0.000412 millis

то что ты не знаешь, как работает v8?)) у тебя эта функция вынесена наверх за цикл))

codepen сломался, так что скопирую сюда

let a = [] for(var i = 0; i<n;i++){a[i] = function(){console.log(this.a)}};

также

обновил кодпен

сделал вообще шайтанство, но все равно две микросекунды на создание объекта

обновил кодпен

0.001297 millis

0.000719 millis

0.001179 millis :(

обновил кодпен

0.000707 millis

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

сделал вообще шайтанство, но все равно две микросекунды на создание объекта

До этого было быстрее.

ERROR: S client not available

ну да, там еще один бинд

по факту наверное две функции теперь создается там

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

норм Денис вбросил

сработало

:)

smm + 500

это как apple vs android. всегда актуально)

я вот собрался виндофон брать

СТОП

как второй моб

норм Денис вбросил

+1, последний час тоже самое думаю

/stat@comstatbot

как на десктопе нормально цитировать?

даблклик для ответа

даблклик для ответа

ооо спс

а у меня нормально не собирается с arrow function + class. Missing class properties transform.

это как apple vs android. всегда актуально)

как мазик вс кетчуп вс вместе. вот что вечно актуально

/stat@comstatbot

а у меня нормально не собирается с arrow function + class. Missing class properties transform.

какой stage включен?

парни, скажите, а для children можно как то ref создать?

```React.cloneElement(child, {ref: (el) => {}})```

какой stage включен?

stage0, причем указан после es2015/react, как надо

психи

кстати, stag0 + es2015 не включает es2016 же?

драфт-то уже есть

какие новые фичи в 2016?

экспоненшл оператор и .includes

может быть добавят Object.values() Object.entries() они тоже готовы

но их не успели просунуть в мае в es2016

в общем, ничего сильно крупного не будет )