Question

我使用的是 React Native 0.64 版。我有一个包含一个地图视图和两个按钮的页面。使用这两个按钮我正在更新状态，但是每当我更新状态时，地图组件都会重新渲染。为了防止重新渲染，我使用了 React.memo 和 React.useCallback，但它似乎重新渲染了地图组件。

代码如下：-

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';

const PilgrimTracker = () => {
    
    const [index, setIndex] = React.useState(0)

    const lost = React.useCallback((value) => { setIndex(value) }, [index])


    const MapComponent = React.memo(()=> {
        console.log('render')
        return (
            <MapView
                provider={PROVIDER_GOOGLE}
                style={{ flex: 1 }}
                region={{
                    latitude: 22.57687,
                    longitude: 88.35047,
                    latitudeDelta: 0.015,
                    longitudeDelta: 0.0121,
                }}
            >
                <Marker coordinate={{ latitude: 22.57687, longitude: 88.35047 }} />
            </MapView>
        )
    })


    return (
        <View style={styles.container}>
            <MapComponent />
            <TouchableOpacity
                onPress={()=>lost(0)} style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'green' }}>
                <Text>Yes, I’m Lost</Text>
            </TouchableOpacity>
            <TouchableOpacity
                onPress={()=>lost(1)} style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'blue' }}>
                <Text>Other member Lost</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

export default PilgrimTracker

我应该如何停止重新渲染？

Answer 1

试试这个代码。它工作;

const Parent = () => {

  const [childAState, setChildAState] = useState();

  useEffect(() => {
    setChildAState('Child A Updated');
  }, []);
  
  return (
    <>
      <ChildA childAState={childAState}/>
      <ChildB />
    </>

  );

};

const ChildA = () => React.memo((props) => {

  return <h1>Child A</h1>  

});

const ChildB = () => React.memo((props) => {

  return <h1>Child B</h1>  

});

Unbale 以防止使用 useCallback 和 React.memo 重新渲染

1 个答案: