React | 高效前端之浅谈

React | 高效前端之浅谈

React在国外已被各个公司的各种产品大量使用,大众熟知的INS、Airbnb、Yahoo、ThoughtWorks等,都是使用React来实现UI开发的。很多人认为,虽然React在国外已经被广泛应用,但在国内,仍处新兴萌芽阶段。到底React在国内境遇如何?据海说科技了解,阿里内部系统、支付宝新一代框架、美团内部系统、知乎、滴滴、卖座电影、豆瓣等大型网站及平台正在运用React,或在进行系统重构。毫无疑问,React作为近两年前端三大流行框架之一,正成为程序员们最喜爱的JavaScript框架。自2013年5月开源至今,已有千万网站、APP使用React来进行前端构架,使之成为GitHub 最受欢迎的项目之一。

众所周知,React是由Facebook公司中有智慧的懒人创造的。当年,随着Facebook用户的不断增多,巨大的代码库和庞大的组织使得MVC很快变得复杂非常,其广告部门更是面临着页面不断重新加载而异常缓慢的问题。Facebook对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,用来架设 instagram的网站。这样既满足了自身扩展需求,优化了用户体验及管理,还能避免不断的重新编码。React是Facebook对于Web Components的理解与实现,做出来以后,发现这套东西很好用,于是就开源了。经过这几年的沉淀,React越来越强大,暂不提React这几年在国内与BAT之间的矛盾,这其中还有很大谈判空间。仅从大多程序员角度来看,React无疑已成为开发第一选择。

React已经形成一套完整的前端开发生态体系,包括:React.js、React Native 、ReactRenders(ReactDOM、ReactServer 、ReactCanvas) 、Flux 模式及其实现(Redux , Fluxxor) 、React 开源组件、GraphQl + Relay等。React作为一种思想存在,React.js应用于Web端; React Native应用于APP,同时支持IOS和Android应用程序的编码设计和发布,显著减少了为各个平台编码和设置资源所需的时间,成功为开发人员减负。

大多已经采用了React框架的企业,看中的是React稳定的跨平台支持,其性能的水平和垂直扩展性都很好,同时减少了反馈循环,可快速迭代。而程序员们青睐React,也源于它的开发操作性极强:可并行工作,支持用户将图像解码、调整文字大小并渲染,可以将高耗时的UI操作移出主线程,进而提高UI的流畅性并缩短响应时间;先进的手势处理技术,可以更快的响应本地更改;允许访问平台特定的功能和组件,甚至包括小部件;易于阅读,开发人员更易于从代码中获取关键信息。

海说软件始终致力于应用React等优秀技术框架构建国内一流的原生APP。在我们看来,React是最佳的组件化实践,在生产操作上的表现会越来越出彩:

1. React使用一个真正的、全功能的编程语言(JAX)去渲染视图;

2. React可以让开发者更方便的开发同构应用,这是其他 MVVM 框架很难做到的;

3. React解决了很多 SEO 诉求,方便组件的前后端复用;

4. React反应性更新非常简单,当数据随着时间的推移而变化时,你会发现react的真正亮眼之处;

5. 掌握了React,就具备了写多个平台的开发能力;

6. 拥抱了ES6的大量新特性;

7. React周边生态圈异常繁盛,较其他类似框架都更加庞大。成熟的开发者都明白,真正能让项目开发过程享受便利的一定是好的框架+丰富的生态库。这一点,也将是 React对标竞品的优势所在。

React不仅仅有如上的表现。基于自身突破性的JAX、Virtual DOM、组件化、单向数据流等特点(此处特点,将在之后的文章中详细介绍,暂且略过),会在使用中感受到其更简单、声明式的巨大优势。海说软件正是看到了这一强大优势,将继续深挖硬掘,运用以React为代表的优秀框架,帮助企业解放生产力,打造出这个时代最朴素、最富质感、最受大众喜爱的互联网产品。

时间: 2024-11-05 16:08:23

React | 高效前端之浅谈的相关文章

前端架构浅谈

前端架构浅谈 0.前注 鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺. 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢了!!! 我最喜欢听有理有据的批评了!! 本人QQ:20004604,邮箱:[email protected],期待你的交流. 1.为什么要有一个好的架构 首先明确一点,架构是为需求服务的. 前端架构存在的目的,就我个人理解来说,有以下几点: 1.提高代码的可读性. 一个好的架构,代码的可读性

前端知识 | React Native Animated动画浅谈

在移动开发中,动画能有效的提高用户体验.在 React Native 中,也有相应的 API 供我们做动画.这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方式,而且具备很高的性能.Animated 目前只封装了四个可以动画化的组件:View.Text.Image.ScrollView,不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件. 话不多说,我们来举个栗子: 步骤拆解 1.创建 Animate

前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件. 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npminstall --save echarts-for-react 第二步: 在我们的项目中导入: importReactEcharts from 'echarts-for-react' 第三步: 在 render 函数中使用: option={th

前端知识 |浅谈React setState

setState的连锁反应 这是一个React组件实现组件可交互所需的流程,render()输出虚拟DOM,虚拟DOM转为DOM,再在DOM上注册事件,事件触发setState()修改数据,在每次调用setState方法时,React会自动执行render方法来更新虚拟DOM,如果组件已经被渲染,那么还会更新DOM中去.这个过程,setState就像一个点燃引擎的火源,发动了React核心的调度层,然后直至渲染层的改变.异步的setState刚接触React的同学,对React的setState

react与angular之浅谈

把react研究了一番,原动力并不是虚拟dom和响应速度,而是本着react native去的. 感觉react设计的不好,没有把html,js分离,而是混在了一起,每个新设计的组件比如TestDiv,都必须在React.render下执行才能渲染,并且要指明包含该组件的容器,比如id为example的div等.这样实现一个大的项目的结果,非常不直观和繁琐,实在不明白fb是怎样想的 React.render( <TestDiv data={{name:'react',value:'haha'}}

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

【火的不行的前端你必须知道】一、浅谈node.js

引子: 现在都2017年了,在这个前端盛行的年头,在不懂一些前端流行的技术就落伍了,恰好公司H5端项目也是让这个方向去替换. 技术选型: 这里主要是简单说一下,后面会分章节详细分析 1.react: 目前最流行的前端框架之一 2.nowa: webpack系列的一个web工具,打包,编译等 3.react-keeper: 一种路由框架 4.ES6,这个不用介绍了吧(眯眼笑) 5.antd-mobile:阿里蚂蚁出的一个前端框架,面对大部分素材够用了 6.no-flux;状态管理的一种组件  这些

浅谈 产品经理、研发、测试,三个冤家如何高效沟通

浅谈 产品经理.研发.测试,三个冤家的那点事(1) 算上实习时间,参加工作已经五年了,一直在从事软件开发和测试的工作,期间也兼职干过一部分产品经理的事情,对这三者之间的微妙关系,颇有感悟. 1. 先来解读一下这三个岗位的"痛点" 聚会的时候,经常碰到以下几种情况,事后想起来,经常会有逗乐的感脚. 做开发的GG们是这样的: 一聊到自己的项目,两眼开始冒光,同时开启了狂喷模式,blabla一堆高大上的专业术语,一方面骂测试人员不懂技术,提的bug根本就不是关键问题,高级的bug他们根本就发

浅谈移动前端的最佳实践(转)

前言 这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距: 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用 文中有误请您提出,以免误人自误 技术选型 单页or多页 spa(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点: ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点: