React w/hooks：防止使用函數作為道具重新渲染組件

Question

假設我有：

const AddItemButton = React.memo(({ onClick }) => {
  // Goal is to make sure this gets printed only once
  console.error('Button Rendered!');
  return <button onClick={onClick}>Add Item</button>;
});

const App = () => {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems(items.concat(Math.random()));
  }

  return (
    <div>
      <AddItemButton onClick={addItem} />
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
};

每當我添加一個項目時， <AddItemButton />都會重新渲染，因為 addItem 是一個新實例。 我嘗試記住 addItem：

 const addItemMemoized = React.memo(() => addItem, [setItems])

但這是重用第一次渲染中的 setItems，而

 const addItemMemoized = React.memo(() => addItem, [items])

由於items引用更改，因此不會記憶。

我做不到

 const addItem = () => {
   items.push(Math.random());
   setItems(items);
 }

因為這不會改變items的引用並且沒有任何更新。

一種奇怪的方法是：

  const [, frobState] = useState();
  const addItemMemoized = useMemo(() => () => {
    items.push(Math.random());
    frobState(Symbol())
  }, [items]);

但我想知道是否有更好的方法不需要額外的狀態引用。

Answer 1

當前首選的路由是useCallback ，它與您的useMemo解決方案相同，但將來可能會進行其他優化。 傳遞一個空數組[]以確保該函數在組件的生命周期內始終具有相同的引用。

在這里，您還想使用功能狀態更新表單，以確保始終根據當前狀態添加項目。

  const addItem = useCallback(() => {
    setItems(items => [...items, Math.random()]);
  }, []);