MUI Snackbar 组件为什么不做成 static function 的模式？

起源

从前一直好奇一个问题，MUI Snackbar 用起来也太繁琐了

// MUI Snackbar
function App() {
  const [open, setOpen] = useState(false)

  return <>
    <Button onClick={handleClick}>Open simple snackbar</Button>
    <Snackbar
      open={open}
      onClose={handleClose}
    />
  </>
}

antd 以前的调用多方便啊，在全局任何地方都能调用

// antd message 静态方法(现在已经不推荐了)
message.open('xxx')

现在 antd 也开始推荐 hooks 方式了

// antd message 现在推荐的调用方式
function App() {
  const [messageApi, contextHolder] = message.useMessage()

  const info = () => {
    messageApi.info('Hello, Ant Design!')
  };

  return <>
    {contextHolder}
    <Button type="primary" onClick={info}>
      Display normal message
    </Button>
  </>
}

为什么呢？

我虽然用的 MUI，但图方便，一直用的 react-hot-toast。今天用到的时候，突然发现一个问题，MUI Snackbar 键盘可访问性很好，按钮点击弹出 Snackbar 后，按一下 tab，直接就导航到了 Snackbar 相关按钮上，而 react-hot-toast，根本无法使用键盘导航。

想了一下才注意到，hooks 方式调用时，Snackbar 在 DOM 结构上紧邻触发的 Button，点击时焦点在 Button 上，下一个元素就是 Snackbar，自然按一下 tab 就导航到了；而静态方法的实现原理是，在顶层提供一个 Provider，所有的 toast 都被挂载在那一个 Provider 上，自然就无法键盘导航了。

我不确定 MUI 是不是出于这方面的考虑，但我十分赞同：不应该仅为了调用方便，而牺牲交互性。这也是我为什么对 MUI 推崇备至：不仅设计哲学统一，还充分考虑到了键盘可访问性、无障碍等方面，这些方面 antd 目前还不够完善。

MUI Snackbar 组件为什么不做成 static function 的模式？

起源

从前一直好奇一个问题，MUI Snackbar 用起来也太繁琐了

// MUI Snackbar function App() { const [open, setOpen] = useState(false) return <> <Button onClick={handleClick}>Open simple snackbar</Button> <Snackbar open={open} onClose={handleClose} /> </> }

antd 以前的调用多方便啊，在全局任何地方都能调用

// antd message 静态方法(现在已经不推荐了) message.open('xxx')

现在 antd 也开始推荐 hooks 方式了

// antd message 现在推荐的调用方式 function App() { const [messageApi, contextHolder] = message.useMessage() const info = () => { messageApi.info('Hello, Ant Design!') }; return <> {contextHolder} <Button type="primary" onClick={info}> Display normal message </Button> </> }

为什么呢？

MUI Snackbar 组件为什么不做成 static function 的模式？

起源

为什么呢？

一个 bug 分析

做了一个玩具：歌词编辑器

一种组织 zustand 自定义函数的方法

MUI Snackbar 组件为什么不做成 static function 的模式？

起源

为什么呢？