Definieren Sie useCallback-Funktionen in React effizient mit schleifenbasierten Parametern

Question

Das Problem liegt in der Reaktion. Ich muss oft so etwas wie useCallback verwenden, um mir eine Funktion in einer Liste von Elementen (über eine Schleife erstellt) zu merken, um zu vermeiden, dass alle Komponenten erneut gerendert werden, wenn sich ein einzelnes Element aufgrund nicht übereinstimmender Referenzbezeichner ändert ... Leider ist das Ablaufen überraschend schwierig. Betrachten Sie beispielsweise den folgenden Code: constMyComp=memo({elements}=>{{elements.map((elt,i)=>{<>{elt.text}

P粉001206492 · Answer

首先，不建议使用index作为参数或props或key，因为当你删除第一个时，所有子组件都会重新渲染。
并且根据你的场景如果你想避免重新渲染，我有一些想法，你可以参考一下，像这样：

const WrapperEvent = (Component) => {
  return memo(function Hoc({ onClick, onChange, onOtherEvent, eventData, ...restProps }) {
    return (
       onClick?.(eventData)} onChange={() => onChange?.(eventData)} onOtherEvent={() => onOtherEvent?.(eventData)} {...restProps} />
    )
  })
}

const WrapperButton = WrapperEvent(MyButton)

const Version2 = memo(({ deleteElement, elements }) => {
  return (
    <>
      
        {elements.map((e) => (
          
            {e}{" "}
            Delete
          
        ))}
      
    
  );
});

const initialState = ["Egg", "Milk", "Potatoes", "Tomatoes"].concat(
  [...Array(0).keys()].map((e) => e.toString())
);
export default function App() {
  const [elements, setElements] = useState(initialState);
  const restart = useCallback((e) => setElements(initialState), []);
  const deleteElement = useCallback(
    (name) => setElements((elts) => elts.filter((e, i) => e !== name)),
    []
  );
  return (
    
      Trying to avoid redraw
      
      
    
  );
}

这里的测试 https://codesandbox.io /s/sharp-wind-rd48q4?file=/src/App.js

P粉916760429 · Answer

警告：我不是 React 专家（因此我的问题！），所以请在下面发表评论和/或添加 +1，如果您认为此解决方案是在 React 中进行的规范方法（或 -1不是^^)。我也很好奇为什么其他一些解决方案失败了（例如基于 proxy-memoize（实际上比没有缓存长 10 倍，并且根本不缓存）或 fast-memoize（并不总是缓存，具体取决于如何我使用它）），所以如果你知道我有兴趣知道）

由于我对这个问题没什么兴趣，所以我尝试根据各种选择（无记忆、使用外部库（快速记忆与代理记忆）、使用包装器）对一堆解决方案（14！）进行基准测试，使用外部组件等...

最好的方法似乎是创建一个新组件包含列表的整个元素，而不仅仅是最后一个按钮。这允许相当干净的代码（即使我需要为列表和项目创建两个组件，至少它在语义上是有意义的），避免外部库，并且似乎比我尝试过的所有其他方法更有效（至少以我的例子为例）：

const Version13Aux = memo(({ onClickIndexed, index, e }) => {
  const action = useCallback((e) => onClickIndexed(e, index), [
    index,
    onClickIndexed
  ]);
  return (
    
      {e}
      
    
  );
});

const Version13 = memo(({ deleteElement, elements }) => {
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);
  return (
      
        {elements.map((e, i) => (
          
        ))}
      
  );
});

我仍然不太喜欢这个解决方案，因为我需要将许多内容从父组件转发到子组件，但这似乎是我能得到的最佳解决方案......

您可以查看我的尝试列表这里，我使用了下面的代码。这是探查器的视图（从技术上讲，所有版本之间的时间差异并不大（除了使用 proxy-memoize 的版本 7，我删除了它，因为它更长，也许是 10 倍，并且正在制作图表）更难阅读），但我预计这种差异在较长的列表上会更大，其中项目绘制起来更加复杂（这里我只有一个文本和一个按钮）。请注意，所有版本并不完全相同（有些版本使用，一些，一些普通列表，一些 Ant 设计列表...），所以时间比较只有在执行相同操作的版本之间才有意义。无论如何，我主要关心查看缓存的内容和未缓存的内容，这在分析器中清晰可见（缓存了浅灰色块）：

另一个有趣的事实是，您可能希望在记忆之前进行基准测试，因为改进可能并不显着，至少对于简单的组件而言（此处大小为 5，只有一个文本和一个按钮）。

import "./styles.css";
import { Button, List, Typography } from "antd";
import { useState, useCallback, memo, useMemo } from "react";
import { memoize, memoizeWithArgs } from "proxy-memoize";
import memoizeFast from "fast-memoize";
const { Text } = Typography;

const Version1 = memo(({ deleteElement, elements }) => {
  return (
    <>
      
        Version 1: naive version that should be inneficient (normal button)
      
      
        Interestingly, since button is not a component, but a normal html
        component, nothing is redrawn.
      
      
        {elements.map((e, i) => (
          
            {e}{" "}
            
          
        ))}
      
    
  );
});

const Version2 = memo(({ deleteElement, elements }) => {
  return (
    <>
      
        Version 2: naive version that should be inneficient (Ant design button)
      
      
        Using for instance Ant Design's component instead of button shows the
        issue. Because onClick is inlined, the reference is different on every
        call which triggers a redraw.
      
      
        {elements.map((e, i) => (
          
            {e}{" "}
            
          
        ))}
      
    
  );
});

const Version3AuxButton = memo(({ onClickIndexed, index }) => {
  const action = (e) => onClickIndexed(e, index);
  return ;
});

const Version3 = memo(({ deleteElement, elements }) => {
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);
  return (
    <>
      Version 3: works but really dirty (needs a new wrapper)
      
        This works, but I don't like this solution because I need to manually
        create a new component, which makes the code more complicated, and it
        composes poorly since I need to create a new version for every
        nested-level.
      
      
        {elements.map((e, i) => (
          
            {e}
            
          
        ))}
      
    
  );
});

// We try to create a wrapper to automatically do the above code
const WrapperOnClick = memo(
  ({ onClickIndexed, index, Component, ...props }) => {
    const onClickWrapped = useCallback((e) => onClickIndexed(e, index), [
      onClickIndexed,
      index
    ]);
    return ;
  }
);

const Version4 = memo(({ deleteElement, elements }) => {
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);
  return (
    <>
      Version 4: using a wrapper, it does work
      
        Using a wrapper gives slightly less ugly code (at least I don’t need to
        redefine one wrapper per object), but still it’s not perfect (need to
        improve it to deal with nested level, different names (onChange,
        onClick, myChange…), multiple elements (what if you have both onClick
        and onChange that you want to update?), and still I don't see how to use
        it with List.item from Ant Design)
      
      
        {elements.map((e, i) => (
          
            {e}{" "}
            
              Delete
            
          
        ))}
      
    
  );
});

