问函数式react组件中全局作用域属性

EN

const audioRef = useRef(null);
const [duration, setDuration] = useState(0);

useEffect(() => {
   // This will be triggered only once when the component is mounted
   audioRef.current = new Sound(url, null, (error) => {
      if(error) {
         // Here you can implement some retry policy if there was some error loading the sound
         return;
      }

      setDuration(Math.trunc(audioRef.current.getDuration())); 
   });

   return = () => {
     // This will be triggered on component is unmounted
     audioRef.current.release();
   }
}, [audioRef, setDuration]);

import Sound from "react-native-sound"

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const audioRef = useRef(null); 
    const [playing, setPlaying] = useState<boolean | null>(null)

  // use useEffect to hook on mounted
   useEffect(() => {
    if(audioRef.current === null) {
      audioRef.current = new Sound(url, null, (error) => {
        if (error) {
            console.log("failed to load the sound", error)
            return
        }
      })
    }
   }, [])

import Sound from "react-native-sound"

var audio;

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const [playing, setPlaying] = useState<boolean | null>(null)
    
    useEffect(() => {
      audio = new Sound(url, null, (error) => {
          if (error) {
              console.log("failed to load the sound", error)
              return
          }
      })
    }, [url]);