Airbnb React/JSX 编码规范

算是最合理的React/JSX编码规范之一了

内容目录

  1. 基本规范
  2. Class vs React.createClass vs stateless
  3. 命名
  4. 声明模块
  5. 代码对齐
  6. 单引号还是双引号
  7. 空格
  8. 属性
  9. Refs引用
  10. 括号
  11. 标签
  12. 函数/方法
  13. 模块生命周期
  14. isMounted

Basic Rules 基本规范

  • 每个文件只写一个模块.
  • 推荐使用JSX语法.
  • 不要使用 React.createElement,除非从一个非JSX的文件中初始化你的app.

创建模块

Class vs React.createClass vs stateless

  • 如果你的模块有内部状态或者是refs, 推荐使用 class extends React.Component 而不是 React.createClass ,除非你有充足的理由来使用这些方法.
    eslint: react/prefer-es6-class react/prefer-stateless-function

      // badconst Listing = React.createClass({
    // ...render() {
    return <div>{this.state.hello}</div>;
    }
    }); // goodclass Listing extends React.Component {
    // ...render() {
    return <div>{this.state.hello}</div>;
    }
    }

    如果你的模块没有状态或是没有引用refs, 推荐使用普通函数(非箭头函数)而不是类:

      // badclass Listing extends React.Component {
    render() {
    return <div>{this.props.hello}</div>;
    }
    } // bad (relying on function name inference is discouraged)const Listing = ({ hello }) => (
    <div>{hello}</div>
    ); // goodfunction Listing({ hello }) {
    return <div>{hello}</div>;
    }

