将 React PureComponent 重构为基于钩子的功能组件

Question

我有一个有效的class based implementation of an Accordion component，我是trying to refactor，可以使用新的hooks api。

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

在基于类的实现中，我设法通过将<AccordionSection /> 设为PureComponent，通过使用@987654333 的高阶组件将isOpen 和onClick 回调传递给它来实现这一点@API，和通过将这些回调保存在父 <Accordion/> 组件的状态如下：

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

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

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

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

1. 使用 memo 包装 Accordion 部分 - 包括第二个回调参数的各种渲染条件。

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

3. 将onClick 和isOpen 保存到如下状态：const [callbacks] = useState({onClick, isOpen})，然后将callbacks 对象作为ContextProvider value 传递。 （好像错了，没用）

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

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

我的钩子重构尝试：

https://codesandbox.io/s/lxp8xz80z7

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

非常感谢任何意见。

Answer 1

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

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

更新

他们说睡觉很好，但对我来说只是想睡觉..

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