React函数组件如何传入prop生成不随渲染重建的react-native-sound实例

你可以通过useRef + useEffect的组合实现需求：

• useRef 用来跨渲染周期保存Sound实例，不会因为组件重渲染被重置
• useEffect 监听url prop的变化，仅在url变更时才创建新的音频实例，同时做好旧实例的资源释放

完整示例代码如下：

import Sound from "react-native-sound"
import { useState, useRef, useEffect } from 'react'

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const [playing, setPlaying] = useState<boolean | null>(null)
    // 用ref保存音频实例，跨渲染周期保留引用
    const audioRef = useRef<Sound | null>(null)

    useEffect(() => {
        // 每次url变化前先释放旧的实例资源，避免重叠播放
        if (audioRef.current) {
            audioRef.current.stop()
            audioRef.current.release()
        }

        // 创建新的音频实例，存入ref
        audioRef.current = new Sound(url, null, (error) => {
            if (error) {
                console.log("failed to load the sound", error)
                return
            }
        })

        // 组件卸载时释放资源
        return () => {
            if (audioRef.current) {
                audioRef.current.stop()
                audioRef.current.release()
            }
        }
    }, [url]) // 仅当url变化时才重新执行effect

    // 后续播放/暂停操作都从audioRef.current取实例即可，示例播放方法：
    const play = () => {
        audioRef.current?.play(() => {
            setPlaying(false)
        })
        setPlaying(true)
    }

    // 其余业务逻辑...
}

这样处理后，只有当传入的url prop发生变化时才会创建新的音频实例，普通的组件重渲染不会修改ref里保存的实例引用，既解决了重复实例导致的重叠播放问题，也可以正常接收组件传入的url参数。

内容的提问来源于stack exchange，提问作者Patrik Rikama-Hinnenberg