javascript - 难以理解去除箭头函数的值(value) () =>

Question

当我在互联网上搜索 react-native优化/最佳实践( 尤其是对于经常贪婪的 FlatLists )，我总是建议不要使用箭头函数 <Component onPress={() => ... } .
示例 1:https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem :

Move out the renderItem function to the outside of render function, so it won't recreate itself each time render function called. (...)

示例 2: https://blog.codemagic.io/improve-react-native-app-performance/ :

Avoid Arrow Functions : Arrow functions are a common culprit for wasteful re-renders. Don’t use arrow functions as callbacks in your functions to render views (...)

示例 3: https://medium.com/wix-engineering/dealing-with-performance-issues-in-react-native-b181d0012cfa :

Arrow functions is another usual suspect for wasteful re-renders. Don’t use arrow functions as callbacks (such as click/tap) in your render functions (...)

我了解建议不要使用箭头功能(尤其是在 onPress 按钮和 FlatList 中)，并尽可能将组件放在渲染之外。
良好实践示例:

const IndexScreen = () => {    
  const onPress = () => console.log('PRESS, change state, etc...')

  return (
    <>
      <Button
        onPress={onPress}
      />
      <FlatList
        ...
        renderItem={renderItem}
        ListFooterComponent={renderFooter}
      />
    </>
  )
}

const renderItem = ({ item: data }) => <Item data={data} ... />
const renderFooter = () => <Footer ... />

export default IndexScreen

但是，通常，我还有其他属性可以集成到我的子组件中。因此箭头函数是强制性的:

const IndexScreen = () => {
  const otherData = ...(usually it comes from a useContext())...

  <FlatList
    ...
    renderItem={({ item: data }) => renderItem(data, otherData)}
  />
}

const renderItem = (data, otherData) => <Item data={data} otherData={otherData} />

export default IndexScreen

在后一种情况下，尽管存在箭头函数，但是否遵循了良好做法？
总之，如果我删除 otherData (为简单起见)，这两种情况是否严格相同，是否遵循了良好做法？
情况一:

const IndexScreen = () => {    
  return (
    <FlatList
      ...
      renderItem={renderItem}
    />
  )
}

const renderItem = ({ item: data }) => <Item data={data} ... />

export default IndexScreen

===情况2？

const IndexScreen = () => {    
  return (
    <FlatList
      ...
      renderItem={({ item: data }) => renderItem(data)}
    />
  )
}

const renderItem = (data) => <Item data={data} ... />

export default IndexScreen

Answer 1

答案与箭头函数无关，而是理解引用相等性为什么 react 可能决定重新渲染组件。
您可以使用 useCallback 来包装您的函数。这将导致对 renderItem 的引用仅在您的回调依赖项之一更新时更新。

const renderItem = useCallback(()=>{
...
},
[otherdata]);