react-nativesectionheader

React Native sectionHeaderHasChanged: (s1, s2) => s1 !== s2,

There's nothing really in the docs about this so can anyone tell me what this means exactly:

sectionHeaderHasChanged: (s1, s2) => s1 !== s2,

or this:

sectionHeaderHasChanged: (h1, h2) => h1 !== h2,

You see it here normally:

var ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
  sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
});

While we're at it, not quite sure what the first line regarding rowHasChanged does/means either.

Solution

  • Two concepts here, the Arrow function and the sectionHeaderHasChanged and rowHasChanged attributes.

    Arrow function: This is a new feature in ecmascript 6, which allows quick creation of small anonymous functions which stay within the context of the surrounding code enter code herefor instance:

    the syntax is simple: (arguments) => {function body} e.g. the following two would assign the same function callback to onclick:

    btn.onclick = (event) => {console.log(event)} 

btn.onclick = function(event){console.log(event)}

    sectionHeaderHasChanged && rowHasChanged: Many features is react-native are not really as well documented as I would like them to be but it’s still early days, best I can tell,

    Only re-render changed rows - the rowHasChanged function provided to the data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.

    react facebook

    The datasource object allows two callbacks in that vain: 1. rowHasChanged 2. sectionHeaderHasChanged The two check to see if a previously rendered row/sectionHeader (respectively) has changed and should be rendered as the user scrolls up and down the list.

    In the case of your code snippet above, you are giving dataSource callback ARROW functions that accept two arguments each:

    1. The rendered row/sectionHeader and
    2. the current row/sectionHeader The functions return false if the row/sectionHeader has not changed and should not be re-rendered or true if it has changed and should be re-rendered.

    NOTE: ARROW functions with only one statement in the body can omit the curly braces and the return operator and they will automatically return the result of their one expression. e.g. (a, b) => a + b would be the same as (a, b) => {return a + b} and function(a, b){return a + b}