我应该使用React State进行用户交互（切换可见性类）吗？

Question

我正在开发一个UI库，我的一些组件根据用户的一些交互来改变他们的“状态”。

例如，用户点击手风琴面板的标题会导致手风琴面板打开并变为可见。通过将visible修饰符添加到手风琴面板来实现此状态，如下所示：

<div class="accordion">
    <div class="accordion_panel-visible">
        <div class="accordion_title">foo</div>
        <div class="accordion_content">bar</div>
    </div>
    <div class="accordion_panel">
        <div class="accordion_title">fizz</div>
        <div class="accordion_content">buzz</div>
    </div>
</div>

我之前的假设是React State应该用于根据一些后端数据重新渲染组件。但是，基于查看来自其他UI库等的源代码，它们似乎也在处理具有React State的UI状态。

所以使用React，我可以通过使用原始DOM API实现我想要的东西（如这里的例子所示 - https://reactjs.org/docs/refs-and-the-dom.html）：

Accordion.defaultProps = {
    name: 'accordion'
};

class Accordion extends React.Component {
    toggle(event) {
        const panel = event.target.closest('[data-component="panel"]');
        const operator = panel.modifier('active') ? 'unset' : 'set';

        panel.modifier('active', operator); 
    }

    render() {
        return (
            <Module {...this.props}>
                {this.props.panels.map(({ title, content }, index) => (
                    <Component name='panel' key={index}>
                        <Component name='title' onClick={this.toggle}>{title}</Component>
                        <Component name='content'>{content}</Component>
                    </Component>
                ))}
            </Module>
        )
    }
}

这一切都很好 - 但我实际上是在一个React组件中进行DOM操作，我应该避免使用它。在这种情况下，我应该使用React State和Refs（而不是直接的DOM操作）。为了实现上述相同的目的，我相信我能做到：

Accordion.defaultProps = {
    name: 'accordion'
};

class Accordion extends React.Component {
    constructor(props) {
        super(props);

        this.panels = [];
        this.state = { activePanel: null };
    }

    toggle(index) {
        this.setState({ 
            activePanel: (this.panels[index] === this.state.activePanel) ? null : this.panels[index]
        });
    }

    isActive(index) {
        return (this.panels[index] === this.state.activePanel) ? true : false;
    }

    render() {
        return (
            <Module {...this.props}>
                {this.props.panels.map(({ title, content }, index) => (
                    <Component name='panel' 
                        key={index} 
                        ref={ref => this.panels[index] = ref}
                        modifiers={this.isActive(index) ? 'active' : false}
                    >
                        <Component name='title' onClick={this.toggle.bind(this, index)}>
                            {title}
                        </Component>
                        <Component name='content'>{content}</Component>
                    </Component>
                ))}
            </Module>
        )
    }
}

（我知道上面代码片段的行为会关闭兄弟面板，而第一个片段不是这种情况，但这是微不足道的，可以忽略）。

所以我的问题是，我是否应该利用React State（即后一个例子）？

感觉就好像我的应用程序基于用户交互显示/隐藏/打开/关闭UI元素，这些用户交互不需要/修改/发布/更新/获取/接收数据，然后React实际上不应该关心它们。

但最重要的是 - 这取决于偏好吗？我应该决定React是否应该关心这个问题吗？在一天结束时，react是一个工具，我目前用于在后端自由环境中创建和呈现UI组件的工具。我现在真的很困惑，并且不确定我是否能真正看到在这种情况下使用state的好处。

谢谢！