Naming 命名

  • 扩展名: React模块使用 .jsx 扩展名.
  • 文件名: 文件名使用驼峰式. 如, ReservationCard.jsx.
  • 引用命名: React模块名使用驼峰式命名,实例使用骆驼式命名. eslint: react/jsx-pascal-case

    // badimport reservationCard from './ReservationCard';
    
    // goodimport ReservationCard from './ReservationCard';
    
    // badconst ReservationItem = <ReservationCard />;
    
    // goodconst reservationItem = <ReservationCard />;
  • 模块命名: 模块使用当前文件名一样的名称. 比如 ReservationCard.jsx 应该包含名为 ReservationCard的模块. 但是,如果整个文件夹是一个模块,使用 index.js作为入口文件,然后直接使用 index.js 或者文件夹名作为模块的名称:

    // badimport Footer from './Footer/Footer';
    
    // badimport Footer from './Footer/index';
    
    // goodimport Footer from './Footer';
  • 高阶模块命名: 对于生成一个新的模块,其中的模块名 displayName 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 withFoo(), 当传入一个 Bar 模块的时候, 生成的模块名 displayName 应该为 withFoo(Bar).

    为什么?一个模块的 displayName 可能会在开发者工具或者错误信息中使用到,因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么,更好的Debug.

      // bad  export default function withFoo(WrappedComponent) {
    return function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
    }
    } // good export default function withFoo(WrappedComponent) {
    function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
    } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo(${wrappedComponentName})`;
    return WithFoo;
    }
  • 属性命名: 避免使用DOM相关的属性来用作其他的用途。

    为什么?对于style 和 className这样的属性名,我们都会默认它们代表一些特殊的含义,如元素的样式,CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读,更难维护,并且可能会引起bug。

      // bad
    <MyComponent style="fancy" /> // good
    <MyComponent variant="fancy" />

Declaration 声明模块

  • 不要使用 displayName 来命名React模块,而是使用引用来命名模块, 如 class 名称.

    // badexport default React.createClass({
    displayName: 'ReservationCard',
    // stuff goes here
    }); // goodexport default class ReservationCard extends React.Component {
    }

Alignment 代码对齐

  • 遵循以下的JSX语法缩进/格式. eslint: react/jsx-closing-bracket-location

    // bad
    <Foo superLongParam="bar"anotherSuperLongParam="baz" /> // good, 有多行属性的话, 新建一行关闭标签
    <FoosuperLongParam="bar"anotherSuperLongParam="baz"
    /> // 若能在一行中显示, 直接写成一行
    <Foo bar="bar" /> // 子元素按照常规方式缩进
    <FoosuperLongParam="bar"anotherSuperLongParam="baz"
    >
    <Quux />
    </Foo>

Quotes 单引号还是双引号

  • 对于JSX属性值总是使用双引号("), 其他均使用单引号. eslint: jsx-quotes

    为什么? JSX属性 不能包括转译的引号, 因此在双引号里包括像 "don't" 的属性值更容易输入. HTML属性也是用双引号,所以JSX属性也遵循同样的语法.

      // bad
    <Foo bar='bar' /> // good
    <Foo bar="bar" /> // bad
    <Foo style={{ left: "20px" }} /> // good
    <Foo style={{ left: '20px' }} />

Spacing 空格

  • 总是在自动关闭的标签前加一个空格,正常情况下也不需要换行. eslint: no-multi-spacesreact/jsx-space-before-closing

    // bad
    <Foo/> // very bad
    <Foo /> // bad
    <Foo
    /> // good
    <Foo />
  • 不要在JSX {} 引用括号里两边加空格. eslint: react/jsx-curly-spacing

    // bad
    <Foo bar={ baz } /> // good
    <Foo bar={baz} />

Props 属性

  • JSX属性名使用骆驼式风格camelCase.

    // bad
    <FooUserName="hello"phone_number={12345678}
    /> // good
    <FoouserName="hello"phoneNumber={12345678}
    />
  • 如果属性值为 true, 可以直接省略. eslint: react/jsx-boolean-value

    // bad
    <Foohidden={true}
    /> // good
    <Foohidden
    />
  • <img> 标签总是添加 alt 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示,alt 可为空, 或者<img> 要包含role="presentation". eslint: jsx-a11y/img-has-alt

    // bad
    <img src="hello.jpg" /> // good
    <img src="hello.jpg" alt="Me waving hello" /> // good
    <img src="hello.jpg" alt="" /> // good
    <img src="hello.jpg" role="presentation" />
  • 不要在 alt 值里使用如 "image", "photo", or "picture"包括图片含义这样的词, 中文也一样. eslint: jsx-a11y/img-redundant-alt

    为什么? 屏幕助读器已经把 img 标签标注为图片了, 所以没有必要再在 alt 里说明了.

      // bad
    <img src="hello.jpg" alt="Picture of me waving hello" /> // good
    <img src="hello.jpg" alt="Me waving hello" />
  • 使用有效正确的 aria role属性值 ARIA roles. eslint: jsx-a11y/aria-role

    // bad - not an ARIA role
    <div role="datepicker" /> // bad - abstract ARIA role
    <div role="range" /> // good
    <div role="button" />
  • 不要在标签上使用 accessKey 属性. eslint: jsx-a11y/no-access-key

    为什么? 屏幕助读器在键盘快捷键与键盘命令时造成的不统一性会导致阅读性更加复杂.

    // bad
    <div accessKey="h" /> // good
    <div />
  • 避免使用数组的index来作为属性key的值,推荐使用唯一ID. (为什么?)

    // bad
    {todos.map((todo, index) =>
    <Todo{...todo}key={index}
    />
    )} // good
    {todos.map(todo => (
    <Todo{...todo}key={todo.id}
    />
    ))}

Refs

  • 总是在Refs里使用回调函数. eslint: react/no-string-refs

    // bad
    <Fooref="myRef"
    /> // good
    <Fooref={ref => { this.myRef = ref; }}
    />

Parentheses 括号

  • 将多行的JSX标签写在 ()里. eslint: react/wrap-multilines

    // badrender() {
    return <MyComponent className="long body" foo="bar">
    <MyChild />
    </MyComponent>;
    } // goodrender() {
    return (
    <MyComponent className="long body" foo="bar">
    <MyChild />
    </MyComponent>
    );
    } // good, 单行可以不需要render() {
    const body = <div>hello</div>;
    return <MyComponent>{body}</MyComponent>;
    }

Tags 标签

  • 对于没有子元素的标签来说总是自己关闭标签. eslint: react/self-closing-comp

    // bad
    <Foo className="stuff"></Foo> // good
    <Foo className="stuff" />
  • 如果模块有多行的属性, 关闭标签时新建一行. eslint: react/jsx-closing-bracket-location

    // bad
    <Foobar="bar"baz="baz" /> // good
    <Foobar="bar"baz="baz"
    />

Methods 函数

  • 使用箭头函数来获取本地变量.

    function ItemList(props) {
    return (
    <ul>
    {props.items.map((item, index) => ( <Item key={item.key} onClick={() => doSomethingWith(item.name, index)} /> ))}
    </ul>
    );
    }
  • 当在 render() 里使用事件处理方法时,提前在构造函数里把 this 绑定上去. eslint: react/jsx-no-bind

    为什么? 在每次 render 过程中, 再调用 bind 都会新建一个新的函数,浪费资源.

      // badclass extends React.Component {
    onClickDiv() {
    // do stuff
    } render() {
    return <div onClick={this.onClickDiv.bind(this)} />
    }
    } // goodclass extends React.Component {
    constructor(props) {
    super(props); this.onClickDiv = this.onClickDiv.bind(this);
    } onClickDiv() {
    // do stuff
    } render() {
    return <div onClick={this.onClickDiv} />
    }
    }
  • 在React模块中,不要给所谓的私有函数添加 _ 前缀,本质上它并不是私有的.

    为什么?_ 下划线前缀在某些语言中通常被用来表示私有变量或者函数。但是不像其他的一些语言,在JS中没有原生支持所谓的私有变量,所有的变量函数都是共有的。尽管你的意图是使它私有化,在之前加上下划线并不会使这些变量私有化,并且所有的属性(包括有下划线前缀及没有前缀的)都应该被视为是共有的。了解更多详情请查看Issue#1024, 和 #490 。

      // badReact.createClass({
    _onClickSubmit() {
    // do stuff
    }, // other stuff
    }); // goodclass extends React.Component {
    onClickSubmit() {
    // do stuff
    } // other stuff
    }
  • 在 render 方法中总是确保 return 返回值. eslint: react/require-render-return

    // badrender() {
    (<div />);
    } // goodrender() {
    return (<div />);
    }

Ordering React 模块生命周期

  • class extends React.Component 的生命周期函数:

  1. 可选的 static 方法
  2. constructor 构造函数
  3. getChildContext 获取子元素内容
  4. componentWillMount 模块渲染前
  5. componentDidMount 模块渲染后
  6. componentWillReceiveProps 模块将接受新的数据
  7. shouldComponentUpdate 判断模块需不需要重新渲染
  8. componentWillUpdate 上面的方法返回 true, 模块将重新渲染
  9. componentDidUpdate 模块渲染结束
  10. componentWillUnmount 模块将从DOM中清除, 做一些清理任务
  11. 点击回调或者事件处理器 如 onClickSubmit() 或 onChangeDescription()
  12. render 里的 getter 方法 如 getSelectReason() 或 getFooterContent()
  13. 可选的 render 方法 如 renderNavigation() 或 renderProfilePicture()
  14. render render() 方法

  • 如何定义 propTypesdefaultPropscontextTypes, 等等其他属性...

    import React, { PropTypes } from 'react';
    
    const propTypes = {
    id: PropTypes.number.isRequired,
    url: PropTypes.string.isRequired,
    text: PropTypes.string,
    }; const defaultProps = {
    text: 'Hello World',
    }; class Link extends React.Component {
    static methodsAreOk() {
    return true;
    } render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
    }
    } Link.propTypes = propTypes;
    Link.defaultProps = defaultProps; export default Link;
  • React.createClass 的生命周期函数,与使用class稍有不同: eslint: react/sort-comp

  1. displayName 设定模块名称
  2. propTypes 设置属性的类型
  3. contextTypes 设置上下文类型
  4. childContextTypes 设置子元素上下文类型
  5. mixins 添加一些mixins
  6. statics
  7. defaultProps 设置默认的属性值
  8. getDefaultProps 获取默认属性值
  9. getInitialState 或者初始状态
  10. getChildContext
  11. componentWillMount
  12. componentDidMount
  13. componentWillReceiveProps
  14. shouldComponentUpdate
  15. componentWillUpdate
  16. componentDidUpdate
  17. componentWillUnmount
  18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  19. getter methods for render like getSelectReason() or getFooterContent()
  20. Optional render methods like renderNavigation() or renderProfilePicture()
  21. render

isMounted

⬆ 回到顶部

Airbnb React/JSX 编码规范的更多相关文章

  1. 【转】Airbnb React编码规范

    Airbnb的编码规范是在业界非常流行的一套规范,而且它一直都在进化,推出最新技术的规范 原文:https://zhuanlan.zhihu.com/p/20616464 用更合理的方式书写React ...

  2. 【转】JavaScript 风格指南/编码规范(Airbnb公司版)

    原文转自:http://blog.jobbole.com/79484/ Airbnb 是一家位于美国旧金山的公司,本文是其内部的 JavaScript 风格指南/编码规范,在 Github 上有 11 ...

  3. JavaScript 编码规范(中文/Airbnb公司版)

    Airbnb 是一家位于美国旧金山的公司,本文是其内部的 JavaScript编码规范,写得比较全面,在 Github 上有 16,686 + Star,3,080 + fork,前端开发人员可参考. ...

  4. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  5. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  6. python编码规范、js编码规范及IDE的检查插件pylint/eslint等

    一.python规范 参考:https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/的风格规范和语 ...

  7. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

  8. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

  9. 【原】JAVA SE编码规范

    /* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...

随机推荐

  1. restTemplate源码详解深入剖析底层实现思路

    一 准备工作 1 启动一个项目,发布一个restful的get请求,端口设置为8090. @RestController @RequestMapping("/youku1327") ...

  2. 关闭禁用 Redis 危险命令

    Redis 的危险命令主要有: flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键,当 redis k ...

  3. Struts1.3——使用MyEclipse集成工具开发Struts

    前面两篇通过手工写代码,手工配置struts-config.xml文件的方法来开发了一个最简单的struts项目,通过手工的方式旨在学习底层原理细节.当熟悉了以后,我们就不需要再通过纯手工的方式来开发 ...

  4. 【Movie】绿皮书

    今天和室友一起去看了<绿皮书>,一部获得奥斯卡的电影. 起初我是没什么太大期望的,纯粹是因为特价票10块钱,加上身边一个小姐姐的力荐. 看完我觉得,啊不愧是奥斯卡电影啊.推荐. 以下可能会 ...

  5. UICollectionView中的cell包含UIScrollview

    需求:在scrollview的子View不为0,当scrollview的展示的index不为0且向右滑动CollectionView.CollectionView不滑动Cell,而是让scrollvi ...

  6. 使用PL/SQL连接oracle数据库,并将数据进行导出备份和导入恢复

    使用PL/SQL连接oracle数据库,并将数据进行导出备份和导入恢复 这种操作百度一搜一大片,今天整理以前做的项目时自己备份了一下数据库,试着将数据进行导出备份和导入恢复了一下:下面是操作过程: 1 ...

  7. 2018-2-13-安装-aria2

    title author date CreateTime categories 安装 aria2 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 + ...

  8. python发送微信及企业微信消息

    1.发送微信消息 直接使用第三方库 itchat,其文档中有详细使用方式:https://itchat.readthedocs.io/zh/latest/ 如下实例为 发送群聊信息 # -*- cod ...

  9. htop资源管理器

    htop是linux资源管理器,安装后界面如下图: 当我们用安装yum -y htop时,会报错,这是因为需要安装扩展源 yum -y epel 扩展源 安装完扩展源之后,就可以安装了

  10. django里面跨域CORS的设置

    安装 pip install django-cors-headers 添加应用 在settings里面配置 INSTALLED_APPS = ( ... 'corsheaders', ... ) 中间 ...