作为老司机使用 React 总结的 11 个经验教训


Posted in Javascript onApril 08, 2017

原文作者:Jolyon Russ
本文编译:胡子大哈

翻译原文:http://huziketang.com/blog/posts/detail?postId=58e83f01a58c240ae35bb8e1
英文连接:11 lessons learned as a React contractor

转载请注明出处,保留原文链接以及作者信息

一开始在 React 路上摸爬滚打的时候,不知道该寻找些什么,但是这些年来,回头总结经验才发现,要找的已经在脑子里了。下面是我自己在学习 React 历程的一些关键点,以及我的一些背景情况。

  • 我已经写了 18 年的代码,其中 13 年是全职专业的老司机了;
  • 其中 6 年时间都专注于 Flash 开发;
  • 直到史蒂夫·乔布斯的公开信表示不支持 Flash;
  • 我刷过 HTML,CSS 和 JS 这几个技能点;
  • 曾经在主流 JavaScript 框架的研究上纠结了很久,当时感觉它们把大量的逻辑都隐藏在了背后;
  • 辞职开始外包生活,主要做原型;
  • 看了很多 React Demo;
  • 2015 年 10 月,正式开始 React 项目生涯并且爱上了它;
  • 2016 年 1 月,改了我在 LinkedIn 上的 Title:React 开发者。

接下来是我所总结的一些经验,希望能对你有所帮助。

1. 多个简单组件比一个高度定制化组件要好

改变 React 组件行为依赖于你传递的 props,这是个很有用的功能。在项目初期就养成一个好的编程习惯对未来很有好处:创建一些通用组件,使其在其他地方也可以使用。

当你开始了项目以后,对于一个组件你可能会不断地扩展这个组件的使用外延。一段时间以后你会发现,你会疲于修复 bug,在 A 场景下修复好以后,又发现在场景 B 和场景 C 下又发现了 bug。

我的建议:如果一个组合组件导致了 bug,那么把它分解成若干个简单组件,即便代码重复也值得。

2. 如果你发现了库中有 bug,尽量提 Issue 和 Pull Request

只要你使用 React,就一定会用到开源软件,不论是 React 核还是 1000 多个可用的 NPM 模块。如果你发现了库中有 bug,那就提 Issue 上去。更好的情况是,如果你 fix 了一个 bug,一定要提 Pull Request 把修复的代码整合进去,因为使用这个库并且遇到 bug 的并不只是你一个人,这样做会使整个生态变得更好。

我的建议:回馈社区,即便你只是修正了文档中的拼写错误也好。

3. 首先完成一次 build 过程,然后再写 React 代码

我知道这并不是一个常见的场景,但是我就遇到过,当我开始一个外包项目并且开始 build 的时候,发现有一些依赖编译的包不存在。进而才发现实际上这个 React 是用于一个 Backbone 项目中的。在 Backbone 中实现 React 组件其实非常简单,使用 Redux 可以在这两个之间进行通信。它们之间的通信必须要通过 Browserify 或者 Webpack 编译到一起才可以。

我的建议:如果在一个现有的项目中应用 React,首先用 Browserify 或者 Webpack 走一遍 build 过程比较好。

4. 对于简单的数据可视化,原生 SVG >= D3

D3 在数据可视化方面做的非常棒,但是如果你只是要做一些简单的数据可视化,那么渲染原生 SVG 就可以满足你的工作需求了。

我的建议:学习一些 SVG 基础,在你需要更复杂功能之前这就够了。Youtube 的前端中心频道前几天刚好播放了关于 SVG 的节目,值得一看。

5. 如果你只有两周的项目期限,保持功能精简

如果你要做的工作只是渲染,那么 React 和 React-DOM 就足够了。

Redux 的处理很耗费时间和精力,它对于处理大项目中的多层 UI 很有用。但是如果你的项目很简单的话,那么通过传递 props 和 callback 就好了,不必要使用 Redux。

我的建议:模板项目是非常有用的,但是如果你想保持项目精简的话,从 React 和 React-DOM 开始是一个很好的选择。

6. 单独依赖于 CSS 动画来移动元素会很慢

我没有办法精确地告诉你什么时候会看到帧速率显著下降,也许是 30 个元素的时候,也许是 300 个元素的时候。但是可以告诉以一些对你有帮助的经验。充分利用 React 的虚拟 DOM,并且保证只在需要的时候进行渲染和重渲染。

就是说只渲染那些在视图窗口中可见的组件。

