带你找出react中，回调函数绑定this最完美的写法！
原创带你找出react中，回调函数绑定this最完美的写法！
原创
相信每一个人写过
react的人都对react组件的的this绑定有或多或少的了解
在我看来，有若干种this写法，我们通过本文，一步步找优缺点，筛选出最完美的react this写法！（有点小激动）
1、远古时代 React.createClass
说实话，在我接触react的时候，这种写法就只在相关文章见到了。React.createClass会自动绑定所有函数的this到组件上
React.createClass({
fn() {
// this 指向组件本身
console.log(this);
},
render() {
return <div onClick={this.fn}></div>;
}
});react 0.13开始就已经支持class声明组件了。react 16已经废弃了这种写法，这里就不讨论了。直接淘汰
2、错误示范
class App extends React.Component {
fn() {
console.log(this);
}
render() {
return <div onClick={this.fn}></div>;
}
}这种写法，最终打印this是指向undefined。原因在于上面的事件绑定函数调用可以看作如下。
// 伪代码
onClick = app.fn;
onClick();在onClick进行调用时，this的上下文是全局，由于是在es module中，全局this指向undefined，所以这个错误示范的事件处理函数中的this不是指向组件本身的
3、利用proposal-class-public-fields直接绑定箭头函数
class App extends React.Component {
fn = () => {
console.log(this);
};
render() {
return <div onClick={this.fn}></div>;
}
}目前
proposal-class-public-fields仍处于提案阶段，需要借助@babel/plugin-proposal-class-properties这个 babel 插件在浏览器中才能正常工作
经过babel转换，等价于以下的代码
class App extends React.Component {
constructor(props) {
super(props);
this.fn = () => {
console.log(this);
};
}
render() {
return <div onClick={this.fn}></div>;
}
}可以看出，3和2从最大的区别在于，3将fn直接绑定在实例的属性上（2是绑定在原型的方法上），并利用箭头函数继承父级this作用域达到了this绑定的效果。
优点：代码十分简洁，不需要手动写bind、也不需要在constructor中进行额外的操作
缺点：很多文章都提到这是一种完美写法，但其实每一个实例在初始化的时候都会新建一个新事件回调函数（因为绑定在实例的属性上，每个实例都有一个fn的方法。本质上，这是一种重复浪费），所以其实并不是很完美
4、Constructor中使用 bind
class App extends React.Component {
constructor(props) {
super(props);
this.fn = this.fn.bind(this);
}
fn() {
console.log(this);
}
render() {
return <div onClick={this.fn}></div>;
}
}优点：fn函数在组件多次实例化过程中只生成一次（因为是用实例的fn属性直接指向了组件的原型，并绑定了this属性）
缺点：代码写起来比较繁琐，需要在constructor中，手动绑定每一个回调函数
5、在render中进行bind绑定
class App extends React.Component {
fn() {
console.log(this);
}
render() {
return <div onClick={this.fn.bind(this)}></div>;
}
}优点：fn函数多次实例化只生成一次，存在类的属性上，类似于4，写法上比4稍微好一点。
缺点：this.fn.bind(this)会导致每次渲染都是一个全新的函数，在使用了组件依赖属性进行比较、pureComponent、函数组件React.memo的时候会失效。
最关键的是5的写法会被6全方面吊打完爆
6、箭头函数内联写法
class App extends React.Component {
fn() {
console.log(this);
}
render() {
return <div onClick={() => fn()}></div>;
}
}优点：
1、写法简洁
2、与2-5的写法相比，6写法最大的最大好处就是传参灵活
3、全面吊打写法4，相同的缺点，但是多了传参数灵活。如果需要渲染一个数组，并且数组根据不同项，事件处理不一样时，2-5就很尴尬了
const arr = [1, 2, 3, 4, 5];
class App extends React.Component {
fn(val) {
console.log(val);
}
render() {
return (
<div>
{arr.map(item => (
// 采用 6的写法，要打印数组这一项就很方便
<button onClick={() => this.fn(item)}>{item}</button>
))}
</div>
);
}
}网上看多文章都在使用3的方案的时候推荐使用闭包传参实现该效果
const arr = ["1", "2", "3", "4", "5"];
class App extends React.Component {
fn = val => () => {
console.log(val);
};
render() {
return (
<div>
{arr.map(item => (
// 每次也生成了全新的函数了
<button onClick={this.fn(item)}>{item}</button>
))}
</div>
);
}
}经过前面的分析。使用这种写法，还不如直接使用6的内联写法，两种每次都是返回全新的函数，而且，少了一次返回闭包函数的开销。
缺点： 每次渲染都是一个全新的函数，类似于5的缺点，在使用了组件依赖属性进行比较、pureComponent、函数组件React.memo的时候会失效
7、函数组件的useCallback
虽然函数组件无this一说法，但既然讲到react回调函数，还是提一下
在hook出现之前，函数组件是不能保证每次的回调函数都是同一个的，(虽然可以把回调提到函数作用域外固定，但都是一些 hack 的方法了)
const App = () => {
// 每次都是全新的
return <div onClick={() => console.log(2333)}></div>;
};有了hook。我们便可以使用useCallback固定住回调
const App = () => {
const fn = useCallback(() => console.log(2333), []);
// 每次都是固定
return <div onClick={fn}></div>;
};有没有发现。其实很类似class组件的将回调挂在class上，嗯，这就hook强大的地方，利用了react fiber，挂在了它的memorizeState上，实现了能在多次渲染中保持（这就不展开讲了）。缺点还是和上面提过的，参数传递不方便，如渲染数组
8、（最完美）的写法？
当然，如果不使用内联写法又获取到参数行不行呢。当然也是可以的，利用元素的自定义属性data-属性传递参数
const arr = ["1", "2", "3", "4", "5"];
class App extends React.Component {
constructor(props) {
super(props);
this.fn = this.fn.bind(this);
}
fn(e) {
// 1 2 3 4 5
console.log(e.target.dataset.val);
}
render() {
return (
<div>
{arr.map(item => (
// 每次也生成了全新的函数了
<button data-value={item} onClick={this.fn}>
{item}
</button>
))}
</div>
);
}
}orz! 这是最完美写法了吧！不考虑代码繁琐的情况下，既正确绑定了this，又不会多次实例化函数，又能渲染数组。。
其实还是错误的...data-xxx属性只能传递string类型的数据，因为是附加给html的，react会进行一步JSON.stringify的操作，如果你传递一个对象，打印出来是value: "[object Object]"。果然，就算是为了获取字符串参数，也不推荐这种写法。可以，但没必要！
9、最省事的写法？
有一位大佬写了一个 babel 插件babel-plugin-react-scope-binding的插件，能够实现 将2的错误示范自动转化内联函数,更牛逼的是还能传参。介绍。确实是最省事的写法，不过很容易引起歧义，也有上面提到的问题
好吧，感谢你看到这里，废话连篇一篇文章，其实似乎并没有找回完美的写法。。。
下面说说本人的一些愚见吧
在平时写代码中，在render没有非常大的开销情况下（也没有依赖组件的某些属性进行性能优化、没使用 pureComponent）， 会优先使用纯内联的写法（无论是函数组件还是 class 组件）。因为重新创建函数开销我觉得不是特别大的，并且内联我觉得还有最大的好处就是，看到一个事件调用，不需要再点到事件函数调用的地方...减少了飞来飞去的情况，而且上面也提到，内联传递参数是非常方便的。在实在遇到性能问题，再考虑优化。无需为了优化而优化
最近春招季，看完这篇文章，虽然还是找不出最完美的react绑定事件写法，但是面试官提起react绑定事件的几种区别时，相信大家都能答出来了。。。。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。