FlatList 的 renderItem 應該用 react useCallback 鈎子包裝嗎？

Question

const Component = React.memo(props => {
  const { url } = props;

  const keyExtractor = useCallback(item => item.id, []);

  const handleClick = useCallback(() => {
    Linking.openURL(url);
  }, [url]);

  const renderItem = useCallback(({ item }) => {
    return (
      <TouchableOpacity onPress={handleClick}>
        <Text>Test</Text>
      </TouchableOpacity>
    );
  }, [handleClick]);

  return (
    <FlatList
      data={data}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
    />
  );
});

就像上面的代碼一樣。

如果renderItem函數用useCallback鈎子包裝。 它必須檢查handleClick函數引用是否更改，因為如果url不同， handleClick函數可能會更改。 而且看起來有點奇怪。

我想知道使用useCallback包裝renderItem的性能是否有顯着差異。

為renderItem函數使用鈎子的最佳實踐是什么？ 謝謝

Answer 1

因為您已經使用 React.memo，除非 url 更改，否則組件將不會執行，如果 url 更改，useCallback 無論如何都會重新創建函數，因此您可以將它們排除在外，前提是這是唯一可以更改的 prop。

這是一些演示這一點的代碼，您可以根據需要重新渲染 App，但除非您更改 url，否則它不會重新渲染其他組件。

 const SubComponent = ({ onClick }) => { console.log('sub component render'); return <button onClick={onClick}>log url</button>; }; const PureComponent = React.memo(function PureComponent({ url, }) { console.log('pure component render', url); //even if I do React.useCallback(fn,[url]) that would mean // it creates onClick when url changes but it would already // only create onClick when url changes because memo will // memoize the component result and not execute PureComponent // unless the url changes const onClick = () => console.log('url is', url); return <SubComponent onClick={onClick} />; }); const App = () => { const [, reRenderApp] = React.useState({}); const [url, setUrl] = React.useState( new Date().toUTCString() ); console.log('rendering App'); return ( <div> <button onClick={() => reRenderApp({})}> re render app </button> <button onClick={() => setUrl(new Date().toUTCString())} > set url </button> <PureComponent url={url} /> </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>