React技巧总结

总结

1. 尽量不要在render函数使用bind改变方法的this指向，如下：

// 错误示范
handler() {
  console.log(this)
}
render() {
  return <div onClick={this.handler.bind(this)}>测试</div>
}

可以将bind动作放在constructor中实现：

// 优化之后
constructor(props) {
  super(props)
  this.handler = this.handler.bind(this)
}
handler() {
  console.log(this)
}
render() {
  return <div onClick={this.handler}>测试</div>
}

原理：若放在render函数中，只要每次重新渲染，就会重复bind一次；放在constructor中，只会在组件初始化时执行一次，之后不会再执行。