React Native如何调用useEffect内部定义的函数作为按钮回调

除了将函数移到useEffect外部，还有两种常用方案可以实现需求：

方案1：使用useRef存储函数引用（推荐） #

利用useRef的可变current属性存储内部函数的引用，不会触发组件重渲染，性能开销最低。

实现代码： #

import { useRef, useEffect } from 'react'

// 组件内部
const innerFuncTwoRef = useRef(null)

useEffect(() => {
  const longFunction = async () => {
    const innerFunctionOne = async () => {
      // 原有逻辑
    }
    const innerFunctionTwo = async () => {
      // 原有逻辑
      innerFunctionOne()
    }

    // 把内部函数赋值给ref
    innerFuncTwoRef.current = innerFunctionTwo

    // 原有其他代码
    innerFunctionTwo()
  }

  longFunction()
  
  return () => {
    // 清理时置空引用，避免内存泄漏
    innerFuncTwoRef.current = null
    // 原有清理逻辑
  }
}, [])

// 按钮调用处
<Button onPress={() => innerFuncTwoRef.current?.()} />

注意点： #

• 调用时加可选链?.，避免useEffect未执行完毕、函数还未赋值时点击报错
• 内部函数的闭包始终是首次渲染的变量快照，如果需要访问最新的props/state，需要调整useEffect的依赖数组，或额外用useRef存储依赖变量。

方案2：使用state存储函数引用 #

可以把函数存在组件状态中，触发重渲染后即可在组件其他位置访问。

实现注意： #

React的状态更新器如果直接传入函数，会被当作更新器执行、取返回值作为新状态，因此需要把目标函数包裹在返回函数里：

import { useState, useEffect } from 'react'

// 组件内部
const [innerFunctionTwo, setInnerFunctionTwo] = useState(null)

useEffect(() => {
  const longFunction = async () => {
    const innerFunctionOne = async () => {
      // 原有逻辑
    }
    const innerFunctionTwo = async () => {
      // 原有逻辑
      innerFunctionOne()
    }

    // 包裹一层函数返回，避免被更新器直接执行
    setInnerFunctionTwo(() => innerFunctionTwo)

    // 原有其他代码
    innerFunctionTwo()
  }

  longFunction()
  
  return () => {
    setInnerFunctionTwo(null)
    // 原有清理逻辑
  }
}, [])

// 按钮调用处
<Button onPress={() => innerFunctionTwo?.()} />

注意点： #

• 该方案会在赋值函数时触发一次组件重渲染，性能开销高于useRef方案，不适合函数会频繁更新的场景。

内容的提问来源于stack exchange，提问作者Wasteland