Question

所以我们有一个大约200/300个按钮的平面列表这些按钮通过了5次点击后即可显示广告的功能。因此，我们使用useState来计算点击次数。

但是..因为我们更新了函数内部的计数，所以它再次调用它自己，并重新释放所有平面列表项/按钮并导致滞后/延迟。

“滞后是什么意思？” 例如，通常您可以单击该按钮，然后单击垃圾邮件按钮，然后单击按钮，一切正常，但是如果取消注释setCount(prev => prev +1)，它就会慢慢冻结并落在后面

代码：

import React, {useCallback, useState} from 'react';
import {TouchableOpacity,FlatList, View, Text} from 'react-native';

const data = ['IMAGINE 200 items here.']

const test = () => {
    const [count, setCount] = useState(0);

    const TestFunction = useCallback(async () => {
        setCount(prev => prev + 1);

        if (count === 5) {
            /*for example show a add*/
            showAd();
        }
    }, [count]);


    return (
        <View>
            <FlatList data={data} renderItem={() => React.useMemo(<TouchableOpacity onPress={TestFunction}>
                <Text>Test</Text>
            </TouchableOpacity>)}>

            </FlatList>
        </View>
    );
};


const showAd = () => {
    /*for example show a add*/
};

Answer 1

我相信您应该将TestFunction一分为二

const addClick = useCallback(() => { setCount(prev => prev + 1) }, []) 
// this doesn't need count dependency

和

const showAdOnCountThreshold = useEffect(() => { if (count === 5) showAd() }, [count] 
// this gets called after updating the count

此外，您的React.memo不执行任何操作，因为它没有设置依赖项。但是，既然您拥有addClick永不更改，那么可触摸对象就没有理由更改（就道具更改而言）。

因此您可以这样做：

const renderClickCountButton = React.useCallback(() => (
 <TouchableOpacity onPress={addClick}>...</TouchableOpacity>
), [addClick])

然后

<FlatList renderItem={renderClickCountButton}

使用状态更新后，FlatList onPress函数重新呈现会导致延迟

1 个答案: