You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Preact常用api基本跟React一致,这使得对React熟悉的开发者,几乎没有上手的难度,React与Preact的异同可参考官网Differences to React;如果想使用一些缺失的React Api,可以使用preact-compat,在Webpack上的external属性上作如下替换即可:
背景
近期团队对部门系列产品进行一系列的性能优化,发现对于搜狗问问、搜狗指南等产品来说(搜狗百科用的是Vue.js),React显得过“重”,页面domReady时间较长;此外,由于Facebook将React协议更改为臭名昭著的“BSD+许可”协议,考虑公司利益,同时考虑到React组件化、优雅的jsx语法等诸多优点和项目、团队技术的迁移成本;因此寻找类React的轻量级解决方案逐渐提上日程。
Preact 特点
在选型的时候,主要基于以下几个考量:
调研发现,以上几点Preact都能够很好的满足,因此最终选定为团队的类React轻量化框架进行使用和研究;
开源社区有较多star
相比于react-lite,inferno, Virtual-DOM等类React轻量级框架,Preact star数量排名第一,国内成熟的产品如腾讯QQ、花样直播等都在使用。
较好的性能和兼容性
Preact在性能方面也表现不俗。bundle在压缩后大概只有3kb,体积比React小很多,大大节省了下载和加载时间。
类React框架包大小对比:
在渲染性能方面,参考JS WEB FRAMEWORKS BENCHMARK系列测评文章,发现Preact在创建、更新、删除节点等操作中,有良好的表现。
首次性能测试:
此外,preact能兼容目前的主流浏览器,并且在添加polyfill的情况下,能够兼容在IE8
Api与React接近
Preact常用api基本跟React一致,这使得对React熟悉的开发者,几乎没有上手的难度,React与Preact的异同可参考官网Differences to React;如果想使用一些缺失的React Api,可以使用preact-compat,在Webpack上的external属性上作如下替换即可:
丰富的配套框架
与React配套框架react-redux和react-router相似,Preact也有提供preact-redux和preact-router,甚至还有帮助Preact做同构直出的preact-render-to-string。
Preact VS React
Preact致力于保持轻量和专注,去掉React一些较占体积但“收益”较少的特性,并增加React社区呼声较高的新特性。
Preact包含的特性
新增特性
Preact 实际上添加了几个更为便捷的特性,灵感源于 React 的社区
缺少特性
其他区别
Preact与React不同,组件渲染render方法为preact库的核心方法,渲染过程不需要引入其他模块;API定义如下:
Preact默认追加到containerNode这个DOM节点上,返回一个对渲染的DOM节点的引用。
如果提供了可选的DOM节点参数 replaceNode 并且是 containerNode 的子节点,Preact将使用它的diff算法来更新或者替换该元素节点。否则,Preact将把渲染的元素添加到 containerNode 上。
注意: 这个将来的版本可能会有小的调整,可能会改成默认替换。
从React迁移到Preact
目前问问和指南已经完成Preact迁移,迁移工作主要包含wenke工具修改和应用前端代码修改。
wenke工具修改
为了使wenke工具支持构建Preact应用,需要package.json中添加Preact库的版本依赖和Babel预编译支持,目前主站和指南均引用版本8.2.5,preset请使用babel-preset-preact;
同时,preact也支持react devTools调试,只需要在入口文件头部判断当前是否为dev环境,如果是,添加如下代码即可
此外,在用wenke构建生产包过程中,为了避免将preact打包而导致bundle体积较大,可以在webpack的externals属性中添加preact,并在代码中从CDN中引入preact压缩包。
应用前端代码修改
首先,下载Preact开发包和压缩包并上传到CDN,在代码中引入preact,方法如下:
在现有的React应用中,有两种途径把 React 替换成 Preact:
基于Preact的api几乎跟React的api一致,React应用的迁移只需要很少甚至不用作改动;因此主站、指南采用途径二完成迁移,也是最理想的迁移方法。
步骤如下:
遇到的那些坑
1、h() 方法
注意:在preact 组件中不会显示的去用h()方法,但是在打包处理的时候会用到,所以代码检测工具会提示h方法从未被调用,但不能将其删除,如果删除掉,打包后的代码会报错。
2、refs
注意:preact中ref只支持回调函数的方式;如果想继续使用字符串refs,可以在项目中引入preact-compat兼容包;
此外,强烈建议大家使用函数式refs替代字符串refs,根据react官网,字符串refs在react未来版本中也将摒弃。这里可以发现,从preact很多特性中可以看出react在未来较长一段时间的演化方向;
3、img的宽高
注意: render方法里面,以上结构中的百分比会被改成0,因此不能使用百分比设置img宽高
4、render组件问题
注意: 如果没有传入第三个参数,默认会保留userNotice容器里面原有的内容,并将MessageBox追加到userNotice子节点内容中;如果想要重新渲染userNotice,将首次render返回值(userNotice虚拟dom)保存到变量root,并在再次渲染中,将root传入第三个参数中即可。
5、componentWillUnmount 生命周期函数触发方式
preact中没有显式的ReactDOM.unmountComponentAtNode方法调用,需要同过以下方式触发销毁生命周期函数:
6、使用onInput回调函数代替onChange监听输入值的变化
注意:在上述受控组件中,React建议使用onChange方式监听输入值的变化并设置state;然而在preact中,onChange回调函数常常无法准确触发,官方推荐使用onInput回调方法代替onChange方法;当然,你也可以继续使用onChange方法,但需要引入preact-compat兼容包。
7、避免使用相同key的数组item放在同一个组件中
注意:在react当中,我们知道在数组渲染时给每个item增加key属性,key的唯一性可以在重新渲染时提高性能,但相同key也并不会产生异常现象;然而在preact组件中,如果存在相同key数组元素,不管是在同一个数组中或者另外一个数组中,组件在更新时将重新渲染,返回新的数组组件append到container中。
解决方案: 使用数组index或Math.random()保证每个item中key的唯一性
再一次感谢您花费时间阅读这篇文章!祝您在这里记录、阅读、分享愉快!
转载请注明出处。
如果这篇文章对您有帮助,欢迎打赏:)
The text was updated successfully, but these errors were encountered: