从性能的角度
1. 使用React.createClass
如果你使用的是React 15及以下的版本，你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上。
但是需要注意随着React 16版本的发布官方已经将改方法从React中移除。
const App = React.createClass({
handleClick() {
console.log('this > ', this); // this 指向App组件本身
},
render() {
return (
<div onClick={this.handleClick}>test</div>
);
}
});
2. render方法中使用bind
如果你使用React.Component创建一个组件，在其中给某个组件/元素一个onClick属性，它现在并会自定绑定其this到当前组件，解决这个问题的方法是在事件函数后使用.bing(this)将this绑定到当前组件中。
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>test</div>
)
}
}
这种方法很简单，可能是大多数初学开发者在遇到问题后采用的一种方式。然后由于组件每次执行render将会重新分配函数这将会影响性能。特别是在你做了一些性能优化之后，它会破坏PureComponent性能。不推荐使用
3. render方法中使用箭头函数
这种方法使用了ES6的上下文绑定来让this指向当前组件，但是它同第2种存在着相同的性能问题，不推荐使用
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={e => this.handleClick(e)}>test</div>
)
}
}
4.构造函数中bind
为了避免在render中绑定this引发可能的性能问题，我们可以在constructor中预先进行绑定。
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
然后这种方法很明显在可读性和维护性上没有第2种和第3种有优势，但是第2种和第3种由于存在潜在的性能问题不推荐使用，那么现在推荐 ECMA stage-2 所提供的箭头函数绑定。
该方式其实是定义在prototype 上的，各个实例对象共享该方法。所以，单纯从内存空间的消耗上来看，在构造函数内绑定其实是最好的。
但是定义在原型链上的方法，在实际调用该方法的时候，其查找的过程是这样的：
首先检查this 上是否有该方法的定义，如果没有的话，则去prototype 上查找是否有该方法，所以在方法调用的过程中，会经历一次跨原型链的查找。该过程是构造函数内绑定带来的额外的消耗。
5. 在定义阶段使用箭头函数绑定
要使用这个功能，需要在.babelrc种开启stage-2功能，绑定方法如下：
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
使用箭头函数的方式，该方式其实是定义在this 上的，也就是说，在每一个实例化之后的this 都会定义该方法
但是箭头函数的方式，在实际调用的时候，访问的是外层作用缓存的_this， 所以在作用域查找上有一层消耗。
这种方法有很多优化：
- 箭头函数会自动绑定到当前组件的作用域种，不会被call改变
- 它避免了第2种和第3种的可能潜在的性能问题
- 它避免了第4种绑定时大量重复的代码
总结：
如果你使用ES6和React 16以上的版本，最佳实践是使用第5种方法来绑定this
从render的角度
父组件给子组件传递函数时，必须绑定 this
class App extends React.Component<any, any> {
handleClick2;
constructor(props) {
super(props);
this.state = {
num: 1,
title: ' react study'
};
this.handleClick2 = this.handleClick1.bind(this);
}
handleClick1() {
this.setState({
num: this.state.num + 1,
})
}
handleClick3 = () => {
this.setState({
num: this.state.num + 1,
})
};
render() {
return (<div>
<h2>Ann, {this.state.num}</h2>
<button onClick={this.handleClick2}>btn1</button>
<button onClick={this.handleClick1.bind(this)}>btn2</button>
<button onClick={() => this.handleClick1()}>btn3</button>
<button onClick={this.handleClick3}>btn4</button>
</div>)
}
}
前提：子组件内部做了性能优化，如（React.PureComponent）
- 第一种是在构造函数中绑定 this：那么每次父组件刷新的时候，如果传递给子组件其他的 props 值不变，那么子组件就不会刷新；
- 第二种是在 render() 函数里面绑定 this：因为 bind 函数会返回一个新的函数，所以每次父组件刷新时，都会重新生成一个函数，即使父组件传递给子组件其他的 props 值不变，子组件每次都会刷新；
- 第三种是使用箭头函数：父组件刷新的时候，即使两个箭头函数的函数体是一样的，都会生成一个新的箭头函数，所以子组件每次都会刷新；
- 第四种是使用类的静态属性：原理和第一种方法差不多，比第一种更简洁
综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。
网友评论