Javascript 使用React和Web音频进行状态管理

我正在尝试使用Web音频API和React编写一个基于模块的音乐应用程序

到目前为止，我一直在创建web音频节点，如过滤器、振荡器等。创建React组件时：

class Filter extends React.Component {
    constructor(props) {
        super(props);
        const filter = props.context.createBiquadFilter();
        this.state = { filter };
    }
...

稍后，这意味着可以将过滤器作为组件状态的一部分进行更改：

    frequencyChange(event) {
        ...
        this.state.filter.frequency.setValueAtTime(range.value, context.currentTime);
    }

在渲染方法中：

<input type="range" className="slider" min={20} max={20000}
                   onChange={event => this.frequencyChange(event)}/>

---

注意——我已经读过React的

refs

API，但它似乎不适合与任意数量的子类一起使用——尽管如此，我还是很高兴能以其他方式展示它

React不喜欢在组件状态下编辑值而不使用

setState

。我会避免将整个音频节点置于状态，甚至根本不会置于组件中

我曾经尝试将音频节点作为类的一部分添加到构造函数中，这样我就可以访问this.filter。然后，我必须随时随地将音频上下文传递给所有内容，以访问连接节点和设置值所需的方法。它发出了我想要的声音，但我不喜欢我的文件耦合得如此紧密和冗长

我重构了一切。现在有一个文件使用管理所有音频节点的音频上下文。它公开了一些方法，我可以根据需要更新值。我还有一个字符串名到节点的映射，所以我设置如下值：

setValue（'filter'，'frequency'，newValue）

。有一些情况需要单独处理（即失真曲线），但总的来说，我更容易阅读。这种抽象还意味着您的音频节点对组件层次结构中的更改不敏感

这是我的建议。将音频节点从React类中拉出。管理管理节点的代码要简单得多

class EffectsBox extends React.Component {
    ...

    addNewEffect(effect) {
        // disconnect() the previous effect and connect() it to a new one 
    }

    render() {
        // Maybe some kind of "map" here between effects and react components?
        return <div>{ this.state.effects }</div>
    }