时间戳

首页 > 解决方案 > 在不渲染的情况下每秒更新当前时间

reactjs - 在不渲染的情况下每秒更新当前时间

问题描述

我在 React Native 应用程序中的许多组件都需要知道每秒的当前时间。这样我可以显示更新的实时信息。

我创建了一个简单的功能来设置状态new Date()，但是每当我设置状态时，组件都会重新渲染，这对我来说是一种浪费。这是我所拥有的：

...

export default function App() {
  const [currentDateTime, setCurrentDateTime] = useState(() => new Date().toLocaleString());
  useEffect(() => {
    const secondsTimer = setInterval(() => {
      setCurrentDateTime(new Date().toLocaleString());
    }, 1000);
    return () => clearInterval(secondsTimer);
  }, [setCurrentDateTime]);
  console.log('RENDERING');
  <Text>{currentDateTime}</Text>
  ...

我可以看到控制台日志每秒渲染一次。

有没有办法避免这种重新渲染并且仍然更新currentDateTime

标签： reactjs

解决方案

Eliya Cohen 的回答在概念上是正确的。为了避免重新渲染，我们不能使用带间隔的状态。我们需要引用元素。不幸的是，我无法以同样的方式将 Eliya 的 React 代码采用到 React Native 中，因此我进行了更多挖掘并找到了有关直接操作 React Native 组件的文档。简而言之，您可以操作内置 RN 组件的 PROPS，并通过不更改状态来避免重新渲染。由于<Text>组件没有使用 props 设置其值，例如<Text text="my text" />，我们无法使用此方法对其进行更新。但是起作用的是更新 a 的值，TextInput因为它是用valueprop 设置的。<TextInput>为了使行为像 a我们需要做的<Text>就是设置它的 propeditable为假，当然要避免它的默认样式，这会使它看起来像一个输入。

这是我的解决方案。如果有人有更好的，请提出来。

import React, { useEffect } from 'react';
import { TextInput } from 'react-native';

const Timer: React.FC = () => {
  updateTime = (currentTime) => {
    time.setNativeProps({ text: currentTime });
  };

  useEffect(() => {
    const secondsTimer = setInterval(() => {
      updateTime(new Date().toLocaleString());
    }, 1000);
    return () => clearInterval(secondsTimer);
  }, []);

  return <TextInput ref={(component) => (time = component)} editable={false} />;
};

export default Timer;

推荐阅读