react性能优化案例

useMemo实现日期选择组件封装

// 月/季/年
  const defaultDate = useMemo(() => {
    if (defaultDateType === 'M' || defaultDateType === 'Q' || defaultDateType === 'Y') {
      return defaultTime
    }
    return null
  }, [defaultDateType, defaultTime])

这段代码使用了 React 的 useMemo 钩子，根据传入的参数 defaultDateType 和 defaultTime 计算得到一个月/季/年时间类型的默认日期。

useMemo 钩子用于优化 React 组件的性能，在需要进行复杂计算或大量数据处理时，可以减少组件的渲染次数。它接受两个参数，第一个参数是一个函数，用于计算需要缓存的值，第二个参数是一个数组，用于指定当依赖项发生变化时需要重新计算缓存值。

在这里，useMemo 钩子接受一个匿名函数作为第一个参数，这个函数根据传入的 defaultDateType 和 defaultTime 参数计算得到一个月/季/年时间类型的默认日期，并将其缓存起来。如果 defaultDateType 参数不是月/季/年类型，则返回 null 值。

其中，defaultDateType 参数表示时间类型，可能的取值为 'D'、'W'、'M'、'Q'、'Y' 等，分别表示天、周、月、季、年等不同的时间类型；defaultTime 参数表示默认时间戳，用于计算默认日期。

最后，defaultDate 变量被赋值为 useMemo 钩子所返回的缓存值，它表示根据参数计算得到的月/季/年时间类型的默认日期，可以在组件中使用。

useCallback 提高函数性能

  const getExamineAtomIndex = useCallback(() => {
    const { dt, orgCode } = queryInfo

    api
      .getExamineAtomIndex({
        dt,
        orgCode,
        indexType
      })
      .then((res) => {
        if (res?.length) {
          const atomIndexDataFoo = res.map((item) => {
            const {
              indicatorCode,
              indicatorName,
              qoq,
              yoy,
              indicatorValue,
              indexValues = [],
              targetDirection = '1',
              unit = '',
              indicatorExplain
            } = item

            let colorType = 'normal'
            if (yoy) {
              if (yoy > 0) {
                colorType = targetDirection === '1' ? 'up' : 'down'
              } else {
                colorType = targetDirection === '1' ? 'down' : 'up'
              }
            }

            return {
              indicatorCode,
              indicatorName,
              qoq: formatNumToStr(qoq, 1, '%'),
              yoy: formatNumToStr(yoy, 1, '%'),
              indicatorValue: formatNumToStr(indicatorValue, 1, unit),
              dt: item.dt,
              chartData: {
                x: item.dt,
                line: indexValues
              },
              colorType,
              indicatorExplain
            }
          })
          setAtomIndexData(atomIndexDataFoo)
        } else {
          setAtomIndexData([])
        }
      })
  }, [indexType, queryInfo])

这段代码使用了 React 的 useCallback 钩子来定义一个回调函数 getExamineAtomIndex。它将会对传入的参数进行计算，并且在依赖项发生变化时重新计算。

在这里，getExamineAtomIndex 函数首先从 queryInfo 中获取 dt 和 orgCode，然后调用一个名为 api.getExamineAtomIndex 的接口方法，传入 dt、orgCode 和 indexType 作为参数。该接口方法会返回一个 Promise 对象。

当 Promise 对象成功返回时，通过判断返回的结果数组 res 是否有长度来确定是否有数据。如果 res 数组有长度，则将其遍历并进行处理，生成一个新的数组 atomIndexDataFoo。在处理过程中，根据每个元素的属性值进行一些逻辑操作和格式化处理，并将处理后的数据存储在 atomIndexDataFoo 数组中。

最后，使用 setAtomIndexData 方法将 atomIndexDataFoo 数组存储到状态中。如果 res 数组没有长度，则将状态中的 atomIndexData 设置为空数组 []。

该回调函数的依赖项是 indexType 和 queryInfo，当这两个依赖项发生变化时，getExamineAtomIndex 函数会被重新计算。这可以避免在依赖项不变时重复创建新的回调函数，提高性能。