Airbnb React/JSX 编码规范

不要在 alt 值里使用如 "image", "photo", or "picture"包括图片含义这样的词， 中文也一样. eslint: jsx-a11y/img-redundant-alt

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

// bad


// good

使用有效正确的 aria role属性值 ARIA roles. eslint: jsx-a11y/aria-role

// bad - not an ARIA role


// bad - abstract ARIA role


// good

不要在标签上使用 accessKey 属性. eslint: jsx-a11y/no-access-key

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

// bad


// good

避免使用数组的index来作为属性key的值，推荐使用唯一ID. (为什么?)

// bad
{todos.map((todo, index) =>
  
)}

// good
{todos.map(todo => (
  
))}

对于所有非必须的属性，总是手动去定义defaultProps属性.

为什么? propTypes 可以作为模块的文档说明, 并且声明 defaultProps 的话意味着阅读代码的人不需要去假设一些默认值。更重要的是, 显示的声明默认属性可以让你的模块跳过属性类型的检查.

// bad
function SFC({ foo, bar, children }) {
  return 
{foo}{bar}{children}
;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};

// good
function SFC({ foo, bar }) {
  return 
{foo}{bar}
;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
};
SFC.defaultProps = {
  bar: "",
  children: null,
};

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

// bad


// good
 { this.myRef = ref; }}
/>

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

// bad
render() {
return 
     
   ;
}

// good
render() {
return (
  

  
);
}

// good, 单行可以不需要
render() {
const body = 
hello
;
return {body};
}

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

// bad


// good

如果模块有多行的属性， 关闭标签时新建一行. eslint: react/jsx-closing-bracket-location

// bad


// good

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

function ItemList(props) {
  return (
    

      {props.items.map((item, index) => (
         doSomethingWith(item.name, index)}
        />
      ))}
    
  );
}

当在 render() 里使用事件处理方法时，提前在构造函数里把 this 绑定上去. eslint: react/jsx-no-bind

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

// bad
class extends React.Component {
  onClickDiv() {
    // do stuff
  }

  render() {
    return 

  }
}

// good
class extends React.Component {
  constructor(props) {
    super(props);

    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv() {
    // do stuff
  }

  render() {
    return 

  }
}

在React模块中，不要给所谓的私有函数添加 _ 前缀，本质上它并不是私有的.

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

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  },

  // other stuff
});

// good
class extends React.Component {
  onClickSubmit() {
    // do stuff
  }

  // other stuff
}

在 render 方法中总是确保 return 返回值. eslint: react/require-render-return

// bad
render() {
(
);
}

// good
render() {
return (
);
}

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

可选的 static 方法

constructor 构造函数

getChildContext 获取子元素内容

componentWillMount 模块渲染前

componentDidMount 模块渲染后

componentWillReceiveProps 模块将接受新的数据

shouldComponentUpdate 判断模块需不需要重新渲染

componentWillUpdate 上面的方法返回 true， 模块将重新渲染

componentDidUpdate 模块渲染结束

componentWillUnmount 模块将从DOM中清除, 做一些清理任务

点击回调或者事件处理器 如 onClickSubmit() 或 onChangeDescription()

render 里的 getter 方法 如 getSelectReason() 或 getFooterContent()

可选的 render 方法 如 renderNavigation() 或 renderProfilePicture()

render render() 方法

如何定义 propTypes, defaultProps, contextTypes, 等等其他属性...

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 {this.props.text}
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

React.createClass 的生命周期函数，与使用class稍有不同: eslint: react/sort-comp

displayName 设定模块名称

propTypes 设置属性的类型

contextTypes 设置上下文类型

childContextTypes 设置子元素上下文类型

mixins 添加一些mixins

statics

defaultProps 设置默认的属性值

getDefaultProps 获取默认属性值

getInitialState 或者初始状态

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()

getter methods for render like getSelectReason() or getFooterContent()

Optional render methods like renderNavigation() or renderProfilePicture()

render

不要再使用 isMounted. eslint: react/no-is-mounted

为什么? isMounted 反人类设计模式:(), 在 ES6 classes 中无法使用， 官方将在未来的版本里删除此方法.