防止组件在本机反应中重新渲染

Question

我有一个按钮组件，其功能类似于选项卡按钮。 它通过道具获取数据。通过单击一个动画启动按钮并从props中调用一个函数并在父级执行，父级中的此函数会更改carousel的数据； 但是在更改数据后，我的按钮组件以默认状态而不是上一状态再次呈现（因此，在更改数据后，视图将返回到开始位置，而是保留在选定的按钮上）

按钮组件

const [ numCol, setNumCol ] = useState(1);
const [ endValue, setEndValue ] = useState();
const [ buttonData, setButtonData ] = useState([]);

const selectAnim = useRef(new Animated.Value(10)).current;
const selectedAnim = (i) => {
        setSelected(buttonData[i].quality);
        props.handler(buttonData[i].quality);
        Animated.timing(selectAnim, {
        toValue: ((window_width / numCol) * i) + 10,
        duration: 400,
        useNativeDriver: true
        }).start();
};


return(

...
<Animated.View style={{ position: "absolute", top: 0 , height: 40, width: (window_width / numCol) - 20 , backgroundColor: '#673ab780', borderRadius: 20, transform: [{ translateX: selectAnim }] }}>
</Animated.View>

<FlatList
 data={ buttonData}
 renderItem={({ item , index }) =>
  <Pressable onPress={ () => selectedAnim(index) } style={{  marginHorizontal: 10 , flex: 1 }}>
    <Text style={{ textAlign: "center" , fontFamily: 'Vazir' , color: selected == item.quality ? '#ffffff' : props.textColor ? props.textColor : '#121212' , height: 40 , textAlignVertical: "center" }}>{item.title}</Text>
  </Pressable>
            }
 horizontal={false}
 keyExtractor={item => item.quality}
 key={numCol}
 numColumns={ numCol ? numCol : 1 }
 contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
/>
...
)

父母

...
function handler (quality) {
    setCurrentTopTen(topData[quality]);
};
...

return(
...
<Carousel
 ref={(c) => { _carousel = c }}
 data={currentTopTen}
 renderItem={_renderItem}
 sliderWidth={window_width}
 itemWidth={ type == 'videos' ? window_width * 0.7 : window_width * 0.5 }
 loop={true}
/>
...
)