组件重新渲染生成问题

Question

我是React 和React Native 的新手。我为我的React Native 应用程序使用了无类组件。例如，我有主屏幕，主屏幕有 10 个即将发生的事件。所以我使用Flatlist 和react-redux 和redux 显示所有事件。现在问题是所有加入的事件都是real time 使用sokcte.io。我还设置了倒计时。当有人加入任何事件时，我会发出该套接字并更新实时加入。没有问题，当我使用 redux 更新特定事件数据时，反应原生重新渲染主屏幕组件，因此 CountDown 也会重新渲染，它看起来像卡住 CountDown 然后重新开始。

请问您能帮忙吗？

这是我的屏幕

const EventScreen = (props) => {

    console.log('Event Screen Rendered')

    const [isLoading,setIsLoading] = useState(true);

    const navigation = props.navigation;
    const dispatchEvents = useDispatch();

    const SOCKET_URL = 'http://192.168.43.142:8080/';


    const Events = useSelector(state => state.EventReducer.Events);

    const _connectSocket = useCallback(() => {

        var socket = io.connect(SOCKET_URL, { forceNode: true });

        socket.on('EventProcess',(d) => {
            dispatchEvents(EventAction.onEventOver(d));
            dispatchEvents(EventAction.onEventOverChangeActiveEvent(d));
        });


        // New  Joining
        socket.on('EventJoined',(Event) => {
            dispatchEvents(EventAction.onEventJoined(Event))
        })

    },[]);


    useEffect(() => {
        setIsLoading(true);
        dispatchEvents(EventAction.fetchEvents())
        .then( () => {
            setIsLoading(false);
        })
        .catch( () => {
            setIsLoading(false);
        })
        _connectSocket();
    }, []);

    return <View>

        <FlatList
            data={Events}
            renderItem={(event) => <EventCard event={event.item} navigation={navigation} />}
            keyExtractor={event => event._id}
        />

    </View>

}

Answer 1

将 extraData 属性添加到您的 FlatList 组件中，例如：

 extraData={Events}