语音录制应用：如何替换全局变量recorder的实现方案？

你的代码里用全局变量recorder确实容易引发状态混乱（比如组件多次渲染、多实例时互相干扰），这里有几种更符合React组件规范的实现方式：

方案一：使用useRef存储录制实例 #

useRef的.current属性可以存储不需要触发组件重渲染的对象，非常适合保存MediaRecorder这类实例：

import { useRef, useEffect } from 'react';

export default function AddAudio() {
    const recorderRef = useRef(null);
    const chunksRef = useRef([]); // 用ref存储录制片段，避免作用域问题

    const Start = async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            const recorder = new MediaRecorder(stream);
            recorderRef.current = recorder;
            chunksRef.current = []; // 重置片段

            recorder.addEventListener("dataavailable", event => {
                chunksRef.current.push(event.data);
            });

            recorder.addEventListener("stop", () => {
                const blob = new Blob(chunksRef.current);
                // 这里可以处理生成的blob，比如上传或者预览
            });

            recorder.start();
        } catch (err) {
            // 处理权限拒绝等错误
            console.error('获取音频权限失败:', err);
        }
    };

    const Stop = () => {
        recorderRef.current?.stop();
        recorderRef.current = null; // 清空实例
    };

    // 组件卸载时停止录制，避免内存泄漏
    useEffect(() => {
        return () => {
            recorderRef.current?.stop();
        };
    }, []);

    return (
        <div>
            <button onClick={Start}>开始录制</button>
            <button onClick={Stop}>停止录制</button>
        </div>
    );
}

方案二：使用useState管理录制状态（适合UI联动场景） #

如果需要根据录制状态（比如是否正在录制）更新UI，可以用useState存储recorder实例，不过每次更新state会触发重渲染，适合需要同步UI的场景：

import { useState, useEffect } from 'react';

export default function AddAudio() {
    const [recorder, setRecorder] = useState(null);
    const [chunks, setChunks] = useState([]);

    const Start = async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            const newRecorder = new MediaRecorder(stream);
            
            newRecorder.addEventListener("dataavailable", event => {
                setChunks(prev => [...prev, event.data]);
            });

            newRecorder.addEventListener("stop", () => {
                const blob = new Blob(chunks);
                // 处理生成的blob
                setChunks([]); // 重置片段
            });

            newRecorder.start();
            setRecorder(newRecorder);
        } catch (err) {
            console.error('获取音频权限失败:', err);
        }
    };

    const Stop = () => {
        recorder?.stop();
        setRecorder(null);
    };

    // 组件卸载时清理录制实例
    useEffect(() => {
        return () => {
            recorder?.stop();
        };
    }, [recorder]);

    return (
        <div>
            <button onClick={Start} disabled={!!recorder}>开始录制</button>
            <button onClick={Stop} disabled={!recorder}>停止录制</button>
        </div>
    );
}

关键优化点 #

• 用组件内部的状态/ref替代全局变量，避免跨组件或多实例的状态污染
• 添加错误捕获，处理用户拒绝音频权限的情况
• 组件卸载时停止录制，防止内存泄漏
• 用async/await替代链式then，提升代码可读性

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