不要在 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 中無法使用， 官方將在未來的版本里刪除此方法.