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

原文作者: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 感兴趣的童鞋

(0)

相关推荐

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

    原文作者:Jolyon Russ 本文编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e83f01a58c240ae35bb8e1 英文连接:11 lessons learned as a React contractor 转载请注明出处,保留原文链接以及作者信息 一开始在 React 路上摸爬滚打的时候,不知道该寻找些什么,但是这些年来,回头总结经验才发现,要找的已经在脑子里了.下面是我自己在学习 React 历程的一

  • IntelliJ IDEA 老司机居然还没用过 Stream Trace功能(问题小结)

    前言 自从 Java 8 开始,作为程序员的我们都离不开 Stream 相关功能的使用,书写起来那叫一个流畅(这个 feel--).但总是有一些时候,我们对 stream 的操作所要的结果和预期不符,这就需要我们逐步调试,定位问题 常规调试 先来看下面这段代码: public static void main(String[] args) { Object[] res = Stream.of(1,2,3,4,5,6,7,8).filter( i -> i%2 == 0).filter( i ->

  • 老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略

    一.首先安装MySql: 对于MySql来讲在整个过程中是相对独立的安装,并且我的ubuntu在以前做开发的时候就已经安装了MySql,所以以下只给出安装步骤:   1.安装MySql的服务: sudo apt-get install mysql-server 要注意的是安装过程中会提示你设置mysql的root账户的密码:其他就没什么需要注意的地方了. 2.安装MySql的客户端: sudo apt-get install mysql-client 直接输入安装 3.安装MySql的lib依赖

  • 老司机带你解读jQuery插件开发流程

    jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍.第二种则是一般插件开发用到的方式,本文着重讲讲第二种. 插件开发 第二种插件开发方式一般是如下定义 $.fn.pluginName = function() { //your

  • 简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 详解react使用react-bootstrap当轮子造车

    上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react的基础知识 不管有没有,在介绍react之前,我想先介绍一下react-bootstrap 先懂得使用别人造的轮子,就能更快成为老司机. 好的,源代码奉上: git clone https://github.com/lingjiawen/react_bootstrap_demo.git cd react_bootstrap_demo npm install npm

  • webpack手动配置React开发环境的步骤

    React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能... 1. 首先用npm初始化环境 mkdir react-webpack-demo cd react-webpack-demo npm init -y 安装相关软件包 npm install r

  • React+TypeScript进行项目构建案例讲解

        react项目构建可以很简单,但是如果是结合typescript,其实也不是很麻烦,官网也有很明确的说明.有两种办法:     1.直接构建带有typescript的react项目,我们需要增加额外的参数,模版不能使用默认的cra-template.而是使用cra-template-typescript. npx create-react-app tsreactdemo --template typescript           创建完成的成功提示与原来没有太大的区别,直接进入项目路

  • 详解iOS11、iPhone X、Xcode9 适配指南

    更新iOS11后,发现有些地方需要做适配,整理后按照优先级分为以下三类: 单纯升级iOS11后造成的变化: Xcode9 打包后造成的变化: iPhoneX的适配 一.单纯升级iOS11后造成的变化 升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中 UIViewController 的 automaticallyAdjustsScrollViewInsets 属性被废弃了,因此当tableView超出安全区域时,系统自动会调整SafeAre

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

随机推荐