ReactJS日期获取方法及指定日期处理代码的功能拆解问询

嘿，我来帮你拆解这两个和React日期处理相关的问题！

React本身只是一个UI库，所以获取日期的方法本质上和原生JavaScript或者常用的日期处理库一致，这里给你列几种实用的方式：

• 原生JavaScript Date对象
  这是最基础的方式，不需要额外依赖，适合简单的日期获取场景：

  // 函数组件中获取当前日期
  function DateComponent() {
    const currentDate = new Date();
    // 自定义格式化显示
    const formattedDate = currentDate.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
    return <div>当前日期：{formattedDate}</div>;
  }
  
  // 类组件中存储日期到状态
  class DateClassComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { currentDate: new Date() };
    }
    render() {
      return <div>当前时间：{this.state.currentDate.toLocaleString()}</div>;
    }
  }
  

  原生Date对象能处理基本的日期创建、获取年月日时分秒，但如果要做复杂的加减、时区转换、自定义格式化，写起来会比较繁琐。

• 使用日期处理库（推荐复杂场景）
  对于需要频繁操作日期的场景，比如月份切换、日期加减、国际化格式化，推荐用成熟的库：

  • Moment.js：曾经最流行的日期库，API直观，功能全面：

    import moment from 'moment';
    
    function MomentDateComponent() {
      const currentDate = moment().format('YYYY-MM-DD HH:mm:ss');
      const nextMonth = moment().add(1, 'month').format('YYYY年MM月');
      return (
        <div>
          <p>当前时间：{currentDate}</p>
          <p>下个月：{nextMonth}</p>
        </div>
      );
    }
    

  • date-fns：现代的模块化日期库，按需引入，体积更小，树摇友好：

    import { format, addMonths } from 'date-fns';
    
    function DateFnsComponent() {
      const currentDate = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
      const nextMonth = format(addMonths(new Date(), 1), 'yyyy年MM月');
      return (
        <div>
          <p>当前时间：{currentDate}</p>
          <p>下个月：{nextMonth}</p>
        </div>
      );
    }
    

首先要提一句：这段代码大概率是基于Moment.js写的（因为clone()、startOf()这些都是Moment的核心方法），但里面有个潜在的语法问题——"w" -1会得到NaN（字符串减数字会强制类型转换失败），这会导致add()方法无法正常工作，推测是笔误，正确的写法应该是.add(-1, "w")或者.add(-1, "week")（表示往前推1周）。下面我先按修正后的逻辑来拆解，再说明原代码的问题。

整体功能（修正笔误后） #

这段代码的作用是：基于组件状态中存储的month日期对象，找到该月份开始之前的最后一个周日。如果该月份的第一天本身就是周日，那结果会是当月第一天的前一周周日；如果当月第一天是周一到周六，就会找到当月第一天之前最近的那个周日。

逐行拆分理解 #

1. this.state.month.clone()
   Moment对象是**可变（mutable）**的，如果直接修改原对象会污染组件状态（React状态应该是不可变的，必须通过setState更新）。clone()方法会创建一个原日期对象的副本，后续的所有操作都在这个副本上进行，不会影响原状态中的month。

2. .startOf("month")
   把克隆后的日期对象设置为对应月份的起始时刻，比如如果原month是2024-05-15，这一步之后日期会变成2024-05-01T00:00:00（5月1日零点）。

3. .add(-1, "w")（修正后的写法）
   add()是Moment的日期加减方法，第一个参数是数量，第二个参数是单位。这里-1表示往前推，"w"是week的缩写，所以这一步会把日期从月初（5月1日）往前推7天，变成2024-04-24T00:00:00。

4. .day("Sunday")
day()方法用于设置或获取星期几。当传入字符串"Sunday"时，会把当前日期调整为最近的周日。比如上面的4月24日是周三，这一步之后会变成2024-04-21T00:00:00（4月的最后一个周日）；如果月初是周日（比如2024-06-01是周日），往前推1周是2024-05-25（周日），这一步之后还是2024-05-25。

原代码的问题 #

原代码中的add("w" -1)里，"w"是字符串，和数字1相减会得到NaN，Moment的add()方法遇到NaN会忽略这个操作，相当于没执行加减，那最终代码就变成this.state.month.clone().startOf("month").day("Sunday")，作用是找到当前月份的第一个周日（如果月初是周日就是当天，否则是当月第一个周日）。

内容的提问来源于stack exchange，提问作者jammy