个性化阅读
专注于IT技术分析

Preact:具有相同ES6 API的3KB快速ReactJS替代方案

本文概述

React并不是唯一一个实现虚拟DOM来解决更新浏览器DOM问题的库(因为从理论上讲它比虚拟DOM慢), 但是到目前为止最受欢迎。成为最受欢迎的项目意味着许多开源贡献者都在项目中工作, 并且可以在应用程序内部实现更多公共组件。这显然是你应该使用React而不是该类型的另一个库的原因, 但是, 如果我告诉你你仍然可以将大多数react组件与另一个库一起使用, 该库的工作原理相同, 并且与React相比非常轻巧?它存在, 并且项目名称为Preact。

什么是Preact?

Preact是具有相同ES6 API的非常快速的React替代方案, 可以处理组件, 虚拟DOM, 并且仅重3KB。如果你担心React的大小和性能, 应该考虑使用Preact作为”克隆库”, 该库声称具有更好的性能, 而且它非常轻巧。

Preact导出通用的Component类, 可以将其扩展以构建用户界面的封装的, 自更新的片段。组件支持所有标准的React生命周期方法, 例如shouldComponentUpdate()和componentWillReceiveProps()。提供这些方法的特定实现是控制组件更新时间和方式的首选机制。

从React转变为Preact

React最重要的一点是组件完成的出色工作。你可以随时随地在任何项目中使用它。尽管并非所有的React组件都与Preact兼容, 但是可以使用React兼容性层使其兼容。令人惊讶的是, 你需要做的就是安装preact和preact-compat, 删除react和add是Webpack中的别名, 仅此而已。

这是Preact最令人敬畏的功能之一, 因为如前所述, 这是一个示例项目, 该示例项目使用preact-compat与未修改的现有React库一起工作, 实现了超过95%的缩减(这是很多伙伴)。我们确信, 如果你真的在乎应用程序捆绑包的大小, 那么现在你的BFF就可以成为现实。值得一提的是, 如果你愿意从现有的React项目迁移到Preact, 则需要确保在切换之前对应用进行全面测试, 因为你可能会丢失React的某些功能(可以通过React的性能得到补偿)应用本身)。 Preact不尝试包含React的每个功能的原因是为了保持小巧和专注-否则, 简单地将优化提交给React项目就更有意义了, 该项目已经是一个非常复杂且结构良好的代码库。

使用Preact进行调试

你可以使用React Developer Tools浏览器扩展在运行时检查和修改Preact UI组件的状态。

  1. 安装React Developer Tools扩展
  2. 在你的应用程序中导入” preact / devtools”模块
  3. 重新加载并转到浏览器开发工具中的”反应”标签

贡献于行为

Preact可以接受拉动请求和任何形式的支持。你可以每月捐款支持该项目, 并帮助他们继续开展活动。不要忘记访问Github上的官方存储库以获取有关该库的更多信息。

赞(0)
未经允许不得转载:srcmini » Preact:具有相同ES6 API的3KB快速ReactJS替代方案

评论 抢沙发

评论前必须登录!