不要在 alt 值里使用如 "image", "photo", or "picture"包括圖片含義這樣的詞， 中文也一樣. eslint: jsx-a11y/img-redundant-alt

為什么? 屏幕助讀器已經(jīng)把 img 標(biāo)簽標(biāo)注為圖片了, 所以沒有必要再在 alt 里說明了.

// bad


// good

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

// bad - not an ARIA role


// bad - abstract ARIA role


// good

不要在標(biāo)簽上使用 accessKey 屬性. eslint: jsx-a11y/no-access-key

為什么? 屏幕助讀器在鍵盤快捷鍵與鍵盤命令時(shí)造成的不統(tǒng)一性會(huì)導(dǎo)致閱讀性更加復(fù)雜.

// bad


// good

避免使用數(shù)組的index來作為屬性key的值，推薦使用唯一ID. (為什么?)

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

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

對(duì)于所有非必須的屬性，總是手動(dòng)去定義defaultProps屬性.

為什么? propTypes 可以作為模塊的文檔說明, 并且聲明 defaultProps 的話意味著閱讀代碼的人不需要去假設(shè)一些默認(rèn)值。更重要的是, 顯示的聲明默認(rèn)屬性可以讓你的模塊跳過屬性類型的檢查.

// 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里使用回調(diào)函數(shù). eslint: react/no-string-refs

// bad


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

將多行的JSX標(biāo)簽寫在 ()里. eslint: react/wrap-multilines

// bad
render() {
return 
     
   ;
}

// good
render() {
return (
  

  
);
}

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

對(duì)于沒有子元素的標(biāo)簽來說總是自己關(guān)閉標(biāo)簽. eslint: react/self-closing-comp

// bad


// good

如果模塊有多行的屬性， 關(guān)閉標(biāo)簽時(shí)新建一行. eslint: react/jsx-closing-bracket-location

// bad


// good

使用箭頭函數(shù)來獲取本地變量.

function ItemList(props) {
  return (
    

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

當(dāng)在 render() 里使用事件處理方法時(shí)，提前在構(gòu)造函數(shù)里把 this 綁定上去. eslint: react/jsx-no-bind

為什么? 在每次 render 過程中， 再調(diào)用 bind 都會(huì)新建一個(gè)新的函數(shù)，浪費(fèi)資源.

// 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模塊中，不要給所謂的私有函數(shù)添加 _ 前綴，本質(zhì)上它并不是私有的.

為什么？_ 下劃線前綴在某些語言中通常被用來表示私有變量或者函數(shù)。但是不像其他的一些語言，在JS中沒有原生支持所謂的私有變量，所有的變量函數(shù)都是共有的。盡管你的意圖是使它私有化，在之前加上下劃線并不會(huì)使這些變量私有化，并且所有的屬性（包括有下劃線前綴及沒有前綴的）都應(yīng)該被視為是共有的。了解更多詳情請(qǐng)查看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 的生命周期函數(shù):

可選的 static 方法

constructor 構(gòu)造函數(shù)

getChildContext 獲取子元素內(nèi)容

componentWillMount 模塊渲染前

componentDidMount 模塊渲染后

componentWillReceiveProps 模塊將接受新的數(shù)據(jù)

shouldComponentUpdate 判斷模塊需不需要重新渲染

componentWillUpdate 上面的方法返回 true， 模塊將重新渲染

componentDidUpdate 模塊渲染結(jié)束

componentWillUnmount 模塊將從DOM中清除, 做一些清理任務(wù)

點(diǎn)擊回調(diào)或者事件處理器 如 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 的生命周期函數(shù)，與使用class稍有不同: eslint: react/sort-comp

displayName 設(shè)定模塊名稱

propTypes 設(shè)置屬性的類型

contextTypes 設(shè)置上下文類型

childContextTypes 設(shè)置子元素上下文類型

mixins 添加一些mixins

statics

defaultProps 設(shè)置默認(rèn)的屬性值

getDefaultProps 獲取默認(rèn)屬性值

getInitialState 或者初始狀態(tài)

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 反人類設(shè)計(jì)模式:(), 在 ES6 classes 中無法使用， 官方將在未來的版本里刪除此方法.