网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

reactjs,progressive web app

2020-5-13 14:38:33 | 作者:老铁SEO | 0个评论 | 人浏览

  webstorm支持百react,支持node,支持scss,我已经用这个度软件开发过一问个移动端react项目了,刚开始答的时候,我打算用专Hbuilder,但是发现Hbuilder用起来不属爽,后来就用了webstorm。


  reactjs是库还是框架


  框架


  AngularJS、ReactJS归到同一类,JQ只是一个库,其他两个才算是抄重框架;


  React很大的特点就是“轻”,再加上VDOM这个很好的idea让React非常非常快(在上面那个测试里面0.3s左右就载入完毕)。袭另外React和Angular一个很大的不同就是React采用的是one-waydataflow。


  React的缺点嘛,大概就是现在还太新了很难说将来有没有大的API变化,目前在大的稳定的项目上采用React的,我也就只知道知有Yahoo的Email。所以现在很少有批评React的声音也许不是他真的就没有坑,而是那些坑还没有被踩出来而已。


  还有就是React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Flux和routing相关的东西。React的routing我没有研究过,但是Flux的话已经道有出现一些批评的声音了。


  如何用reactjs构建一个完整的前端页面


  用reactjs构建一个完整的前端页面的步骤:准备:React的安装包,建议去官网下载安装1、使用React的网页源码,结构大致如下:<!DOCTYPEhtml><html><head><scriptsrc="../build/react.js"></script><scriptsrc="../build/react-dom.js"></script><scriptsrc="../build/browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel">//**用户代码**</script></body></html>上面代码有两个地方e79fa5e98193e58685e5aeb931333363393038需要注意。首先,最后一个<script>标签的type属性为text/babel。这是因为React独有的JSX语法,跟JavaScript不兼容。凡是使用JSX的地方,都要加上type="text/babel"。其次,上面代码一共用了三个库:react.js、react-dom.js和Browser.js,它们必须首先加载。其中,react.js是React的核心库,react-dom.js是提供与DOM相关的功能,Browser.js的作用是将JSX语法转为JavaScript语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。2、将src子目录的js文件进行语法转换,转码后的文件全部放在build子目录。$babelsrc--out-dirbuild3、渲染转换成html节点,以方便操作dom:ReactDOM.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。这里以插入helloworld为例来说明ReactDOM.render(<h1>Hello,world!</h1>,document.getElementById('example'));4、运行结果如下:


  reactjs适合移动端的web页面开发吗


  React是适合移动端,而不适合pc端的。


  原因:


  1、pc端使来用React需要重做很多已有组件,包括但不限于highCharts图表类、dataPicker基础组件。


  2、移动自webapp恰恰是不需要这类复杂的组件的,这给写移动端项目重写组件带来了机会。


  pc端要seo,移动端基本不需要,所以用这种数据后加载的框架有了可能。


  3、用webpack编译出来的基础库React+es6+Route+redux+tappable,minify之后知大概200k不到,gzip之后50k左右。所以明确的说,是适合移动端的。


  4、不管是用etag或者Expires的强缓存,还是用localStorage做缓存。第一次访问的50k基础库,都不是2g用户的致命伤,2g致命伤是一个RTT的时间巨长。用React基本没有操作需要zepto了,少了13kgzip之后的zepto,也少用一个模板引擎。


  5、用了es6之后代码编译会显大,但明显这十几k并不是阻止用React的理由。


  可以试用一下微信钱包里面的城市服务的首页道,刚刚做了React的尝试,基本能做到秒出,以后会推到其它的微信商业项目中。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