React Native中如何避免传递给子组件的useCallback被重复执行

你遇到的执行逻辑重复触发的问题，本质是useCallback的作用是缓存函数本身的引用，避免子组件因为props传入的函数引用变化导致不必要重渲染，但它不会缓存函数的执行结果。你在子组件的渲染逻辑中直接调用了tacTest函数，只要子组件自身state变化触发重渲染，这个函数调用就会重新执行，和useCallback无关。

• 方案1：子组件内用useMemo缓存函数执行结果
  如果tacTest的入参在子组件内是固定值，或者仅和少数指定状态相关，可以用useMemo仅在依赖变化时重新执行计算逻辑：

const TestScreen = ({ tacTest }) => {
  const [i, setI] = useState(0)
  // 仅当tacTest引用变化时才重新执行计算，i变化不会触发重新执行
  const renderedTac = useMemo(() => tacTest('This is my second text'), [tacTest])

  return (
    <View>
      <Text>{i}</Text>
      {renderedTac}
      <Button
        title="Press"
        onPress={() => setI(i + 1)}
      />
    </View>
  )
}

如果入参和子组件的某个状态param相关，只需要把param加入useMemo的依赖数组即可，其他状态变化不会触发重计算。

• 方案2：父组件预计算渲染内容直接传递
  如果tacTest返回的内容和子组件的状态完全无关，可以直接把计算逻辑移到父组件，预计算好渲染内容后直接传给子组件，不需要传递函数：
  父组件代码示例：

const IndexScreen = () => {
  // 仅在依赖变化时重新计算，父组件其他状态变化也不会触发重计算
  const tacContent = useMemo(() => {
    console.log('printedText')
    return <Text>This is my second text</Text>
  }, [])

  return <TestScreen tacContent={tacContent} />
}

子组件直接使用传入的内容即可：

const TestScreen = ({ tacContent }) => {
  const [i, setI] = useState(0)
  return (
    <View>
      <Text>{i}</Text>
      {tacContent}
      <Button
        title="Press"
        onPress={() => setI(i + 1)}
      />
    </View>
  )
}

内容的提问来源于stack exchange，提问作者Gaylord.P