React native-List Component

Mobile apps are often limited by the size of the screen, and the uncertainty of the length of data content requires a list component as a container for data presentation in many places.

Corresponds to the native application component, which may be iOS TableView or Android Listview,recycleview.

These components have some common features:

1. The view can be scrolled.

2. Reusable view template.

3. The view height changes with the length of the data content.

4, self-performance optimization.

When you're struggling with a list component, consider whether the scenario you're using needs to have the attributes above, especially performance optimizations.

In the case of the low height of each column view, the display content of a screen on the phone is generally not more than 7 columns, and does not say that most of the time our UI does not make such a tiring design, but we can not predict how much the API will return the group of data back. So, mastering the use of list components is a basic skill that must be mastered as a mobile development.

Below, let's look at the framework of react native, and what list components are available for use.

List Components

"The ListView"

React native is the earliest-born list component that can be conveniently used to display data with vertical scrolling properties, implementing the most basic two properties DataSource and Renderrow can make it work. It also supports more advanced properties, such as section and Sticky section headers, header,footer,onendreached, and some performance optimizations. In order to make the ListView scrolling smoother, when loading a large data dynamically (an endless list), some optimizations can be made:

Optimize only the changed columns: rowhaschanged is to determine if the ListView row needs to be redrawn by comparing whether the data has changed.

Limit the speed of line rendering: By default, only one row is rendered at a time (which can be controlled by the PageSize property), and the work is decomposed into smaller chunks to reduce the chance of dropping frames during rendering.

Basic usage:

<listview
   Datasource={this.state.datasource}
   renderrow={(RowData, SectionID, RowID) = This.cell ( RowData, RowID)}
/>

However, the ListView does not perform satisfactorily when dealing with an endless list, and it does not remove elements from the virtualdom from above, and when the length of the list is large, it tends to drop frames when scrolling, and memory consumes sharply as the list scrolls. As shown in the figure above.

Note from the user's point of view, Flatlist and Sectionlist are a single fission of the ListView. However, they are not derived from the ListView, but belong to the specific implementation of virtualizedlist, compared to the ListView, they have made great improvements in performance, First appears in version 0.43, but there are many bugs in that version, if you want to use the recommended upgrade RN to more than 0.44.

"Flatlist"

As the name implies, it is a flat list, cut off the support of section, at the same time, added a lot of mobile side commonly used to play: support horizontal sliding, drop-down refresh, Separator,scrolltoindex and so on. Compared to the ListView, the performance has also been greatly improved, in general, the recommended use of flatlist. Basic usage:

<flatlist
  data={[{key: ' A '}, {key: ' B '}]}
  renderitem={({item}) = <Text>{item.key}</Text> }
/>

"Sectionlist"

If you need to classify the list, and set the head for each category, such as address, category of products, categories of albums, etc., Sectionlist is the best choice.

Basic usage:

<sectionlist

 renderitem={({item}) = <listitem title={item.title}/>}

 rendersectionheader={({ Section}) =

"Virtualizedlist"

If you need a stronger, customized list, RN flatlist and sectionlist have not been able to meet your desired results, and you can add wrapper to your virtualizedlist to achieve your customisation.

Virtualization greatly improves the memory consumption and performance of large lists by maintaining a limited-width rendering window and replacing all of the item outside the render window with a more streamlined scrolling. Common Properties

Data: source, default to array<{key:string}> type.

RenderItem: Corresponds to the display of a data item.

Listheadercomponent: List header.

Listfootercomponent: The tail of the list.

Listemptycomponent: Displays the component when the list is empty.

Horizontal: Whether the horizontal direction is displayed.

Onendreached: The callback has been scrolled to the bottom.

Onrefresh: drop-down refreshed callback.

Refreshing: flag is being refreshed.

Initialnumtorender: If there is a "back to top" requirement, it is recommended to set this property to the number of columns that are exactly full screen. multi-column

If you want to implement the GridView effect, you can use Flatlist's own properties NumColumns and Columnwrapperstyle to implement multiple columns:

<flatlist

   horizontal={this.state.horizontal}

   Data={this.props.data}

   numcolumns={2}

   Columnwrapperstyle={styles.multicolumns}

   renderitem={({item, index}) = = This.props.renderRow (item, Index)}

 />

Drop-down refresh

Reactnative in the new list component, the drop-down refresh feature has been provided, which can be achieved by quickly setting the refreshing and Onrefresh methods:

<flatlist

   Data={this.props.data}

   renderitem={({item, index}) = This.props.renderRow (item, Index)}

   refreshing={this.state.refreshing}

   onrefresh={() = {

     this.setstate ({refreshing:true})

     This.props.getProducts (This.state.pageIndex)

       . Then ((items) = {

         this.setstate ({refreshing:false})

       })

       . catch (Error) = Alert.alert (error.message)

     }

   }

 />

optimizations for super-long lists

For the optimization of the list, the main focus in two aspects, one is memory consumption, a user response, user response can be divided into: scrolling is smooth, to click and other operations response speed is fast. Let's take a look at the new list component Virtualizedlist has brought us improvements:

Purecomponent: Reduces unnecessary rendering and does not redraw if the props property is not changed. We need to make sure that we are not = = = After updating props, otherwise the UI may not update the update.

Qualifying Render window: greatly improves memory consumption and performance of large lists by maintaining a limited rendering window for a valid project and replacing all elements outside the render window with empty (blank).

Areas outside the low-priority Render window: The window adapts to the scrolling behavior, and if the item is far away from the visible area, the item will be rendered progressively with a low priority (after any running interaction), or in order to minimize the possibility of viewing the space.

Asynchronous rendering: Content is rendered asynchronously outside the screen. This means that it is possible to scroll faster than the fill rate and see the blank content.

You can see that the new list of components in memory consumption has been improved, the smoothness of scrolling has been greatly improved, but for users to click on the response speed should be considered not to bring good, but in the scroll will appear white screen.

As can be seen from the screenshot, flatlist in the smoothness of the ascension is still very obvious, but in the case of rapid scrolling, there will be a white screen, which is very unfriendly to the user experience. Here, we can refer to the properties provided by Virtualizedlist for optimization.

WindowSize: Limits the maximum number of draws, which defaults to 21.

Maxtorenderperbatch: The maximum number of draws at one time.

Updatecellsbatchingperiod: The interval between when the drawing was updated.

Removeclippedsubviews: Remove Invisible subview, there are still bugs, can be used as appropriate.

Initialnumtorender: The number of first draws.

Getitemlayout: Can be used to help us skip the height and position of the re-operation, when each of our item height consistent, set this property can greatly improve rendering efficiency.

getitemlayout={(data, index) = (

 {length:item_height, offset: (item_height+ separator_height) * Index, index}< c1/>)}

But try a few more than a combination of properties, feeling does not solve a good white screen problem, the fix can only look forward to the updated version, you can also try to actively submit PR.

The above operation is Virtualizedlist provides method, that for the problem of the ListView, we can also imitate flatlist approach to improve: