• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 2016年度——React.js 最佳实践

2016年度——React.js 最佳实践

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含${Keywords}等相关知识,匿名希望在学习及工作中可以帮助到您
  译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验。2016来了,这应该是React走向成熟的一年,不管你是新手,还是已经对React有所了解,是时候总结一下最佳实践了,让我们看看国外的开发者总结了哪些好的实践吧~


  2015可以算是React之年了,关于其版本发布和开发者大会的话题遍布全球。关于去年React的发展里程碑详情,可以查看我们整理的React 2015这一年。

  2016年最有趣的问题可能是,我们该如何编写一个应用呢,有什么推荐的库或框架?

  作为一个长时间使用React.js的开发者,我已经有自己的答案和最佳实践了,但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣,请留言进行讨论。

  


  如果你只是刚开始接触React.js,请阅读React.js教程,或Pete Hunt的React howto。


  数据处理

  在React.js应用中处理数据超级简单的,但同时还是有些挑战。

  这是因为你可以使用多种方式,来给一个React组件传递属性数据,从而构建出渲染树。但这种方式并不总是能明显地看出,你是否应该更新某些视图。

  2015开始涌现出一批具有更强功能和响应式解决方案的Flux库,让我们一起看看:


  Flux

  根据我们的经验,Flux通常被过度使用了(就是大家在不需使用的场景下,还是使用了)。

  Flux提供了一种清爽的方式存储和管理应用的状态,并在需要的时候触发渲染。

  Flux对于那些应用的全局state(译者注:为了对应React中的state概念,本文将不对state进行翻译)特别有用,比如:管理登录用户的状态、路由状态,或是活跃账号状态。如果使用临时变量或者本地数据来处理这些状态,会非常让人头疼。

  我们不建议使用Flux来管理路由相关的数据,比如/items/:itemId。应该只是获取它并存在组件的state中,这种情况下,它会在组件销毁时一起被销毁。

  如果需要Flux的更多信息,建议阅读The Evolution of Flux Frameworks。


  使用Redux

  Redux是一个JavaScript app的可预测state容器。

  如果你觉得需要Flux或者相似的解决方案,你应该了解一下redux,并学习Dan Abramov的redux入门指南,来强化你的开发技能。

  Rudux发展了Flux的思想,同时降低了其复杂度。


  扁平化state

  API通常会返回嵌套的资源,这让Flux或Redux架构很难处理。我们推荐使用normalizr这类库来尽可能地扁平化state。

  像这样:

const data = normalize(response, arrayOf(schema.user))
state = _.merge(state, data.entities

  (我们使用isomorphic-fetch与API进行通信)


  使用immutable state

  共享的可变数据是罪恶的根源——Pete Hunt, React.js Conf 2015


  不可变对象是指在创建后不可再被修改的对象。

  不可变对象可以减少那些让我们头痛的工作,并且通过引用级的比对检查来提升渲染性能。比如在shouldComponentUpdate中:

shouldComponentUpdate(nexProps) {  
 // 不进行对象的深度对比
 return this.props.immutableFoo !== nexProps.immutableFoo
}


  如何在JavaScript中实现不可变

  比较麻烦的方式是,小心地编写下面的例子,总是需要使用deep-freeze-node(在变动前进行冻结,结束后验证结果)进行单元测试。

return {  
  ...state,
  foo
}
 
return arr1.concat(arr2)

  相信我,这是最明显的例子了。

  更简单自然的方式,就是使用Immutable.js。

import { fromJS } from 'immutable'
const state = fromJS({ bar: 'biz' })  
const newState = foo.set('bar', 'baz')

  Immutable.js非常快,其背后的思想也非常美妙。就算没准备使用它,还是推荐你去看看Lee Byron的视频Immutable Data and React,可以了解到它内部的实现原理。


  Observables and reactive解决方案

  如果你不喜欢Flux/Redux,或者想要更加reactive,不用失望!还有很多方案供你选择,这里是你可能需要的:


  • cycle.js(“一个更清爽的reactive框架”)

  • rx-flux(“Flux与Rxjs结合的产物”)

  • redux-rx(“Redux的Rxjs工具库”)

  • mobservable(“可观测的数据,reactive的功能,简洁的代码”)


  

  路由

  现在几乎所有app都有路由功能。如果你在浏览器中使用React.js,你将会接触到这个点,并为其选择一个库。

  我们选择的是出自优秀rackt社区的react-router,这个社区总是能为React.js爱好者们带来高质量的资源。

  要使用react-router需要查看它的文档,但更重要的是:如果你使用Flux/Redux,我们推荐你将路由state与store或全局state保持同步。

  同步路由state可以让Flux/Redux来控制路由行为,并让组件读取到路由信息。

  Redux的用户可以使用redux-simple-router来省点事儿。


  代码分割,懒加载

  只有一小部分webpack的用户知道,应用代码是可以分割成多个js包的。

require.ensure([], () => {  
  const Profile = require('./Profile.js')
  this.setState({
    currentComponent: Profile
  })
})

  这对于大型应用十分有用,因为用户浏览器不用下载那些很少会使用到的代码,比如Profile页。

  多js包会导致额外的HTTP请求数,但对于HTTP/2的多路复用,完全不是问题。

  与chunk hashing 结合可以优化缓存命中率。

  下个版本的react-router将会对代码分隔做更多支持。

<

您可能想查找下面的文章:

相关文章

  • 2018-12-03详解H5非常重要的28个新特性,新技巧和新技术
  • 2018-12-03html5中canvas学习笔记1-画板的尺寸与实际显示尺寸_html5教程技巧
  • 2017-08-06HTML5 实现一个访问本地文件的实例
  • 2018-12-0320个大大节省你时间的HTML5开发工具
  • 2018-12-03HTML5 script元素async、defer异步加载使用介绍_html5教程技巧
  • 2018-12-03html5中页面可见性的判断(附代码)
  • 2018-12-03HTML5跨域信息交互技术之postMessage代码实例详解
  • 2018-12-03动手打造html5俄罗斯方块的(图文)
  • 2018-12-03html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写?
  • 2018-12-03关于动画应用的6篇文章推荐

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • H5如何使用约束验证API
    • HTML5 Canvas中绘制椭圆的4种方法_html5教程技巧
    • 随着大量 HTML5 应用的出现,如何加强对 JavaScript 的源代码的保护?
    • 如何快速开发多端应用?
    • html5 div布局与table布局详解
    • 自定义html标记替换html5新增元素_html5教程技巧
    • html5指南-6.如何创建离线web应用程序实现离线访问
    • 响应式网页如何使用?总结响应式网页实例用法
    • html5 footer标签怎么用?footer标签的用法实例
    • 基于Vue全家桶开发的前端组件管理平台

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有