我有一个基于工作类的Accordion组件的实现,我正在尝试重构以使用新的hooks api。
我的主要挑战是找到一种仅重新渲染切换后的方法,<AccordionSection />同时防止<AccordionSection/>每次更新父级的状态<Accordion/>(跟踪其状态中的打开部分)时重新渲染所有其他组件的方法。
在基于类的实现中,我设法实现了这一点,方法是使<AccordionSection />a PureComponent,通过使用API 的高阶组件将isOpenand onClick回调传递给它context,以及将这些回调保存在父<Accordion/>组件的状态下,如下所示:
this.state = {
/.../
onClick: this.onClick,
isOpen: this.isOpen
};
Run Code Online (Sandbox Code Playgroud)
据我所知,它保留了对它们的引用,因此阻止了在每次<Accordion />更新时将它们创建为新实例。
但是,我似乎无法将其与基于钩子的实现一起使用。
我已经尝试不成功的一些事情:
用memo- 包裹“手风琴”部分,包括第二个回调参数上的各种渲染条件。
用onClick和包装回车isOpen符useCallback(似乎不起作用,因为它们具有在每个<Accordion/>渲染器上更新的依赖项)
将onClick和保存isOpen到这样的状态:const [callbacks] = useState({onClick, isOpen})然后将callbacks对象作为传递ContextProvider value。(似乎错了,没用)
这是对基于工作类的实现的引用: …