Question

我需要在Redux中存储一些元素参考，以便可以聚焦元素。

我有这个下拉列表：

            <BasicSelect
                selectRef={(e) => this.storeRef('make', e) } ... />

这是storeRef：

storeRef(list, ref)
{
    if(this.state.refsStored[list]) {
        return;
    } else {
        this.props.storeSelectRef(list, ref);
        var refState = Object.assign({}, this.state.refsStored);
        refState[list] = true;
        this.setState({refsStored: refState});
    }
}

由此，它应该存储ref一次，然后在比较后返回。

但是，每次单击<BasicSelect>下拉列表中的选项时，应用程序将挂起＆lt; 1s（显示），然后继续。

如果我将storeRef更改为以下内容（显然预期结果不起作用）：

storeRef(list, ref) {
    return;
}

下拉选项非常快，一切都很好。那么这个比较if(this.state.refsStored[list])怎么会非常慢？

Answer 1

不要将refs置于组件状态。组件状态只应用于渲染时需要的东西，并且在更新它们时应该重新渲染。将refs直接保存到组件实例上：

<BasicSelect selectRef={selectInstance => this.selectInstance = selectInstance} />

我还有点混淆selectRef作为道具的说法，但是我认为<BasicSelect>组件转发给基础<select>标记

无论如何，关键是你每次都会造成不必要的重新渲染，因为你正在调用setState()。别这么做。

为什么使用ref会减慢我的React应用程序？

1 个答案: