javascript - 将 React PureComponent 重构为基于钩子(Hook)的功能组件

Question

我有一个工作 class based implementation of an Accordion component我是 trying to refactor使用新的 hooks api .

我的主要挑战是找到一种方法来仅重新渲染切换的 <AccordionSection />同时防止所有其他<AccordionSection/>每次父级状态重新渲染的组件<Accordion/> (跟踪其状态的打开部分)已更新。

在基于类的实现中，我设法通过制作 <AccordionSection /> 实现了这一点一个PureComponent , 通过 isOpen和 onClick通过使用 context 的高阶组件回调它API，和通过将这些回调保存在父级 <Accordion/> 上的组件状态如下:

this.state = {
      /.../
      onClick: this.onClick,
      isOpen: this.isOpen
    };

据我所知，它保留了对它们的引用，从而防止它们在每个 <Accordion /> 上被创建为新实例。更新。

但是，我似乎无法让它与基于 Hook 的实现一起使用。

一些我已经尝试过但没有成功的事情:

1. 用 memo 包裹 Accordion 部分- 在第二个回调参数上包括各种呈现条件。

2. 包装onClick和 isOpen回调 useCallback (似乎不起作用，因为它们具有在每个 <Accordion/> 渲染上更新的依赖项)

3. 正在保存 onClick和 isOpen到这样的状态:const [callbacks] = useState({onClick, isOpen})然后传递 callbacks对象作为 ContextProvider value . (似乎是错误的，并没有奏效)

以下是对我基于工作类的实现的引用:

https://codesandbox.io/s/4pyqoxoz9

我的钩子(Hook)重构尝试:

https://codesandbox.io/s/lxp8xz80z7

我将日志保存在 <AccordionSection/> 上渲染以展示我试图阻止的重新渲染。

任何输入将不胜感激。

Answer 1

所以在追了太多兔子之后我最终添加了这个小金 block ..

const cache = {};

const AccordionSection = memo(({ children, sectionSlug, onClick, isOpen }) => {
  if (cache[sectionSlug]) {
    console.log({
      children: children === cache[sectionSlug].children,
      sectionSlug: sectionSlug === cache[sectionSlug].sectionSlug,
      onClick: onClick === cache[sectionSlug].onClick,
      isOpen: isOpen === cache[sectionSlug].isOpen
    });
  }
  cache[sectionSlug] = { children, sectionSlug, onClick, isOpen };

这表明发生变化的是 onClick。这看起来很明显，因为 Accordion 组件正在呈现并创建一个新的 onClick。

用 useCallback 包装他的 onClick 创建纠正了这个问题。

const onClick = useCallback(
  sectionSlug =>
    setOpenSections({
      ...(exclusive ? {} : openSections),
      [sectionSlug]: !openSections[sectionSlug]
    }),
  []
);

虽然我似乎确实在这个过程中打破了 exclusive 因为它现在总是启用..

https://codesandbox.io/s/1o08p08m27

哦，我确实在那里移动了一些可能有助于修复的其他部分..

更新

重构为使用 useReducer 并将所有逻辑移到那里，以便我们可以提供稳定的 onClick

更新

他们说 sleep 很好，但对我来说只是想休眠..

我知道我遗漏了一些东西.. 昨晚意识到我们不需要 reducer ，只需要 setState 的函数形式，它允许我们访问最新的状态在 useCallback 备忘录函数中。在这里转换了@itaydafna 的优化 https://codesandbox.io/s/8490v55029