美文网首页
在addEventListener更新React状态,渲染界面

在addEventListener更新React状态,渲染界面

作者: Poppy11 | 来源:发表于2021-09-03 15:28 被阅读0次
useEffect(() => {
    document.addEventListener('visibilitychange', log);
  }, []);

 const log = async () => {
    const currentTime = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
    if (document.visibilityState == 'hidden') {
      leaveStartTime = currentTime;
      document.title = '离开';
    }
    if (document.visibilityState == 'visible') {
      setLeaveTime(prevLeaveTime => {
        return [...prevLeaveTime, { leaveStartTime, endTime: currentTime }];
      });
     
      document.title = '回来';
    }
  };

相关文章

  • 在addEventListener更新React状态,渲染界面

  • React组件的优化

    React在进行渲染的时候会经历初次渲染和更新渲染,首次渲染是没有真实的DOM操作快的,在更新渲染的时候,通过Vi...

  • React 更新机制

    React 的更新流程 React 的渲染流程是: JSX → 虚拟 DOM → 真实 DOM React 的更新...

  • React源码03 - React 中的更新

    03 - React 中的更新 React 中创建更新的方式:初次渲染:ReactDOM.render、React...

  • react生命周期

    react组件生命周期可以从初次渲染和状态更新两个方面来进行分析。 初次渲染 first step:compone...

  • react-native知识点

    react-native知识点 PureComponent是纯组件 即无状态组件,更新state不会触发重新渲染,...

  • 学习并实现react (2)

    组件列表渲染场景 DOM复用 react 的重点在于首次渲染和更新渲染,现在考虑更新渲染如何复用DOM 让渲染更有...

  • ReactNative优化--- Pure Render

    一切界面变化都是 状态state变化 React会自动技术状态的差异部分,以最小的差异去重新渲染 在内存中“打草稿...

  • React 运行机制解析

    React 每一次渲染都有它自己的 Props and State count 会“监听”状态的变化并自动更新吗?...

  • react18 之 batching

    什么是批处理 批处理是指React将多个状态更新组合为单个新渲染,以获得更好的性能 react17 批处理示例[h...

网友评论

      本文标题:在addEventListener更新React状态,渲染界面

      本文链接:https://www.haomeiwen.com/subject/khskwltx.html