Preact: 可作React的备胎

Posted 2021-05-01 前端先锋

前阵子Apache基金会不许名下的开源项目使用React，把React关于专利的附件的licence又拉到焦点之中，不过，Facebook对此事的反应是：暂时不会改Licence。

We appreciate all the issues that have been opened asking questions and engaging us. We have considered possible changes carefully,  but we won't be changing our default license or React's license at this time.

看这个官方解释链接 https://code.facebook.com/posts/112130496157735/explaining-react-s-license/ 需要翻墙。

我以前就说过，怎么定Licence是Facebook自己的事，外人谁也没那资格说三道四。

前几天和同事们聊这事，虽然Hulu（我现在的雇主）不大可能改变业务方向去涉足社交网络，Facebook也不大可能来搞一个付费订阅电视电影的视频服务，而且，就算有商业利益冲突，也未必有专利冲突，不过，未雨绸缪也是我们一贯作风，还是先指定要B计划，不怕一万，就怕万一。

所以，我们需要一个备胎。

对于使用了React的团队，肯定希望换上备胎的时候，不要改变太多代码，改动越少越好，最好不改。

目前看来，Preact是最好的备胎。

Preact肯定是读过《一个备胎的自我休养》，充分考虑到了开发者迁移的痛苦，所以，最理想情况，迁移到Preact只要修改四行，就搞定了。

先是在package.json中增加preact和preact-compat，其中preact-compat用来保证preact和React之间的接口兼容。

npm install --save preact preact-compat

在webpack配置中，确保resolve下的alias下有下面这样的配置，让我们代码中所有对react和react-dom的引用全都转移为使用preact-compat。

resolve: {
  alias: {
     react: 'preact-compat',
     'react-dom': 'preact-compat',
  }
}

就这么简单。

然而……并没有这么简单。

在这里列出了preact和React 的所有不同，还是有挺多不同的，不过我们只关注于preact缺失的部分，毕竟，这是我们的策略：我们继续使用React，只有当某一天不能再用React的时候，我们才换成preact，希望那时候我们别手忙脚乱就好。

基于这个原则，我们不会在现有代码中去用特定于preact的功能，我们只要关心那些功能React有但是preact没有，这是需要避免的危险区。

官方所说的React有但是Preact没有的功能包括。

1. PropType

PropType本身就是一个辅助功能，如果使用TypeScript就永不上PropType，React官方也在计划让PropType退休，用Flow来代替PropType做类型检查，所以，PropType没有就没有了吧，没啥大影响。

2. React.Children

React.Children有一套API，不过，虽然preact不支持这套API，preact-compat却补上这些API，呵呵，所以不用操心了。

3. Synthetic Event

在React中，JSX中接收到的事件都是Synthetic Event，所谓Synthetic Events指的就不是浏览器原生的Event，而是包装了一下，我们依然可以通过Synthetic Event来访问原生Event，拥有Synthetic Event的好处是所有的Event都具备下面的属性。

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

上面这些属性你用得多吗？如果用得不多，没有Synthetic Event也没啥大影响。

总之，我们还会继续使用React，React的社区毕竟更加成熟，还有Facebook持续的支持，但是，我们也留一手，万一战争爆发，我们就一分钟换上备胎，继续上路，现在晚上可以睡得着觉了。

有备胎的感觉真好:-)

---

往期精选文章

---

---

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。