Blog

深浅模式

Daily Plan ​

更新: 5/3/2025 字数: 0 字 时长: 0 分钟

#todo

Daily Study ​

更新: 5/3/2025 字数: 0 字 时长: 0 分钟

reporting.jsx ​

我首先在App.jsx中找到了路由的分配，然后我现在需要修改dashboard中的内容，dashboard路由对应的页面是user-dashboard.jsx，然后我查看了相应的页面，下面是关于UserDashboard的分析

UserDashboard.jsx ​

初始化和状态管理 ​

  • 构造函数constructor初始化组件的状态。它设置了仪表板数据的开始时间、采样率、描述和行数，这些值基于预定义的ranges数组。
  • ranges数组定义了不同的时间范围选项，每个选项包括描述、秒数、采样率和行数。
  • shouldComponentUpdate生命周期方法用于优化性能，防止不必要的更新，只有当version状态变化时才会更新组件。

事件处理 ​

  • setRange方法根据用户选择的时间范围更新状态，从而改变显示的数据范围。
  • 在render方法中的Button组件上绑定的点击事件会触发状态更新，例如刷新仪表板数据或跳转到编辑页面。

渲染和布局 ​

  • render方法返回组件的JSX结构，包括一个Navbar和一个VeloReportViewer组件。
  • Navbar包含两组按钮，一组用于刷新和编辑仪表板，另一组用于选择数据显示的时间范围。
  • Dropdown组件通过映射ranges数组来提供不同的时间范围选项。
  • VeloReportViewer组件用于显示仪表板的主要内容，其属性根据状态动态传递，包括所选的时间范围和采样率等。

与路由的交互 ​

  • withRouter高阶组件使得UserDashboard可以访问到路由器的history对象，使其能够在事件处理函数中进行路由跳转，例如在编辑按钮的点击事件中跳转到特定的路由。

clock.jsx ​

