React 开发中的几个注意点

1. this is undefined

参考问题http://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function
当你用es6语法写react的时候，用以下方法绑定事件，会发现this指针undefined，此时会抛出setState is not a function 错误，原因是采用es6写法，react没有帮你自动注入this，而如果你采用React.createClass，则帮你自动注入this，不会出现这种错误

class PlayerControls extends React.Component {  constructor(props) {    super(props);    this.state={        loopActive:false    };  }  onToggleLoop(event) {    // "this is undefined??" <--- here    this.setState({loopActive: !this.state.loopActive});  }  render() {    return (      <div className="player-controls">        <a          className="player-control-icon"          onClick={this.onToggleLoop}        />        test        </a>      </div>    );  }

解决方案：
1.使用箭头函数

<a className="player-control-icon" onClick={(e)=>this.onToggleLoop(e)}/>test</a>

2.在constructor注入this

constructor(props) {    super(props);    this.state={        loopActive:false    };    this.onToggleLoop = this.onToggleLoop.bind(this);  }

3.在绑定事件的时候，注入this

<a className="player-control-icon" onClick={this.onToggleLoop.bind(this)}/>test</a>

4.使用React.createClass方式创建组件

5.使用一些自动绑定this 的装饰器库

2. 阻止事件冒泡

e.stopPropagation() 来阻止事件冒泡到 document，这时候是行不通的，参见 Event delegation，因为 e.stopPropagation 是内部“合成事件” 层面的，解决方法是要用 e.nativeEvent.stopImmediatePropagation()；
e.preventDefault();可以正常使用

3.渲染列表需要绑定key id

function ListItem(props) {  // Correct! There is no need to specify the key here:  return <li>{props.value}</li>;}function NumberList(props) {  const numbers = props.numbers;  const listItems = numbers.map((number) =>    // Correct! Key should be specified inside the array.    <ListItem key={number.toString()}              value={number} />  );  return (    <ul>      {listItems}    </ul>  );}