我的建议:在低配机器上进行测试,同时还要测试边界数据来看一下你的程序在受限的情况下表现如何。

7. 研究模板是一种很好的开始方法,但是...

如果你正在学习新库或者新框架,从模板项目开始是比较好的方法。如果你们公司有自己的模板就更好了。

但是不要认为模板项目可以解决所有问题。实际工作中你会发现,它所实现的根本就不是你想要的那样。如果你没有自己从头开始构建一个项目,那后面可能会出现很多问题。另外,如果你对一个模板项目的各种特征不是很了解的话,你很可能会重构一个它已经存在的功能。

我的建议:把模板项目用在它们最擅长的地方——快速启动项目。不要害怕重构它们,你要让它们按照你的意志去运作,另外,最好提前了解你所使用的模板项目的特性。

8. 保持组件、connected 组件和容器的可控

用 Redux 来 build 的时候,最好要限制组件的个数,同时要尽量保证 actions/reducers 的可复用性。

组件应该只依赖于自己的 props。

Connected 组件应该通过 Redux 来访问应用数据,并且应该只渲染自己的 DOM 和子组件。

容器充当一个演奏师的角色,取数据并且渲染组件。

我的建议:注意保持命名和功能的一致性。

9. 严格的代码检查是一把双刃剑

我开发过各种各样的项目,经历过各种形式的代码检查。从一点代码检查都没有的项目,到甚至连一个悬空逗号都会拒绝提交的项目。

我想我们大多数人都会同意代码质量不仅仅是你用对了空格符和制表符。当打开一个文件时候,代码给你那种赏心悦目的感觉会让你写代码而舒服,而且你的注意力可以专注于你的代码逻辑。

代码检查也可以帮助你发现一些错误,比如常量分配和书写错误,甚至经典的“Undefined is not a function”错误。

我的建议:拥抱你的团队所要求的代码审查规则吧。我在 JS 中使用 ESLint,在 Sass 项目 Atom 中使用 scss-lint。你也可以设置规则来方便转换,如果你要求很严格,不想让不好的代码提交上去的话,pre-push 会执行一个 npm 脚本来做 push 前的检查。

10. 在 Express 项目中进行 React 渲染是可行的

有很多博文介绍如何安装普通应用,但是大多数都假设你是想要一个单页面应用,很少文章介绍如何在一个多页面 Express 应用中渲染单 React 组件。

我的建议:这种情况下,ReactDOMServer 会成为你的朋友。你可以把组件都当成是页面片段,把它们传递给一个模板来渲染。

11. Saga 使我的大脑一团浆糊

Saga 是 Redux 中间件,基于 ES6 的生成器新特性。“生成器定义了可以保持自己 state 的迭代算法”。在实践中它和正常的 JavaScript 工作流是不一样的,因为在另一个基于 Promise 代码执行的时候,这个函数可以在执行过程中暂停。

我应该不是第一个,也不是最后一个说这话的人,Saga 让我的大脑一团浆糊。刚学习 Saga 的时候一团乱麻,不过最终我还是征服了它。不过回头想想,如果我一开始就理解了生成器的话,可能事情发展会变的好一些。

我的建议:如果你是第一次使用 Saga,并且团队中没人有相关的经验的话,你最好还是先理解 Promise 和 Generator,会对你很有帮助。


上面这些是学习 React 以来我自己总结的一些经验。去年对我来讲是很不一样的一年,接触到了不同类型的项目,同时也学到了很多。很期待接下来的时间继续探索些新的事物。比如 React Native。很高兴你能看完本文,希望能对你有所帮助。

如果你认为文章中还需要注意什么,或者添加什么,请让我知道。


我最近正在写一本《React.js 小书》,对 React.js 感兴趣的童鞋

Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
详解angular element()方法使用
Apr 08 #Javascript
angularjs的select使用及默认选中设置
Apr 08 #Javascript
JS排序之冒泡排序详解
Apr 08 #Javascript
JS排序之快速排序详解
Apr 08 #Javascript
JS排序之选择排序详解
Apr 08 #Javascript
Vue异步组件使用详解
Apr 08 #Javascript
利用jQuery解析获取JSON数据
Apr 08 #jQuery
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php之字符串变相相减的代码
2007/03/19 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
深入php self与$this的详解
2013/06/08 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JS实现分页导航效果
2020/02/19 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python装饰器实例大详解
2017/10/25 Python
python中map的基本用法示例
2018/09/10 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
如何理解Python中的变量
2020/06/01 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
Ruby处理CSV数据方法详解
2022/04/18 Ruby