在 React 中使用基於循環的參數有效地定義 useCallback 函數

Question

問題在反應中，我確實經常需要使用諸如useCallback之類的內容來記憶項目列表中的函數（通過循環創建），以避免由於引用標識符不匹配而導致單個元素更改而重新渲染所有組件…不幸的是，這是令人驚訝的是很難到期。例如，考慮以下程式碼：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
        // 
      }
    
  );
}

問題

一個（糟糕的）解決方案

為什麼我想要更好的方法