近来在工作中碰到这样一则案例:项目中要调整路由,需要修改 react-router 的根节点 <BrowserRouter> 的配置。查看项目代码良久,得出结论是:改不了。原因为何?听我慢慢道来。
项目基于 React,使用了厂内自研的一款基于 redux 的某状态管理库X,而X在其 createApp() 接口中创建了一个外包裹层组件,且这个包裹层中直接使用了 <BrowserRouter> 组件,然后美其名曰“集成了react-router”。
这种做法,其本质是一种“硬编码”行为,也就是通常所说的“写死”,是一种常见且贻害无穷的反模式。这么一搞,相当于默认 <BrowserRouter> 组件的所有 props 都用默认值,而外界无论如何也无法修改了。当我想调整 <BrowserRouter> 的 basename,却发现根本没法改。
这是什么JB封装?简直鬼一样的。且不论一个状态管理库强行集成 react-router 的必要性和合理性;就算是要封装,最起码库X的API中要允许使用者传入 <BrowserRouter> 的配置项,或者允许使用者自行传入<BrowserRouter> 组件。而库X简单粗暴地将第三方库“封死”在自己的代码中,给使用者带来了诸多不便。
当对其他库进行封装时,万不可使用这种将代码“封死”的方式,因为这样会导致API丢失。