我在App.jsx [[2024-03-13#1. renderApp() 方法分析]]方法中找到了关于底部时钟的应用，使用了一个VeloLiveClock方法，我修改该方法中的render()渲染函数。

在 APP.jsx 中，<VeloLiveClock /> 组件被用于在页面底部导航栏（<Navbar />）的右侧显示实时时钟。该组件的实现在 clock.jsx 文件中。下面是对 clock.jsx 中 VeloLiveClock 组件的详细分析：

VeloLiveClock 组件 ​

<VeloLiveClock /> 组件在页面底部导航栏显示实时时钟。它通过定时器每秒更新当前时间，并将这个时间传递给 <VeloTimestamp /> 组件进行显示。当组件卸载时，定时器被清除以避免潜在的内存泄漏。通过这种方式，用户可以看到页面底部导航栏中实时更新的时间。

componentDidMount() 方法 ​

  • 这个生命周期方法在组件被挂载到DOM后立即执行。
  • 它创建了一个定时器，该定时器每秒（由 POLL_TIME 定义为1000毫秒）更新组件的状态。
  • 定时器通过调用 setInterval() 实现，每秒钟调用一次回调函数，该函数通过 this.setState({date: new Date()}) 更新组件的状态，将 date 设置为当前日期和时间。

componentWillUnmount() 方法 ​

  • 当组件即将从DOM中卸载和销毁时，这个生命周期方法被调用。
  • 它清除了由 componentDidMount() 创建的定时器，防止内存泄漏。定时器通过 clearInterval(this.interval) 清除。

state 对象 ​

  • 组件的初始状态被设置为当前的日期和时间，{ date: new Date() }。

render() 方法 ​

  • render() 方法返回 JSX，用于渲染组件。
  • 它包含一个 <VeloTimestamp /> 组件，该组件接受一个 iso 属性和 className 属性。
  • iso 属性被设置为组件状态中的 date，即当前时间。
  • className 属性设置为 "float-right"，以便在视觉上将时钟浮动到右侧。

通过这个较为简单的方法，我学习了一下关于DOM的概念和React中的一个简单的生命周期。

DOM ​

DOM (Document Object Model) 是一个跨平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。简而言之，DOM 是网页的编程接口。

在Web浏览器中，DOM 将 HTML 或 XML 页面转换成一个对象模型，这个模型是以树的形式组织的，可以通过各种编程语言访问（最常见的是JavaScript）。这个树形结构中的每个节点对应页面上的一个部分，例如标签、文本、属性等。

下面是一些关于DOM的关键点：

  1. 树状结构：DOM 表示文档结构的树状形式，使得开发者可以轻松访问和操作任何文档部分。例如，根节点是 <html>，它的子节点是 <head> 和 <body>，这些节点又可以有自己的子节点，比如 <title>、<h1>、<p> 等。

  2. 节点：在DOM中，一切都是节点。节点的类型包括元素节点（对应HTML标签）、文本节点（标签内的文本）、属性节点（元素的属性）等。通过节点，开发者可以修改元素的文本内容、属性值、结构等。

  3. 操作DOM：开发者可以使用JavaScript来操作DOM，包括增加、删除、修改页面上的元素。例如，可以动态地创建一个新的 <p> 元素，将其添加到文档中，或者更改现有元素的样式。

  4. 事件处理：DOM 允许开发者为页面元素添加事件监听器，这些监听器可以在特定事件发生时执行代码。例如，可以为按钮点击、鼠标悬停、键盘输入等事件绑定事件处理函数。

  5. 实时性：当DOM被修改时，页面会立即反映这些变化。这是因为浏览器会重新渲染DOM的修改部分，使得用户界面与DOM的状态保持一致。

生命周期方法序列 ​

在React中，"挂载到DOM"（Mounting to the DOM）是指将React组件插入到DOM树中的过程。这是组件生命周期的一部分，涉及到组件的创建和渲染。当组件挂载到DOM时，它会经历一个特定的生命周期方法序列，允许开发者在不同的阶段执行代码。这些生命周期方法包括：

  1. constructor(): 这是React组件的构造函数，用于初始化状态或绑定事件处理器等。

  2. static getDerivedStateFromProps(): 这是一个静态方法，在组件实例化后和接收新的props之前被调用，用于根据props的变化来更新state。

  3. render(): 这是React组件中最重要的方法，它返回需要渲染的React元素。当组件的state或props发生变化时，render 方法会被调用。

  4. componentDidMount(): 这个方法在组件被挂载到DOM后立即调用。这是执行如网络请求、DOM操作或设置定时器等副作用操作的好地方。

相应地，当组件需要从DOM中移除时，也会经历一个销毁（Unmounting）过程，这个过程中只涉及一个生命周期方法：

  1. componentWillUnmount(): 在组件被卸载和销毁之前立即调用。在这个方法中执行必要的清理操作，如取消网络请求、清除组件中设置的定时器、取消事件监听等，以避免内存泄漏。

理解这些生命周期方法对于编写高效且可靠的React组件至关重要。它们让你能够精确控制组件在不同阶段的行为，比如初始化、重新渲染和销毁等。

records开发 ​

records-application ​

对于该页面的需求就是一个表格记录应用使用详情，开发步骤如下

1. 新建jsx文件 ​

新建一个records-application.jsx放在records文件夹下，简略代码如下：

JavaScript
// src/components/records/record-application.jsx

  

import React, { Component } from 'react';

import ApplicationNotebook from './records-notebook.jsx';

import PropTypes from 'prop-types';

  

class RecordsApplication extends Component {

    static propTypes = {

        // 可以根据需要添加适当的 propTypes

        recordId: PropTypes.string.isRequired,

    };

  

    render() {

        const { recordId } = this.props;

  

        return (

            <div className="records-application">

                <ApplicationNotebook recordId={recordId} />

            </div>

        );

    }

}

  

export default RecordsApplication;

主要由两部分构成：

  • 第一部分获取适当的propTypes，也就是属性和对象。
  • 第二部分使用render()渲染一个Notebook表格，这里引入一个ApplicationNotebook组件

2. 编写表格组件 ​

接下来就是编写ApplicationNotebook组件，新建一个records-notebook，其中的构成同样包括属性、状态和对象的获取，生命周期函数的编写，主要是fetchNotebooks方法的编写，需要根据实际的后端 API 调整 fetchNotebooks 方法中的数据获取逻辑，并根据需要调整表格的列和展示的数据。这样，/records/application 路由就能展示应用记录的数据表格了。最后，使用render()进行渲染。

3.在App.jsx中添加相应路由 ​

目前简写版：<Route path="/records/application" component={RecordsApplication} />

Daily Problem ​

更新: 5/3/2025 字数: 0 字 时长: 0 分钟

菜就多练

Copyright © 2025-2025

本站访客数 人次 本站总访问量 次