人人FED

专注于前端技术

[译注]React最佳实践

原文地址:react-patterns

 


这篇文章主要讲的是在React组件开发中的一些规范,我也将其实践于项目中,结合我在项目中的实践进行了一些批注,意欲解释其为什么要这么做,希望能给新开发react的小伙伴有一些帮助。

渣翻见谅…


React最佳实践

目录

  1. 概述
  2. 组件的组织结构
    1. 基础组件结构
    2. 规范props格式
  3. 推荐模式
    1. Props数据的处理
    2. State数据的处理
    3. 在render方法中使用三元表达式
    4. View层组件
    5. 容器组件
  4. 反模式
    1. 条件判断语句
    2. 不要在 render 方法中缓存数据
    3. 存在性检验
    4. 根据props来设置state
  5. 实例
    1. 合理命名事件处理函数
    2. 对event合理命名
    3. 使用propType
    4. 使用实体字符
    1. 表格
  6. 工具库
    1. classNames库
  7. 其他
    1. JSX
    2. ES2015
    3. react-rails
    4. rails-assets
    5. flux

概述

本文讨论我们如何正确的在Rails框架中编写React.js。我们一直在努力用最优雅的方式去编写React组件,在多次的失败尝试之后,我们得出了以下这些所推荐的方式;如果有的地方看起来不太适合,那么他可能真的不合适。希望你能让我们也知道哪些地方不合适。

所有的例子基于ES2015语法编写,使用 babel转译以及采用react-rails gem框架。


组件的组织结构

基础组件结构

  • class的定义
    • constructor
    • 事件绑定
    • 组件生命周期事件
    • get/set 数据处理函数
    • render 方法
  • defaultProps
  • proptypes

 

译注:
在willMount 生命周期中virtualDom已经完成,所以可以进行事件绑定
在DidMount 中组件已经被渲染,此时可以用this.refs了,写canvas的同学要注意这点。

 

规范Props格式

两个及以上props换行书写。

推荐模式

Props数据的处理

使用 Get/Set访问器属性 来做数据处理。

参阅:4.2 反模式-不要在 render 方法中缓存数据

State数据的处理

数据处理函数的命名应该在开头处添加一个动词,以增加可读性。

这里的对象方法必须返回一个布尔值

译注:
这里想表达的是,state做为管理组件状态的数据,数据结构应该尽量简单,清晰的表示组件状态,复杂的业务逻辑应该放在父组件通过props传递的方式来获得,所以作者推荐state的处理必须返回布尔值。

参阅: 4.1 反模式-条件判断语句

在render方法中使用三元表达式

render中使用三元表达式来完成渲染判断。

View层组件

以view层为基本最小单元来组织组件。不要创建只能一次性使用的巨无霸组件以及域组件 。

容器组件

使用一个父级容器来进行数据请求,然后用子级组件来进行对应的渲染 — Jason Bonta

Bad

Good

了解更多

相关视频

反模式

条件判断语句

不要在 render方法中写判断语句,多采用三元或短路。

这个情况最好的方法就是使用 父组件容器 来管理state,新的state数据作为props传给子组件。

参阅: 2.2推荐模式-State数据的处理

 

不要在render方法中缓存数据

不要在 render方法中进行数据处理、state/props的保存。

我认为这样的风格是为了性能考量。

参阅:2.1推荐模式-props数据的处理

存在性检验

不要在根组件检查存在性。
使用函数式编写无状态组件时,返回的数据类型应该恒定。

所有组件都必须被渲染。
所以可以增加一个自己觉得合适的默认值——defaultProps

译注:
所有组件都进行渲染主要是为了方便进行控制和管理。
即不需要呈现的组件,渲染为一个空标签即可。

如果一个组件通过条件判断来决定渲染与否,那么可以将存在性检验写在其私有的组件语句中。

上述的存在性检验主要用于对象或者数组。
组件所需要的props中,嵌套的数据类型使用 PropTypes来进行检测。

根据props来设置state

根据props设置state,并且给予props明确的含义。

了解更多: Props in getInitialState Is an Anti-Pattern

实例

合理命名事件处理函数

为了让你给事件处理函数起个有意义的名字,先写事件触发的业务逻辑,之后再进行事件命名。

处理函数的命名应该:
– 以handle作为开始
– 以其对应的事件作为名字的结束 (例如, Click, Change)
– 使用一般现在时

 

如果你需要一些消除歧义的名称,你可以在handle 和事件名中间增加一些补充信息,
比如说你想要区分onChange事件,就可以是:handleNameChangehandleAgeChange。不过若真如此,你可能需要想一下是不是需要创造一个新的组件。

对event合理命名

对于所有者自身的事件使用自定义事件来命名。

使用propType

proptype表示组件所期望的数据类型,以及用于产生有意义的警告。

如果接受到的name字段而不是stringMyValidatedComponent会打出一个警告。

这个组件要求 所传入的props必须有 name 字段。

组件会对要求字段进行验证。

了解更多: Prop Validation

使用实体字符

使用React原生的 String.fromCharCode()来处理特殊字符。

了解更多: JSX Gotchas

表格

table标签中要记得使用tbody

如果你忘记了tbody标签,虽然React不会像浏览器那样觉得你很ZZ然后帮你加一个,但是React会继续渲染JSX即给table里面直接插入tr,最后的结果可能不可控,让你一脸懵逼,所以记得使用 tbody

 

工具库

classNames库

使用 classNames这个库来做类名判断与管理。

了解更多: Class Name Manipulation

其他

JSX

我在的项目组中曾经有一些 CoffeeScript的拥趸,不幸的事情是在写CoffeeScript数据模板的时候,因为JSX进行了抽象导致模板钩子的实现改变了。

所以我们不推荐使用CoffeeScript来编写render方法。

当必须使用CoffeeScript时,你可以看一下我们怎么使用CoffeeScript: CoffeeScript and JSX

ES2015

react-rails现在已经集成了babel,所有babel能做的事情,在Rails中也可以,你可以参阅文档来了解其相关配置。

react-rails

react-rails可以用于所有使用React开发的Rails Apps。它使得Rails与React之间可以完美结合。

rails-assets

rails-assets是一个资源管理框架,用于管理项目中的js/css等静态资源。我这里最流行的React库是Bower它其可以非常方便的添加依赖与react资源。

警告:rails-assets 需要 Sprockets来进行 bower项目的访问。这是rails使用js传统的方法的胜利,这种方法不需要借助js模块化管理工具。

flux

使用Alt来进行flux开发。flux 文档提到建议配合Alt开发。

目录: 框架组件

Tags: ,

5 回复

  1. 存在性校验那里的示例代码中的无状态组件有问题哦,不应该出现this的!

  2. 强哥除了俄语,英语也不错啊。

Anle进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注