Size: a a a

React Native — русскоговорящее сообщество

2020 February 09

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Потому что он pure component...
А чуть подробнее?
источник

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Потому что он pure component...
Я понимаю, почему он перерисовывает все 20 элементов при загрузке второй страницы. Но зачем он перед этим повторно отрисовывает первые 10?
источник

ET

Eduard Tkachuk in React Native — русскоговорящее сообщество
Привет, ребята, как лучше реализовать синхронизацию данных на сервер? Чтобы после включения интернета данные синхронизировались.
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Kamo Spertsyan
Я понимаю, почему он перерисовывает все 20 элементов при загрузке второй страницы. Но зачем он перед этим повторно отрисовывает первые 10?
Потому что по определению "pure component" при изменении идентити любого св-ва перерендеривается.
Дальше, но это уже подробности реализации, которые на его pure натуру никак не влияют. FlatList обеспечивает "окно" с теми данными, что предположительно видны на экране. Но, и в документации это описано, это тоже условно... в реальности, у него есть некая часть "головы" списка, она всегда примонтирована и это самое "окно" довольно большого размера. Вот при рендере, он рендерит "голову" и "окно". Ваши 10 первых и следующие 10 попадают и туда и туда, вот они рендерятся при смене идентити любого св-ва FlatList. А идентити меняется, т.к. в при добавлении элемента в data приходит абсолютно новый массив.
Так получилось подробней?
На вопрос почему именно такой интерфейс выбрали в фейсбуке для оконного списка я ответить не могу...
источник

Z

Zaff in React Native — русскоговорящее сообщество
Никто не знает решение этой проблемы при подключении к Firebase?

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.      
(Saw setTimeout with duration 307892ms)

В issue на гитхабе вроде так и нет никакого решения, разве что workaround-ы.
источник

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Потому что по определению "pure component" при изменении идентити любого св-ва перерендеривается.
Дальше, но это уже подробности реализации, которые на его pure натуру никак не влияют. FlatList обеспечивает "окно" с теми данными, что предположительно видны на экране. Но, и в документации это описано, это тоже условно... в реальности, у него есть некая часть "головы" списка, она всегда примонтирована и это самое "окно" довольно большого размера. Вот при рендере, он рендерит "голову" и "окно". Ваши 10 первых и следующие 10 попадают и туда и туда, вот они рендерятся при смене идентити любого св-ва FlatList. А идентити меняется, т.к. в при добавлении элемента в data приходит абсолютно новый массив.
Так получилось подробней?
На вопрос почему именно такой интерфейс выбрали в фейсбуке для оконного списка я ответить не могу...
Кажется, вы знаете то, что мне интересно, но я ещё не уловил соль.

Что вы называете идентити? В данном примере - это область памяти, в которой хранится массив?

И я не очень уловил про голову и окно.. Что всё-таки происходит, когда загрузилась новая страница и в пропсы FlatList-а передался новый массив из 20 элементов вместо старого массива из 10?
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Kamo Spertsyan
Кажется, вы знаете то, что мне интересно, но я ещё не уловил соль.

Что вы называете идентити? В данном примере - это область памяти, в которой хранится массив?

