如何防止平面列表页眉或页脚在reactnative中重新渲染

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

都将被执行一次。因此，每次调用其中一个函数时，都会调用对内存中保存它们的位置的引用。

在另一种情况下，箭头函数

()=>{...}

在当前上下文中执行，并在每次调用时在内存中生成一个新的引用，因为..说清楚：你定义和调用这样的函数.

Answer 2

如果您使用的是功能组件，则不要对 FlatList 的页眉和页脚组件使用箭头函数

() => (...)

，而只返回页眉和页脚组件，如下面的示例所示。

<FlatList
    ...
    ListHeaderComponent={(<View><Text>Header</Text></View>)}
    ListFooterComponent={(<View><Text>Footer<Text></View>)}
/>

Answer 3

我遇到了同样的问题，但接受的答案对我不起作用。这里出现问题是因为每当文本发生变化（如

onChangeText

中定义）时我们都会更新状态，这会导致重新渲染。因此我想出了另一个解决方案；

首先我创建了另一个字典对象

newState

，它与状态或道具无关。因此，在更改

newState

字典时，不会导致重新渲染。然后；

newState = {}

<TextInput onChangeText={text => this.newState.value = text} />

然后我改变了状态（根据你的问题和我的问题这是必要的）

onEndEditing

；

<TextInput onChangeText={text => this.newState.value = text} onEndEditing={this.setSearch} />

这里是

setSearch

setSearch= () => {
    this.setState({couponCode: this.newState.value})
    delete this.newState.value;
}

我在设置状态后删除该密钥，因为它下次无法正确更新。

Answer 4

另一个选择是使用 useMemo。如果想分别编写页脚和页眉组件，可以使用useMemo。我在下面分享一个例子。

<FlatList
    ...
    ListHeaderComponent={renderListHeader}
    ...
/>


  const renderListHeader = useMemo(() => {
    return <View/>;
  }, []);