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 都会新建一个新的函数，浪费资源.

  // bad
  class extends React.Component {
    onClickDiv() {
      // do stuff
    }
    render() {
      return <div onClick={this.onClickDiv.bind(this)} />;
    }
  }
  // good
  class 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 。

  // 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() {
    (<div />);
  }
  // good
  render() {
    return (<div />);
  }