成熟的组件库不止是好看的皮肤：它把无障碍（aria 属性、键盘操作）、受控/非受控状态、复杂的弹层定位与边界处理等容易做错的细节都沉淀进去。一个人单独撩一个 DatePicker 的月份联动、键盘导航、时区处理远比想象中耗时，直接用库能省下大笔时间。
选型时考虑生态契合度：React 用 Ant Design、MUI；Vue 用 Element Plus、Naive UI、Vant；跨框架可看 Radix、headless 类方案配 Tailwind。二次封装时注意保留原有 API 透传，不要把库锁死在定制层里，否则后续升级会很痛苦。
// 受控与非受控双模式：成熟组件库组件的最小骨架 function createInput() { var listeners = []; var api = { set: function (v) { api.value = v; listeners.forEach(function (fn) { fn(v); }); }, value: '', onChange: function (fn) { listeners.push(fn); return function () { listeners = listeners.filter(function (f) { return f !== fn; }); }; } }; var input = document.createElement('input'); input.value = ''; input.addEventListener('input', function (e) { api.set(e.target.value); }); api.el = input; return api; } var myInput = createInput(); // 受控用法：外面同步状态 myInput.onChange(function (v) { console.log('值变化：' + v); }); document.body.appendChild(myInput.el);