为什么我不用 React-Router

翻译Medium上的文章:Why I don't use React-Router

React-Router 是目前 React 里最流行的路由框架之一。也正是如此,很多人都觉得这是 React 的官方路由解决方案的标配。虽然我也觉得 React-Router 也很不错,但是我不太喜欢使用它。下面我总结下不喜欢它的理由。

React-Router 按理说是当前 很火的 React 路由框架之一了。很多的前端工程师都会在创建项目的时候自动引入 Redux, React-Redux 和 React-Router。我能理解引入 Redux,因为它确实有很大的实用性,但是我不太能理解为什么所有人都会引入一个不太好,必要性不大且复杂的路由解决方案。

关于我的背景,我先说下我虽然在前端已经12年了,但是我主要的还是更喜欢做后端,或者说是无浏览器的后页。我以前是非常讨厌写前端代码的,因为太过混乱了,而且最终总会写成“意大利面条”代码。幸好在最近几年前端发展十分迅速,以前前端很多的痛点都被解决了。所以我在3年前再次投身于前端中,也正是那时候我开始学习 React 的时候。

作为一个和后端打很多交道的人来说,对于返回渲染后页面的 API 和 网页 App 的框架都是自带路由的,如 php 的 cgi-bin(将文件路径映射成 Url),Express 和 Koa。关于路由,不管它是干什么的,要怎么干的,我都已经有了一个非常好的理解了。对于我来说,Router 就是一种胶水代码,它可以使用已经被访问的 url 去找到对应的 Controller 并执行,然后提供一个确定的 context。这个 context 通常包含了请求的信息。这就是路由,没了。

如果你深入理解 Express.JS 的路由,你会发现它就是按我说的那样做的。它会暴露一个 API,让你注册路由(和方法),然后每次只要注册后的路由接收到请求,它就会近注册顺序去执行已经注册的控制器。它暴露了一个简单的 API,虽然它包裹了很多灵活且功能强大的代码。这就是我觉得最标准的路由了。它只做一件事,并且做的很好,然后你还不需要过多关注它。

下面我就来总结下我为什么不喜欢 React-Router 和不喜欢它的地方。

所有东西在 React-Router 都是组件

个人来说,组件应该就是 View 层。每次我写应用的时候,我一定会将业务逻辑,如调用 API,验证等等放在 Controller 层而不是组件内。

但是,React-Router 用 “所有东西都是组件” 方式来进行路由就不能完成上面说的了。比如我想在渲染组件前从后端访问一些数据,使用 React-Router 的话会这样:创建一个新的自定义组件 ,并且直到数据获取了才去做路由。

根据 React-Router 的文档,里面提供三种组件类型。只有一种 (Link)才是真正的视图组件 。剩下的都是用来开启路由的。为啥我的 Router 要被搞成 React 组件?

不同环境使用不同 Router

React-Router 暴露了两种不同的 Router,BrowserRouterStaticRouter。假如你在渲染之前用 API 获取数据,对于使用不同的 Router,你可能要用不同的方法来完成。目前我见过的使用 React-Router 的 SSR,基本都要对这两个 Router 写不同的代码。这就使用代码在服务器和客户端不能被重用了。

对于服务器,你可能要用内部方法 matchPath 来手动检查路径和请求路径是否匹配,然后调用对应的辅助函数去访问数据 。等等,路径匹配和调用 Controller 不是应该 Router 自己应该帮我们做了么?现在不就相当于我自己要在 StaticRouter 里再写一个小型 Router?

2979799-a46323ac3c8b34bf.jpg

写死的路由特定组件

如果你想 React-Router 在你的应用里做路由切换,比如点击 a 标签,那你要用 React-Router 提供的 Link 或者 NavLink 组件 。如果你不用这些组件 ,React-Router 不会捕获路由的更改,浏览器就会将整个页面重定向到链接的 Url。

最终结果就是整个网页都充满了 LinkNavLink。这就意味着如果你不想用 React-Router 了,你就要重写每个用到这两个东西的组件。我个人不太喜欢这种定死的写法,更喜欢不用它。

与 React-Redux 整合

在某些特定条件下,url 改变时,React-Router 可能真的不渲染更新了的组件。虽然这是个大家都知道,并在文档里都说了的情况,但是事实是这不是一个边界条件,而且你有很大可能会碰到。解决的方法只要添加模板代码。

如果你想用 Redux 去管理你的路由,那就不是推荐写法了,所以你要使用完成分离的 Connected React Router 模块去 “使用 Store 同步你的路由”。我都不知道为毛我要这样做,或者说为啥我要这么做。

过多的大量改动

这是我最后一个不想用 React-Router 的原因了。React-Router v4 完全移除中心化配置,并且他们还不提供一个完整的替代方案。直到今天(2019年1月4日),react-router-config 模板本应该提供这个功能的,但是目前还在 Beta 版本。

我明白一个项目有可能需要大改,而这些大改都是很合理的,但是如果目前有很多用户正在用这个功能,然后你把它移除了,那你至少也要提供一个完备的替代方案吧。我不想每次别的框架弃用某些用户重度依赖功能后,都要要担心未来是否会出错,然后逼我要么重写很多代码来移除这些依赖,要么继续使用旧版本的库。

上面就是我不喜欢 React-Router 的主要原因。如果你想知道我会在 React 项目里用什么路由框架,那不好意思,我没有。现在我只要用自己写的 Router 在所有我的 SAP 上(React 和非 React)。它模仿了 ExpressJS 的路由 API,当然稍微的调整来路由和渲染 React 组件。我以后也会讲讲我是怎么在 React 项目中的使用自己做的 Router。

猜你喜欢

转载自blog.csdn.net/weixin_34082789/article/details/86786338
今日推荐