所以我有一個React Native Flatlist。然后我有一個useState，當我點擊我的扁平串列中的某個專案時，它就會啟動。我現在面臨的問題是，如果我點擊一個專案并且useState()啟動，每一個專案都將重新渲染。這很糟糕，因為它使應用程式變得極其緩慢。
是否有任何方法可以設定我的狀態，使FlatList不被重新渲染而出現另一個視圖（因為useState()）？
我的代碼是這樣的：
我的代碼是這樣的：
import React, {useState}。from "react"，{useState}。
import {View, Flatlist, Text}。from "react-native"
export default const App =（）=> {
const [x, setX] = useState(false)
return(
<View>
<FlatList。
data = {
["-",
"--"。
"--"。
"----",
"-----",
"------",
"-------",
"--------",
"---------"]
}
renderItem={({item}) => {(
<View>
<TouchableOpacity onPress={（） => setX（true）}>
<Text style={padding: 10,}}>{item}</Text>/span>
</TouchableOpacity>/span>
</View>/span>
)}}
/>
{x == true ? < Button title="It works" onPress={（） =>； console. log("一切正常")}。/> : <View />}。
</View>>
)
}
在這個例子中，資料串列非常小。如果它變大了，你真的可以看到區別
。uj5u.com熱心網友回復：
為了確保FlatList不會在狀態變化時重新渲染，需要考慮以下事項（見下面的代碼）：
data以某種方式被存盤或備忘。
import React, {useState}. from "reaction"，{useState}。
import {View, Flatlist, Text}。from "react-native"
export default const App =（）=> {
// See 1.
const [data, setData] = useState([
"-"/span>,
"--",
"--"。
"----"。
"-----"。
"------",
"-------",
"--------",
"---------",
]);
const [x, setX] = useState(false)
//見上面的2.。
const renderItem = useCallback(({ item }) => (
<View>
<TouchableOpacity onPress={（） => setX（true）}>
<Text style={padding: 10,}}>{item}</Text>/span>
</TouchableOpacity>/span>
</View>
), []);
return(
<View>
<FlatList。
data={data}
renderItem={renderItem}。
/>
{x == true ? < Button title="It works" onPress={（）/span> => console. log("一切正常")}。/> : <View />}。
</View>>
)
}
uj5u.com熱心網友回復：
這里有一個帶有備忘錄和獨立組件的想法：
const App = (/span>) => {
const [x,setX] = useState(false)。
return (
<View>
<MyFlatList setX={setX}/>/span>
{x == true ? < Button title="It works" onPress={（） => console. log("一切正常")}。/> : <View />}。
</View>>
)
}
然后：
const MyFlatList = React. memo(({setX}) =>/span> {
return (
< FlatList
data =
["-"。
"--"。
"--"。
"----",
"-----",
"------",
"-------",
"--------",
"---------"]
}
renderItem={({item}) => {(
<View>
<TouchableOpacity onPress={（） => setX（true）}>
<Text style={padding: 10,}}>{item}</Text>/span>
</TouchableOpacity>/span>
</View>/span>
)}}
/>
);
});
crawler的回答非常好，他建議對資料和回呼進行備忘，也是如此。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326343.html
標籤：