Как предотвратить повторный рендеринг заголовка или нижнего колонтитула плоского списка в реактивном

Question

Я поместил поле ввода в нижний колонтитул плоского списка, но когда я пытаюсь что-либо набрать, он автоматически закрывает клавиатуру из-за повторного рендеринга нижнего колонтитула плоского списка.

Я пытался вложить плоский лист из Scrollview, но это приносит предупреждение ..

Как я могу остановить повторную визуализацию нижнего колонтитула? Могу ли я это исправить, не вкладывая плоский список из Scrollview?

<FlatList
              ListHeaderComponent={() => (
                <View style={styles.discountContainer}>
                  <Text style={[styles.buttonText, { letterSpacing: 3 }]}>
                    10% DISCOUNT ON 8 COURSES
                  </Text>
                </View>
              )}
              numColumns={2}
              data={data}
              renderItem={({ item }) => (
                <View>
                  <SingleProduct item={item} />
                </View>
              )}
              ListFooterComponent={() => (
                <View>
                  <View style={styles.couponContainer}>
                    <Input
                      placeholder='Coupon code'
                      placeholderTextColor='#0a5796'
                      color='#0a5796'
                      inputStyle={{
                        color: '#0a5796',
                      }}
                      inputContainerStyle={{
                        borderBottomWidth: 0,
                        height: 50,
                      }}
                      containerStyle={styles.couponInputContainer}
                      onChangeText={(value) =>
                        this.setState({ couponCode: value })
                      }
                      value={this.state.couponCode}
                    />
                    {couponLoading ? (
                      <View style={styles.couponButton}>
                        <ActivityIndicator />
                      </View>
                    ) : (
                      <TouchableOpacity
                        style={styles.couponButton}
                        onPress={() => this.codeCheck(couponCode, line_items)}
                      >
                        <Text style={styles.buttonText}>Apply Coupon</Text>
                      </TouchableOpacity>
                    )}
                  </View>
                </View>
              )}
            />

Answer 1

Функции-стрелки «всегда» выполняются и создают новую ссылку в памяти. Таким образом, они всегда будут повторно выполнять рендеринг, если компонент будет выполнен.

По соображениям производительности вам лучше определить свою функцию снаружи и назвать ее так:

function renderMyItem(){  ...bimbom... yous stuff goes here! }
function renderHeader(){  ...bimbom... yous stuff goes here! }

<Flatlist
  renderItem={this.renderMyItem()}
  ListHeaderComponent={this.renderHeader()}
  ...
/>

Что здесь происходит? Обе функции renderMyItem и renderHeader будут выполнены один раз, если ваш Компонент загружен и будет сохранен в памяти. Поэтому каждый раз, когда вы вызываете одну из функций, вы вызываете ссылку на место в памяти, где они сохраняются.

В другом случае функции-стрелки ()=>{...} выполняются в текущем контексте и генерируют новую ссылку в памяти, каждый раз, когда они вызывали, потому что ... сказать ясно: вы определяете & , вызываете функцию таким образом.