利用引用与时间戳解决一次性能问题

由于是项目管理系统，用户在很多地方都需要根据redux中拿到的工作项属性进行一些逻辑处理，所以需要经常通过uuid查询相应的field对象。再一次批量选择的场景中，发现页面非常卡。

问题代码

const maxMemoizeLength = 3;
export const fieldGetterSelector = memoize(state => memoize((fieldUUID) => {
  const field = Object.assign({}, get(state.entities, [DataKeys.FIELD_ENTITY, fieldUUID]));
  if (field.options) {
    field.options = field.options.map((optionUUID) => {
      return get(state.entities, [DataKeys.FIELD_OPTION_ENTITY, optionUUID]);
    });
  }
  if (field.projects) {
    field.projects = field.projects.map((projectUUID) => {
      return get(state.entities, [DataKeys.PROJECT_NAME_ENTITY, projectUUID]);
    });
  }
  if (field && FieldTypeEnum.isValidType(field.type)) {
    return field;
  }
  return null;
}, {
  max: maxMemoizeLength,
  normalizer: (args) => {
    // args is arguments object as accessible in memoized function
    const fieldUUID = args[0];
    const field = get(state.entities, [DataKeys.FIELD_ENTITY, fieldUUID]);
    return JSON.stringify(field);
  },
}), {
  max: maxMemoizeLength,
  normalizer: (args) => {
    // args is arguments object as accessible in memoized function
    const checkState = args[0];
    return JSON.stringify(get(checkState.entities, [DataKeys.FIELD_ENTITY]));
  },
});

问题就出现JSON.stringify。

解决办法

由于之前对fieldGetterSelector使用memoize缓存，需要使用normalizer和JSON.stringify进行参数的对比， 但是其中的两个对象都是一个非常庞大的对象，导致性能更差了，于是采取以下这个函数进行时间戳记录和引用比较， 来记录两个对象是否有改变

const maxMemoizeLength = 3;
let prevState = null;
let memoryStamp = null;
const getMemoryStamp = (checkState) => {
  if (prevState == null) {
    prevState = checkState;
    memoryStamp = new Date().getTime();
    return memoryStamp;
  }
  
  const fieldEntity = get(checkState.entities, [DataKeys.FIELD_ENTITY]);
  const prefFieldEntity = get(prevState.entities, [DataKeys.FIELD_ENTITY]);
  if (fieldEntity !== prefFieldEntity) {
    prevState = checkState;
    memoryStamp = new Date().getTime();
    return memoryStamp;
  }
  
  const fieldOptionEntity = get(checkState.entities, [DataKeys.FIELD_OPTION_ENTITY]);
  const prefFieldOptionEntity = get(prevState.entities, [DataKeys.FIELD_OPTION_ENTITY]);
  if (fieldOptionEntity !== prefFieldOptionEntity) {
    prevState = checkState;
    memoryStamp = new Date().getTime();
    return memoryStamp;
  }
  return memoryStamp;
};
export const fieldGetterSelector = memoize(state => memoize((fieldUUID) => {
  const field = Object.assign({}, get(state.entities, [DataKeys.FIELD_ENTITY, fieldUUID]));
  if (field.options) {
    field.options = field.options.map((optionUUID) => {
      return get(state.entities, [DataKeys.FIELD_OPTION_ENTITY, optionUUID]);
    });
  }
  if (field.projects) {
    field.projects = field.projects.map((projectUUID) => {
      return get(state.entities, [DataKeys.PROJECT_NAME_ENTITY, projectUUID]);
    });
  }
  if (field && FieldTypeEnum.isValidType(field.type)) {
    return field;
  }
  return null;
}, {
  max: maxMemoizeLength,
  normalizer: (args) => {
    // args is arguments object as accessible in memoized function
    const fieldUUID = args[0];
    const field = get(state.entities, [DataKeys.FIELD_ENTITY, fieldUUID]);
    return JSON.stringify(field);
  },
}), {
  max: maxMemoizeLength,
  normalizer: (args) => {
    // args is arguments object as accessible in memoized function
    const checkState = args[0];
    return getMemoryStamp(checkState);
  },
});