feat(calendarcard): 对函数做了优化处理 (#3284)

Author: xiaoyatong

src/packages/calendarcard/calendarcard.taro.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro'
@@ -50,7 +50,7 @@ export const CalendarCard = React.forwardRef<
     onPageChange,
     onChange,
   } = { ...defaultProps, ...props }
-
+  const onPageChangeRef = useRef(onPageChange)
   // 当前月份信息
   const [month, setMonth] = useState<CalendarCardMonth>(() => {
     let date = new Date(Date.now())
@@ -133,11 +133,15 @@ export const CalendarCard = React.forwardRef<
     [firstDayOfWeek]
   )
 
+  useEffect(() => {
+    onPageChangeRef.current = onPageChange
+  }, [onPageChange])
+
   useEffect(() => {
     const newDays = getDays(month)
     setDays(newDays)
-    onPageChange?.(month)
-  }, [month, getDays, onPageChange, firstDayOfWeek])
+    onPageChangeRef.current?.(month)
+  }, [month, getDays, firstDayOfWeek])
 
   const isSameDay = (day1: CalendarCardDay, day2: CalendarCardDay) => {
     return (

src/packages/calendarcard/calendarcard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon'
 import { ComponentDefaults } from '@/utils/typings'
@@ -50,6 +50,8 @@ export const CalendarCard = React.forwardRef<
     onChange,
   } = { ...defaultProps, ...props }
 
+  const onPageChangeRef = useRef(onPageChange)
+
   // 当前月份信息
   const [month, setMonth] = useState<CalendarCardMonth>(() => {
     let date = new Date(Date.now())
@@ -132,11 +134,15 @@ export const CalendarCard = React.forwardRef<
     [firstDayOfWeek]
   )
 
+  useEffect(() => {
+    onPageChangeRef.current = onPageChange
+  }, [onPageChange])
+
   useEffect(() => {
     const newDays = getDays(month)
     setDays(newDays)
-    onPageChange?.(month)
-  }, [month, getDays, onPageChange, firstDayOfWeek])
+    onPageChangeRef.current?.(month)
+  }, [month, getDays, firstDayOfWeek])
 
   const isSameDay = (day1: CalendarCardDay, day2: CalendarCardDay) => {
     return (