在不渲染整个屏幕的情况下每秒更新子组件中的当前时间

Question

我正在使用 Zusstand 使用商店进行反应，在该商店中，我创建了一个计时器，该计时器使用setInterval() function 每秒更新一次时间。

我在商店中创建它，希望将时间传递给各种子组件，同时保持时间从中心位置存储和共享。

我能够更新商店中的时间并成功记录它，但是当我将它传递给子组件时，它们并没有更新时间。 如何传递更新的时间并导致每经过一秒重新渲染时间？ 我不想在子组件中使用useEffect() 。

ZUSTAND 商店

import create from "zustand";

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
import toObject from "dayjs/plugin/toObject";
dayjs.extend(toObject);
import timezone from "dayjs/plugin/timezone";
dayjs.extend(timezone);


import { IGlobalStyles} from "utils/types";
import { useEffect } from "react";

interface IStyles {
  time?: any;
}

const timer = setInterval(function () {
    
    const time = dayjs().format("hh:mm:ss A")
    console.log("Time in store", time);
    return(time)
}, 1000);


const useGlobalStyles = create<IStyles>((set) => ({
    time: timer
 
})

);

export default useGlobalStyles;

CHILD COMPONENT（这是我要显示时间的地方）

import React from "react";
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  Button,
  View,
  Dimensions,
} from "react-native";
import {
  NavigationRouteContext,
  useNavigation,
} from "@react-navigation/native";
import * as Shadows from "../../styles/shadows";

import useGlobalStyles from "stores/GlobalStyles";

interface IDateTime {}

export default function DateAndTime({}: IDateTime) {

  //Access zustand store and retreive the current updated time
  const time = useGlobalStyles((store) => store.time);

  return (
    <View style={[styles.container(window.width), styles.shadow]}>
      {/*I want this text component to update time from react Zustand Store*/}
      <Text>{time}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: (containerWidth: any) => ({
    borderWidth: 1,
    position: "absolute",
    top: 30,
    right: 25,
    backgroundColor: "#FFFFFF",
    justifyContent: "center",
    //marginBottom: "5%",
    // width: 422,
    // height: 128,
    width: containerWidth * 0.45,
    height: "8%",
    borderRadius: 10,
    padding: 20,
  }),
  text: {
    alignSelf: "flex-end",
    alignItems: "center",
    fontSize: 10,
    color: "black",
    fontWeight: "700",
    height: 20,
    textAlign: "center",

  },
  shadow: { ...Shadows.componentShadow },
});

Answer 1

我想出了如何做到这一点，这里是各自的代码：

这是对 zustand 商店的更改： State 现在每秒设置/更新一次

const useGlobalStyles = create<IStyles>((set) => ({
        width: windowWidth,
        height: windowHeight,
        scale: windowScale,
        time: ""
    })
);

const timer = setInterval(function () {
    
    const currentTime = dayjs().format("hh:mm:ss A")
    console.log("Time in store", currentTime);
    useGlobalStyles.setState({time:currentTime});
    
    
}, 1000);

下面是子组件新代码： 时间是从 store 接收的，useEffect 用于将子组件的本地 state 设置为该新时间（导致重新渲染），并且 state 显示在<Text>组件中反映新时代

const [currentTime, setCurrentTime] = useState("");

  //Access zustand store and retreive the current updated time
  const time = timer((store) => store.time);

useEffect(() => {
    setCurrentTime(time);
  }, [time]);

  return (
    <View style={[styles.container(window.width), styles.shadow]}>
      {/*I want this text component to update time from react Zustand Store*/}
      <Text>{currentTime}</Text>
    </View>
  );
}