const Version5naive = memo(({ deleteElement, elements }) => {
  return (
    <>
      
        Version 5 naive: using no wrapper but List from Ant design. I don’t
        cache anything nor use usecallback: it does NOT work
      
      
        Sometimes, with this version I got renders every second without apparent
        reason. Not sure why I don’t have this issue here.
      
      Header}
        footer={Footer}
        bordered
        dataSource={elements}
        renderItem={(e, i) => (
          
            {e}{" "}
            
          
        )}
      />
    
  );
});

const Version5 = memo(({ deleteElement, elements }) => {
  const header = useMemo((e) => Header, []);
  const footer = useMemo((e) => Footer, []);
  const renderItem = useCallback(
    (e, i) => (
      
        {e}{" "}
        
      
    ),
    [deleteElement]
  );
  return (
    <>
      
        Version 5: like version 5 naive (using no wrapper but List from Ant
        design) with an additional useCallback: it does NOT work
      
      
      
    
  );
});

const Version6 = memo(({ deleteElement, elements }) => {
  const header = useMemo((e) => Header, []);
  const footer = useMemo((e) => Footer, []);
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);
  const renderItem = useCallback(
    (e, i) => (
      
        {e}{" "}
        
          Delete
        
      
    ),
    [actionOnClickIndexed]
  );
  return (
    <>
      Version 6: using a wrapper + List
      
        This kind of work… at least the button seems to be cached, but not
        perfect as it shares all issues of the wrappers. I’m also unsure how to,
        e.g., memoize the whole item, and not just the button.
      
      
    
  );
});

const Version7 = memo(({ deleteElement, elements }) => {
  const header = useMemo((e) => Header, []);
  const footer = useMemo((e) => Footer, []);
  const renderItem = useMemo(
    () =>
      // if we use memoizeWithArgs from proxy-memoize instead, the preprocessing is much longer
      //  and does not even work.
      memoizeWithArgs((e, i) => (
        
          {e}{" "}
          
        
      )),
    [deleteElement]
  );
  return (
    <>
      
        Version 7: using no wrapper but memoizeWithArgs from proxy-memoize: it
        does NOT work, wayyy longer than anything else.
      
      
        I don't know why, but using proxy-memoize gives a much bigger render
        time, and does not even cache the elements.
      
      
    
  );
});

