避免在渲染函式中定義行內函式

我看到很多文章說在 react 的 render 函式中定義行內函式會導致性能問題。
因此，他們建議在渲染函式之外定義函式并在我需要的地方使用它（onClick等）。
我構建了一個示例代碼，我有一個按鈕串列，每個按鈕都會通過串列中的索引增加狀態，但是它的拋出錯誤。
我如何傳遞引數而不使用行內函式onClick

const App = () => {
  const [number, setNumber] = useState(1);
  const increaseNumber = (num) => {
    setNumber((prevState) => prevState   num);
  };
  return (
    <div>
      {[...Array(5)].map((item, index) => (
        <button key={index} onClick={increaseNumber(index)}>
          {`increase by ${index}`}
        </button>
      ))}
      <div>{number}</div>
    </div>
  );
};
export default App;

uj5u.com熱心網友回復：

在我的回答之前，我會說在嘗試優化任何東西之前，您確實應該分析您的應用程式并確定特定的性能問題。在這種情況下，您可以通過使用資料屬性來避免在每次地圖迭代時創建新的回呼。

function App() {
    const [number, setNumber] = useState(1);

    const increaseNumber = (event) => {
        const index = parseInt(event.target.dataset.index);
        setNumber((prevState) => prevState   index);
    };

    return (
        <div>
            {[...Array(5)].map((item, index) => (
                <button key={index} onClick={increaseNumber} data-index={index}>
                    {`increase by ${index}`}
                </button>
            ))}
            <div>{number}</div>
        </div>
    );
}

export default App;

通常，您需要在每次渲染時創建新回呼的唯一時間是將回呼叫作子組件中的道具時。useCallback在這些情況下，使用類似的東西可以幫助避免不必要的子渲染。

uj5u.com熱心網友回復：

這是一個很好的問題，因為這是教程中通常會忽略的常見場景。您通常會使用useCallback，但是當您有構建器引數時，這里該怎么做？

方法一：useMemo

當引數像您的情況一樣固定時，您可以使用useMemo：

import { useMemo, useState } from "react";

const indexes = [...Array(5)].map((_item, idx) => idx);

const App = () => {
    const [number, setNumber] = useState(1);

    const increaseNumber = useMemo(() => {
        return indexes.map(index => () => setNumber(prevNumber => prevNumber   index));
    }, [indexes]);

    return (
        <div>
            {indexes.map(index => (
                <button key={index} onClick={increaseNumber[index]}>
                    increase by {index}
                </button>
            ))}

            <div>{number}</div>
        </div>
    );
};

方法二：wrapper組件 useCallback

創建您的包裝組件Button：

const IncreaseButton = ({ setNumber, index }) => {
    const increaseByIndex = useCallback(() => {
        return setNumber(prevValue => prevValue   index);
    }, [setNumber, index]);

    return <button onClick={increaseByIndex}>increase by {index}</button>;
};

uj5u.com熱心網友回復：

您可以將專案作為已記憶的函式傳遞給按鈕元素的onClick道具react。

const App = () => {
  const [number, setNumber] = useState(1);
  const increaseNumber = (num) => () => {
    setNumber((prevState) => prevState   num);
  };

  const btns = useMemo(() => {
    // here I am using lodash memoize function you may use your own
    let inc = _.memoize(increaseNumber)
    return Array(500).fill(0).map((_, index) => inc(index))
  }, [])
  return (
    <div>
      {btns.map((item, index) => (
        <button key={index} onClick={item}>
          {`increase by ${index}`}
        </button>
      ))}
      <div>{number}</div>
    </div>
  );
};

標籤：javascript 反应

上一篇：如何在React中選擇隨機組件

下一篇：我的Chrome任務管理器CPU中的ReactJS應用程式高，但Windows任務管理器低。為什么？