И я не очень уловил про голову и окно.. Что всё-таки происходит, когда загрузилась новая страница и в пропсы FlatList-а передался новый массив из 20 элементов вместо старого массива из 10?
Идентити объекта в JS, это собственно и есть инстанс объекта... т.е. условно говоря доступ к объектам происходит по ссылке, любая пременная, через которую можно получить данные из объекта - это ссылка на объект. То, на что она указывает - это идентити... "значение в ссылке", "адрес в памяти"... в кавычках, потому что v8, к примеру, умеет двигать объекты в памяти (особенность работы GC). JS в этом смысле не замкнут в этих операциях - невозможно получить значение идентити, но можно про него узнать, операциями ===, !== и Object.is
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Про голову, из оф доков (https://facebook.github.io/react-native/docs/flatlist#initialnumtorender):

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
источник

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Идентити объекта в JS, это собственно и есть инстанс объекта... т.е. условно говоря доступ к объектам происходит по ссылке, любая пременная, через которую можно получить данные из объекта - это ссылка на объект. То, на что она указывает - это идентити... "значение в ссылке", "адрес в памяти"... в кавычках, потому что v8, к примеру, умеет двигать объекты в памяти (особенность работы GC). JS в этом смысле не замкнут в этих операциях - невозможно получить значение идентити, но можно про него узнать, операциями ===, !== и Object.is
понял, спасибо! Поизучаю документацию поглубже
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Kamo Spertsyan
понял, спасибо! Поизучаю документацию поглубже
Советую с VirtualizedList читать, потому что FlatList просто враппер вокруг него и на самом деле наследует все его св-ва, а там как раз управление окном и прочие подробности:
https://facebook.github.io/react-native/docs/virtualizedlist#windowsize
Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.


В частности, как видно, дефолтное "окно", это 10 экранов выше/ниже, что довольно много
источник

ДА

Данила Андреев in React Native — русскоговорящее сообщество
Bogdan Shelomanov
всем привет, подскажите, так ли стиль типизировать
style: StyleProp<ViewStyle>


и для текста TextStyle
True
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Именно поэтому многие ругаются на тормознутость флет-листа... не разобравшись, что он будучи использован вместо простого рендера списка в ScrollView, на самом деле всё равно монтирует и рендерит все данные для нормальных юзкейсов... а польза от него (без тюнинга) начинается на реально больших списках.
Это на самом деле компонент, который лучше всего расчитан на стандартный кейс фейсбука - крупные карточки в ленте и бесконечный скролл... пользователь в основном листает только в низ, назад возвращается только при рефреше и в самый верх
источник

AE

Artur Eshenbrener in React Native — русскоговорящее сообщество
Sergey
return(
<TextInput style={SharedStyles.loginTextInput}

       placeholder='Email'
       onSubmitEditing={() => { this.passInput.focus(); }}
       blurOnSubmit={false}  

       ></TextInput>

       <TextInput style={SharedStyles.loginTextInput}

       placeholder='Password'
       ref={(input) => { this.passInput = input; }}

       ></TextInput>
);

TypeError: undefined is not an object (evaluating '_this.passInput = input')
У тебя компонент-класс или функция?
источник

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Советую с VirtualizedList читать, потому что FlatList просто враппер вокруг него и на самом деле наследует все его св-ва, а там как раз управление окном и прочие подробности:
https://facebook.github.io/react-native/docs/virtualizedlist#windowsize
Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.


В частности, как видно, дефолтное "окно", это 10 экранов выше/ниже, что довольно много
Это немного не то, вроде как. Окно - это про рендер текущих элементов, а мой вопрос не про то, что рендерятся сразу все 20 элементов, а про то, почему перед этим рендерятся старые 10 элементов
источник

GB

Gena Black in React Native — русскоговорящее сообщество
Kamo Spertsyan
Это немного не то, вроде как. Окно - это про рендер текущих элементов, а мой вопрос не про то, что рендерятся сразу все 20 элементов, а про то, почему перед этим рендерятся старые 10 элементов
Да они все рендерятся, что примонтированы... а примонтированы те, что в initial batch ("голова") входят и те, что в "окно"... Там был баг/деоптимизация не знаю исправили ли, что то, что в "голову" и в "окно" одновременно входят, два раза ререндерились... но сути это не меняет. Это pure component, он при любом изменении свойств ререндерится целиком
источник

KS

Kamo Spertsyan in React Native — русскоговорящее сообщество
Gena Black
Да они все рендерятся, что примонтированы... а примонтированы те, что в initial batch ("голова") входят и те, что в "окно"... Там был баг/деоптимизация не знаю исправили ли, что то, что в "голову" и в "окно" одновременно входят, два раза ререндерились... но сути это не меняет. Это pure component, он при любом изменении свойств ререндерится целиком
Вот баг про голову и окно похож на объяснение
источник

S

Sergey in React Native — русскоговорящее сообщество
Artur Eshenbrener
У тебя компонент-класс или функция?
А я чуть ниже написал, вроде функция получается
источник

S

Sergey in React Native — русскоговорящее сообщество
источник

AE

Artur Eshenbrener in React Native — русскоговорящее сообщество
У тебя проблема при попытке обратиться к this, судя по всему. Используй либо класс, либо useRef (или как там в хуках)
источник

S

Sergey in React Native — русскоговорящее сообщество
Artur Eshenbrener
У тебя проблема при попытке обратиться к this, судя по всему. Используй либо класс, либо useRef (или как там в хуках)
Да, решил через useRef (или createRef, не помню уже)
источник