const Version8 = memo(({ deleteElement, elements }) => {
  const header = useMemo((e) => Header, []);
  const footer = useMemo((e) => Footer, []);
  const renderItem = useMemo(
    () =>
      // if we use memoizeWithArgs from proxy-memoize instead, the preprocessing is much longer
      //  and does not even work.
      memoizeFast((e, i) => (
        
          {e}{" "}
          
        
      )),
    [deleteElement]
  );
  return (
    <>
      
        Version 8: using no wrapper but memoize from fast-memoize: it does work
      
      
      
    
  );
});

const Version9 = memo(({ deleteElement, elements }) => {
  const computeElement = useMemo(
    () =>
      memoizeFast((e, i) => (
        
          {e}{" "}
          
        
      )),
    [deleteElement]
  );
  return (
    <>
      
        Version 9: like version 2, but use fast-memoize on whole element: does
        NOT work
      
      I don't understand why this fails while Version 8 works.
      {elements.map(computeElement)}
    
  );
});

const Version10 = memo(({ deleteElement, elements }) => {
  const del = useMemo(() => memoizeFast((i) => (e) => deleteElement(i)), [
    deleteElement
  ]);
  return (
    <>
      
        Version 10: like version 2 (+Text), but use fast-memoize only on delete
      
      
        I don't understand why this fails while Version 8 works (but to be
        honest, I'm not even sure if it fails, since buttons sometimes just
        don't appear at all, while other renders from scratch without saying
        why): to be more precise, it does not involve caching from the library…
        or maybe this kind of cache is not shown by the tools since it is done
        by another external library? But then, why are the item grey in version
        8?
      
      
        {elements.map((e, i) => (
          
            {e} 
          
        ))}
      
    
  );
});

const Version11 = memo(({ deleteElement, elements }) => {
  const del = useMemo(() => memoizeFast((i) => (e) => deleteElement(i)), [
    deleteElement
  ]);
  const computeElement = useMemo(
    () =>
      memoizeFast((e, i) => (
        
          {e} 
        
      )),
    [del]
  );
  return (
    <>
      Version 11: like version 9 + 10, does NOT work
      Not sure why it fails, even worse than 9 and 10 separately.
      {elements.map(computeElement)}
    
  );
});

const Version12 = memo(({ deleteElement, elements }) => {
  const MemoizedList = useMemo(
    () => () => {
      return elements.map((e, i) => (
        
          {e}{" "}
          
        
      ));
    },
    [elements, deleteElement]
  );
  return (
    <>
      Version 12: memoize the whole list: not what I want
      
        Answer proposed in
        https://stackoverflow.com/questions/76446359/react-clean-way-to-define-usecallback-for-functions-taking-arguments-in-loop/76462654#76462654,
        but it fails as if a single element changes, the whole list is redrawn.
      
      
        
      
    
  );
});

const Version13Aux = memo(({ onClickIndexed, index, e }) => {
  const action = useCallback((e) => onClickIndexed(e, index), [
    index,
    onClickIndexed
  ]);
  return (
    
      {e}
      
    
  );
});

const Version13 = memo(({ deleteElement, elements }) => {
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);
  return (
    <>
      
        Version 13: simple list (not Ant): works but I don’t like the fact that
        we need to create auxiliary elements.
      
      
        This works, but I don't like this solution because I need to manually
        create a new component, which can make the code more complicated.
      
      
        {elements.map((e, i) => (
          
        ))}
      
    
  );
});

const Version14Aux = memo(({ onClickIndexed, index, e }) => {
  const action = useCallback((e) => onClickIndexed(e, index), [
    index,
    onClickIndexed
  ]);
  return (
    
      {e} 
    
  );
});

const Version14 = memo(({ deleteElement, elements }) => {
  const actionOnClickIndexed = useCallback((e, i) => deleteElement(i), [
    deleteElement
  ]);

  const header = useMemo((e) => Header, []);
  const footer = useMemo((e) => Footer, []);
  const renderItem = useCallback(
    (e, i) => (
      
    ),
    [actionOnClickIndexed]
  );
  return (
    <>
      Version 14: like version 13, but for Ant lists
      
        This works, but I don't like this solution so much because I need to
        manually create a new component, which can make the code slightly more
        complicated. But it seems the most efficient solution (better than
        memoize etc), and the code is still not too bloated while avoiding third
        party libraries… So it might be the best solution.
      
      
    
  );
});

const initialState = ["Egg", "Milk", "Potatoes", "Tomatoes"];
export default function App() {
  const [elements, setElements] = useState(initialState);
  const restart = useCallback((e) => setElements(initialState), []);
  const deleteElement = useCallback(
    (index) => setElements((elts) => elts.filter((e, i) => i !== index)),
    []
  );
  return (
    
      Trying to avoid redraw
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      {
        // Version 7 is soo long that I need to put it in the end or
        // on the profiler I can’t click on other items that
        // are too close to the scroll bar
        // 
      }
    
  );
}

Frage

Eine (schlechte) Lösung

Warum ich einen besseren Weg will