React DropdownList - 有状态或无状态的孩子？

Posted 2023-02-23

【中文标题】React DropdownList - 有状态或无状态的孩子？

【英文标题】：React DropdownList - stateful or stateless children?

【发布时间】：2015-06-26 08:17:10

【问题描述】：

根据 React 的文档：

一种常见的模式是创建几个无状态组件 渲染数据，并在层次结构中在它们之上有一个有状态的组件 通过 props 将其状态传递给其子级。

我们以 DropdownList 为例，将其分解为更小的部分：

在 DropdownList 上应用 React 的思想意味着 DropdownList 组件通过响应 UI 事件来管理 Popup 和 List 的状态。这种方式的一个非常好的实现可以在这里找到http://jquense.github.io/react-widgets/docs/#/dropdown-list（参见 GitHub 代码）。

如果可能，另一种方法是让每个组件管理自己的状态。我尝试编写我自己的 DropdownList 的极简版本（请注意 CSS ..），它使用有状态列表。一个关于 List 如何管理其状态的简短示例：

_onMouseDown: function (index, event) 

    if(!this.state.data[index].disabled) 
        this.setState(
            selectedIndex: index,
            focusedIndex: index
        );

        this.props.onSelectedIndexChange(event, index);
     else 
        event.preventDefault();
    

这是完整的 jsfiddle：http://jsfiddle.net/5d30pctd/

我不会比较这两种方法，因为它们各有优缺点，而是问你如何更容易让消费者重用：有状态列表还是无状态列表？

【参考方案1】：

对于高度可重用的组件，我推荐一种混合方法。如果该组件的用户通过value 和onChange，它就成为一个受控组件，其值仅由value 属性控制。如果没有value 属性，则组件存储自己的状态。这就是像<input> 这样的内置表单组件的工作方式。 This *** answer 包含有关该主题的更深入讨论。

【讨论】：

感谢您的回答。我更多地问这个方向是拥有一个可过滤/可排序/自定义呈现/可访问/可分组/多选/可滚动的有状态基础列表。这对构建其他组件也很有帮助，例如菜单或双列表选择。如果 List 是有状态的，那么 Menu 或 Double List Selection 将更容易实现，因为 List 控制自己的状态，您不必在父组件中为其编写代码。

@cosmi.nu 明白了。我认为我的建议仍然适用于这种情况；如果 List 只是有状态的，那么 Menu 或 DoubleListSelection 很难成为受控组件。如果它同时处理受控和非受控，Menu 和 DoubleListSelection 也可以同时处理。