about section

Just like RecyclerView, we sometimes need to write a list of item and the component to use is recycler collection component.

In order to make use of recycler collection component, we need to pass in a section to it. Section has 2 main roles:

1. Provide the data to power the recycler collection component
2. Tell how to reder the data.

The most important method is ‘onCreateChildren’. It defines how is each childen created.

Litho framwork has provided a lot of Sections we can directly use, like GraphQLConnectionSection. Of course, we can also build it by us own.

To perform the function of provide data, sections needs a connectionConfiguration, which is build from a GraphQL query.

To perform the function of tell how to render, section needs implement a OnRenderEdge interface and attach it to the Section by ‘renderEventHandler. This is like how we define the item_view.xml when using Recycler View.

Paginition. Section support easy set up for pagination. Just need to set ‘pageSize’ and ‘offSetBeforeTailFetch’. It also enables the PTR feature by default.

Loading and Error symbal.When using recycler collection component, besides the section component, we can also pass in a loading component and an error component to define what will render when page is loading or error occurs. Note: Section is responsible to tell recycler component when these 2 events happen, by loadingEventHandler and ErrorEventHandler.

It needs 2 props:

1. ConnectionConfiguration. This defines the GraphQL query.
2. localCacheScope. Used to identify a session for caching purpose.

The GraphQLConnectionSection can dispatch 2 events to more efficiently to update the recycler view. They are:

1. OnCheckIsSameItemEvent. Used to check type. Attach the handler to section by ‘sameItemEventHandler’.
2. OnCheckIsSameContentEvent. Used to check content. Attach the handler to section by ‘sameContentEventHandler’.

When to use this?
GraphQLConnectionSectionSpec is to directly render an edge, but when we need to preprocess the data or when different sections are needed to represent the data, then we need this one - BaseGraphQLConnectionSectionSpec.

When to use?
When you don’t have a connection but have a query string only.

好了，今天学习了Section的使用方法，这个对于创建类似Recycler View 的UI很有用。但是目前只是学习了基本概念，实践中还会遇到各种问题，继续努力！

今天晚上打了乒乓球，明天要继续保持运动的好习惯。