React房间预订系统中查找数据的最优设计模式咨询

我正在用React开发房间预订系统，包含房间、用户等模块的CRUD操作。当前方案是系统启动时一次性拉取大量数据，在预订页面遍历展示预订数据时，通过user_id在用户数组里查用户信息，通过bookingtype_id在预订类型数组里查对应数据。虽然运行速度还行，但代码显得杂乱，比如渲染时频繁调用find方法，想知道更优秀的数据查找设计模式。

原示例代码：

<OverlayTrigger
          key={`tooltiptrigger-booking--${booking.id}`}
          placement='top'
          overlay={
            <Tooltip id={`tooltip-${booking.id}`}>
                {getFullname(booking.user_id)} <br/>
                from {toDateString(booking.startdate)} until {booking.enddate ? toDateString(booking.enddate) : 'indefinite'} <br/>
                status : {bookingtypes?.find(b => b.id === booking.bookingtype_id)?.name} <br/>
            </Tooltip>
          }>
            <div className={`booked ${getWidthClass()} ${getOffsetClass()} ${getBorderLeft(booking)} ${getBorderRight(booking)} ${getAddedClass()}`}
              ref={fieldRef}
              onClick={() => setShow(true)}
              style={{backgroundColor: bookingtypes?.find(b => b.id === booking.bookingtype_id)?.bg_color,
                        color: bookingtypes?.find(b => b.id === booking.bookingtype_id)?.color}}
              key={`maindiv-${booking.id}`}>
            {getFullname(booking.user_id)}
            </div>
        </OverlayTrigger>

核心优化方向：预构建索引映射，将O(n)查找转为O(1) #

频繁在渲染逻辑里调用find会带来两个问题：一是每次渲染都要遍历数组（时间复杂度O(n)），数据量大时性能会下降；二是代码冗余杂乱，重复的查找逻辑分散在组件各处。

1. 预处理数据：将数组转为键值对映射 #

在获取到users、bookingtypes数据后，立即将其转换为以id为键的对象或者Map，这样后续查找时直接通过id取值即可。用useMemo缓存映射结果，避免每次渲染都重新生成，只有当原数组变化时才更新：

// 处理用户数据：{ userId: userObject }
const userMap = useMemo(() => {
  return users?.reduce((map, user) => {
    map[user.id] = user;
    return map;
  }, {}) || {};
}, [users]);

// 处理预订类型数据：{ bookingTypeId: bookingTypeObject }
const bookingTypeMap = useMemo(() => {
  return bookingtypes?.reduce((map, type) => {
    map[type.id] = type;
    return map;
  }, {}) || {};
}, [bookingtypes]);

2. 重构组件内的查找逻辑 #

把原来的find调用替换为直接从映射中取值，同时封装统一的工具函数：

// 重构getFullname函数
const getFullname = (userId) => {
  return userMap[userId]?.name || 'Unknown User';
};

// 在组件中直接取值
const currentBookingType = bookingTypeMap[booking.bookingtype_id];

3. 优化后的完整组件代码 #

// 先预处理映射
const userMap = useMemo(() => {
  return users?.reduce((map, user) => {
    map[user.id] = user;
    return map;
  }, {}) || {};
}, [users]);

const bookingTypeMap = useMemo(() => {
  return bookingtypes?.reduce((map, type) => {
    map[type.id] = type;
    return map;
  }, {}) || {};
}, [bookingtypes]);

const getFullname = (userId) => {
  return userMap[userId]?.name || 'Unknown User';
};

// 渲染部分
<OverlayTrigger
  key={`tooltiptrigger-booking--${booking.id}`}
  placement='top'
  overlay={
    <Tooltip id={`tooltip-${booking.id}`}>
      {getFullname(booking.user_id)} <br/>
      from {toDateString(booking.startdate)} until {booking.enddate ? toDateString(booking.enddate) : 'indefinite'} <br/>
      status : {bookingTypeMap[booking.bookingtype_id]?.name || 'Unknown Status'} <br/>
    </Tooltip>
  }>
  <div 
    className={`booked ${getWidthClass()} ${getOffsetClass()} ${getBorderLeft(booking)} ${getBorderRight(booking)} ${getAddedClass()}`}
    ref={fieldRef}
    onClick={() => setShow(true)}
    style={{
      backgroundColor: bookingTypeMap[booking.bookingtype_id]?.bg_color || '#eee',
      color: bookingTypeMap[booking.bookingtype_id]?.color || '#333'
    }}
    key={`maindiv-${booking.id}`}
  >
    {getFullname(booking.user_id)}
  </div>
</OverlayTrigger>

额外优化建议 #

• 状态管理层面封装：如果用状态管理工具，可以在数据存入store前就完成映射转换，组件直接取用处理好的映射，不用每个组件都重复处理。
• 按需加载数据：如果数据量极大，一次性拉取会影响首屏速度，可以考虑分页加载或者根据当前展示的预订范围，只拉取对应范围的关联数据。
• 封装自定义Hook：把数据映射的逻辑封装成自定义Hook，比如useUserMap、useBookingTypeMap，复用在多个需要的组件中。

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