文章/答案/技术大牛

发布

问正确实现useMemo
EN

Stack Overflow用户

提问于 2020-06-25 12:28:33

回答 2查看 199关注 0票数 0

我正在努力理解useMemo的用法。由于对象没有改变，我想我可以通过添加useMemo来提高性能。然而，只要我在这里添加它，我就被要求添加findFloorPosition。一旦我这样做，我的linter要求我将useCallback添加到findFloorPosition函数中。你能给我一些建议吗?在这里实现useMemo的正确方法是什么？

const location = useLocation();
const searchParams = parseQs(location.search);
const goto = searchParams?.goto;

const findFloorPosition = (elementId) => {
  for (const floor of blueprint) {
    for (const room of floor.rooms) {
      const foundElement = room.elements.find(
        (element) => element.id === elementId
      );
      if (foundElement) {
        return floor.position;
      }
    }
  }
};

const currentFloorPosition = useMemo(() => findFloorPosition(goto), [goto]);

这里可能与此无关，但在这里，blueprint对象的外观如下：

const blueprint = [
  {
    id: "4mD59WO",
    name: "AUDITORIUM",
    position: 1,
    rooms: [
      {
        id: "zR8Qgpj",
        name: "Audimax",
        subtitle: null,
        details: null,
        position: 0,
        elements: [
          {
            id: "1jLv04W",
            position: 0,
            type: "daily",
            element: "listing_large",
            properties: {
              meetingId: null,
              capacity: 6
            }
          },
          {
            id: "1jLv12W",
            position: 1,
            type: "daily",
            element: "listing_large",
            properties: {
              meetingId: null,
              capacity: 6
            }
          }
        ]
      }
    ]
  },
  {
    id: "3mDd9WO",
    name: "FOYER",
    position: 0,
    rooms: [
      {
        id: "4R8Qgpj",
        name: "Speakers Table",
        subtitle: null,
        details: null,
        position: 0,
        elements: [
          {
            id: "2jLv04W",
            position: 0,
            type: "daily",
            element: "listing_large",
            properties: {
              meetingId: null,
              capacity: 6
            }
          },
          {
            id: "2jLv12W",
            position: 1,
            type: "daily",
            element: "listing_large",
            properties: {
              meetingId: null,
              capacity: 6
            }
          }
        ]
      }
    ]
  }
];

javascript

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-25 12:39:27

请注意，只有在依赖数组值(goto的值)不经常更改的情况下，才应该回溯值。

之所以出现此警告，是因为linter (eslint)只计算语义，它不知道findFloorPosition只是一个辅助函数。

因此，基本上您需要内联助手函数，例如：

const currentFloorPosition = useMemo(() => {
  for (const floor of blueprint) {
    for (const room of floor.rooms) {
      const foundElement = room.elements.find(
        (element) => element.id === goto
      );
      if (foundElement) {
        return floor.position;
      }
    }
  }
  return null;
}, [goto]);

// Or
const currentFloorPosition = useMemo(() => {
  const findFloorPosition = (elementId) => {
  for (const floor of blueprint) {
    for (const room of floor.rooms) {
      const foundElement = room.elements.find(
        (element) => element.id === elementId
      );
      if (foundElement) {
        return floor.position;
      }
    }
  }
};
  return findFloorPosition(goto);
}, [goto]);

票数 0

Stack Overflow用户

发布于 2020-06-25 12:40:38

由于功能性组件严重依赖闭包，所以在记忆函数时，使用闭包中的正确和更新的值是非常重要的。

eslint警告您将findFloorPosition添加到依赖项的原因是为了确保findFloorPosition中的任何内容都不引用旧值。

上面的代码可以实现如下

const findFloorPosition = useCallback((elementId) => {
  for (const floor of blueprint) {
    for (const room of floor.rooms) {
      const foundElement = room.elements.find(
        (element) => element.id === elementId
      );
      if (foundElement) {
        return floor.position;
      }
    }
  }
}, [blueprint]);

const currentFloorPosition = useMemo(() => findFloorPosition(goto), [goto, findFloorPosition]);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62575361

复制

相似问题

问正确实现useMemo
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确实现useMemoEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确实现useMemo
EN