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

class SwipeListItem extends React.Component<Props> { constructor() { super(); console.log('we are in constructor'); } _onDeleteButtonPress = (): void => this.props.onDeleteButtonPress(this.props.item.id); _onItemPress = (): void => this.props.onItemPress(this.props.item.id); render(): React.Element<*> { return ( <SwipeRow body={ <View style={styles.listItemContainer}> <TouchableOpacity onPress={this._onItemPress}> <Text>{this.props.item.name}</Text> </TouchableOpacity> </View> } disableRightSwipe right={ <Button danger onPress={this._onDeleteButtonPress}> <Icon active name="trash" /> </Button> } rightOpenValue={-75} /> ); } } const SwipeListItem = <TEntity>({ onDeleteButtonPress, onItemPress, item, }: Props<TEntity>): React.Element<*> => { console.log('call functional component'); const _onDeleteButtonPress = (): void => onDeleteButtonPress(item.id); const _onItemPress = (): void => onItemPress(item.id); return ( <SwipeRow body={ <View style={styles.listItemContainer}> <TouchableOpacity onPress={_onItemPress}> <Text>{item.name}</Text> </TouchableOpacity> </View> } disableRightSwipe right={ <Button danger onPress={_onDeleteButtonPress}> <Icon active name="trash" /> </Button> } rightOpenValue={-75} /> ); };

когда я фетчю новые итемы в листе ..рендерится вот так:

что в итоге быстрее, чет не допру..по судя по картинке класс

когда все зафетчилось, поведения одинаковое

Лог в классе вызывается только в конструкторе, а не в рендере (то есть рендер может и 10 раз вызываться, а ты увидишь только один раз), а в функции лог при каждом рендере

но вообще смысл этого компонента, забиндить _onDeleteItem и _onPressItem, чтобы они не пересоздавались при каждом onPress=()..поулчается что при использвоании класса, эти функции создаются один раз, а при функциональном компоненте, каждый раз, так?

т.е. класс так или иначе предпочтительнее здесь?

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

да, эт я понял, за это спасибо)

я уже дальше иду)

я хочу минимальное количество раз пересоздавать onDeleteItem

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

впрочем наврено можно вынести в парент компонент замыкание этих функций так onDeleteItem = (id) => () => {..do stuff} ...тогда и функциоальный компонент прокатит

ну ок, спасибо за помощь

Если у тебя парент - список, то не получится

парент враппер над react-native'ским FlatListom

вот это в паренте:

_onDeleteItemPress = (id: string): Promise<void> => () => { this.props.locationStore.deleteByID(id); }; _onItemPress = (id: string): void => this.props.navigation.navigate('locationDetails', { id, }); _renderItem = ({ item }: { item: Location }): React.Element<*> => ( <SwipeListItem item={item} onDeleteItemPress={this._onDeleteItemPress} onItemPress={this._onItemPress} /> render(): React.Element<*> { return ( <FlatList ListFooterComponent={this._renderFooter} onEndReached={this._fetchNextData} data={this.props.locationStore.all} keyExtractor={this._keyExtractor} renderItem={this._renderItem} /> ); }

т.е. если в _onDeleteItempress добавить пару скобочек, должно прокатить, не?

потому что сам этот враппер маунтится всего разок

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

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

Рекомпос хорош в простых кейсах, но строить большой контейнер на нем - боль

а мы как-то в одном проекте прям рекомпос аддиктед стали :)..прям очень зашел...в последнем правда тоже вернулись на классы, т.к. mobx, а он с декораторами намного красивее и понятее выглядит.

Единственное с рекомпосом флоу задолбались сдруживать ).. вот эт прям даа..боль

Recompose — как приправа — может оказаться очень к месту но очевидно не обязательно фигачить это везде ?

Хотел забанить, а я не админ(

позови админа )

https://github.com/dvajs/dva

что про это скажете?

node 8.7.0, npm 5.4.2 package-lock сломался, снес его, поставил пакеты заново, и вот такая хрень в итоге

Ты установил FS модуль?!

Или это из вебпака выхлоп?

https://github.com/dvajs/dva

когда вижу "lightweight" и "elm-style" на жс, то становится сразу, это однозначно куча бойлерплейта ждет. Особенно пугает lightweight фреймворк. Чем он lightweight, тем он меньше делает сам, толку от такого фреймворка тогда

Ты установил FS модуль?!

вроде ничего нового не устанавливал

когда вижу "lightweight" и "elm-style" на жс, то становится сразу, это однозначно куча бойлерплейта ждет. Особенно пугает lightweight фреймворк. Чем он lightweight, тем он меньше делает сам, толку от такого фреймворка тогда

Глянул. Не так много

вроде ничего нового не устанавливал

Откуда мне знать, что там было уже

Откуда мне знать, что там было уже

ну в зависимостях FS нет, разьве что какой-то из пакетов сам поставил в подзависимостях.

ну в зависимостях FS нет, разьве что какой-то из пакетов сам поставил в подзависимостях.

Ошибку вебпак вернул?

https://github.com/dvajs/dva

почти то же самое дает withReducer рекомпоса, хоть тут мб даже лучше. А, стоп, он не локальный. Короче, вроде неплохо

Ошибку вебпак вернул?

ага он

единственное что он от китайцев, со всеми вытекающими

а как мне жквери подключить? ?

$ from 'Jquery'

Ты из контекста фразу прочитал

ERROR: S client not available

Весь тред возьми

посоны, вы видели какой-нибудь адекватный drag&drop для дашбоардов?

https://github.com/react-dropzone/react-dropzone Там как раз ментейра ищут

Подскажите как можно увеличить скорость. Есть таблица с 1000 строками. При клике на каждую строку появлятся input. Дело в том, что это все очень медленно работает, как увеличить производительность?

Input onChange слишком медленно работает

https://github.com/bvaughn/react-virtualized мб?

Подскажите как можно увеличить скорость. Есть таблица с 1000 строками. При клике на каждую строку появлятся input. Дело в том, что это все очень медленно работает, как увеличить производительность?

pure заюзал?

Нет

попробуй ?

PureComponent / shouldComponentUpdate

Окей, спасибо

+ иммутабельный стейт

Если onChange хендлер прокидывается через карирование или биндинг то тут shouldUpdateComponent не поможет, он будет функцию onChange считать всегда разной

с Pure будет такая херня, да

но можно в shouldComponentUpdate проверять только то что нужно

у recompose есть специальный НОС для проверки только пропертей из списка

onlyUpdateForKeys

кто в реакте джуниор? Напишите в личку, тема есть

я тут обновил еслинт конфиги для любого жс: atmx.in/eslint-base для реакта atmx.in/eslint-react

Подскажите пожалуйста, как в actions можно сделать опциональные парамемтры? Т.е. у меня был экшн, сечас я хочу его расширить, но не хочу ломать совместимость в других местах, есть для этого какие-нибудь способы?

Подскажите пожалуйста, как в actions можно сделать опциональные парамемтры? Т.е. у меня был экшн, сечас я хочу его расширить, но не хочу ломать совместимость в других местах, есть для этого какие-нибудь способы?

тесты напиши

Проблема не в том, что я не знаю где сломается, я хочу сделать так что бы не сломалось

Было вот так: export const setCurrentData = (url) => { return (dispatch) => { dispatch({ type: 'REQUEST_CURRENT_DATA', payload: url }); FetchGet({ url, onSuccess: (data) => dispatch(receiveData(data)), onError: (error) => dispatch({ type: 'REQUEST_CURRENT_DATA_ERROR', payload: error }) }); }; }; Хочу сделать вот так: export const setCurrentData = (url, params) => { return (dispatch) => { dispatch({ type: 'REQUEST_CURRENT_DATA', payload: url }); FetchGet({ url, params, onSuccess: (data) => dispatch(receiveData(data)), onError: (error) => dispatch({ type: 'REQUEST_CURRENT_DATA_ERROR', payload: error }) }); }; };