Vue / React 为什么大量使用 bind / 箭头函数一篇文章给你讲个通透1. 问题背景真实场景你大概率见过这样的代码 // Reactbutton onClick{this.handleClick.bind(this)}点击/button// 或者button onClick{()this.handleClick()}点击/buttonVue 里虽然不显式写bind但本质上button clickhandleClick/背后也帮你“处理好了 this”。 很多人只知道“不这么写会报错 / this 不对”但问题是❗ 为什么一定要这么写❗ 为什么框架这么依赖这些写法❗ 本质到底是什么2. 核心问题本质分析一句话说透不是 Vue / React 需要 bind而是 JavaScript 的 this 机制决定了你必须处理它核心矛盾❗函数的“调用方式”决定了 this 指向而框架做的事情本质是把你的函数“拿走”然后“换个地方调用”3. 原理讲解this 是怎么丢的来看一个最本质的例子constobj{name:张三,fn(){console.log(this.name)}}constfobj.fnf()// ❗ undefined 为什么因为obj.fn()// this objf()// this window / undefined严格模式✔this 不看“定义在哪”只看“怎么调用”4. 放到框架里看关键理解React / Vue 本质上会做这样的事情// 你写的this.handleClick// 框架内部类似element.addEventListener(click,this.handleClick) 注意element.addEventListener(click,this.handleClick)等价于constfnthis.handleClickfn()// ❗ this 丢了5. 常见错误或误区❌ 误区 1这是框架设计问题 错这是 JS 语言设计问题不是 React/Vue 的锅。❌ 误区 2箭头函数只是写法更简洁 大错特错箭头函数不是“简写”而是✔彻底改变了 this 绑定规则❌ 误区 3bind 是 React 专用 不是任何“函数被传递再调用”的场景都需要事件回调定时器Promise回调函数6. 解决方案分层说明✔ 方案一bind显式绑定this.handleClick.bind(this) 本质functionbind(fn,ctx){returnfunction(...args){returnfn.apply(ctx,args)}}✔ 强制 this 永远指向当前实例✔ 方案二箭头函数词法 this()this.handleClick() 本质没有自己的 this使用外层作用域的 this✔ 一劳永逸不会丢✔ 方案三类字段 箭头函数React 常见classApp{handleClick(){console.log(this)}}✔ 从定义时就绑定 this7. 工程实现真实项目写法React推荐写法classAppextendsReact.Component{handleClick(){console.log(this)}render(){returnbutton onClick{this.handleClick}点击/button}} 为什么推荐✔ 不需要 bind✔ 不会丢 this✔ 可读性强Vue为什么你感觉不到 this 问题exportdefault{methods:{handleClick(){console.log(this)}}} Vue 内部做了这件事this.handleClickthis.handleClick.bind(this)✔ 帮你自动绑定8. 架构或设计思路关键升维这一点非常关键 框架本质是在“调度函数”无论是React 事件系统Vue 模板编译Hooks / 响应式本质都是// 框架掌控执行权framework.run(fn)❗ 一旦函数执行权不在你手里this 就一定会出问题✔ 设计原则总结谁调用函数谁决定 this所以工程上必须要么固定 thisbind要么消灭 this箭头函数9. 性能或优化建议很多人会问❗ 每次 render 都写箭头函数会不会有性能问题button onClick{()this.handleClick()}/ 答案是✔ 小项目完全没问题⚠️ 大列表可能产生大量新函数✔ 更优方案handleClick(){} 避免重复创建函数子组件不必要更新10. 总结认知提升这篇文章你必须带走这 3 句话1. this 不是函数的属性是调用方式的结果2. 框架会“替你调用函数”所以 this 一定会丢3. bind 是修复箭头函数是规避11. 延伸思考你可以再深入想几个问题为什么 hooks 不再用 this为什么函数式组件越来越主流为什么 class 组件逐渐被淘汰 本质答案只有一个❗因为 this 太容易出错不适合大规模工程如果你能理解到这里其实你已经跨过了 “会用框架” → “理解框架设计”的门槛完结撒花✿✿ヽ(°▽°)ノ✿
Vue React 为什么大量使用 bind 箭头函数？一篇文章给你讲个通透
Vue / React 为什么大量使用 bind / 箭头函数一篇文章给你讲个通透1. 问题背景真实场景你大概率见过这样的代码 // Reactbutton onClick{this.handleClick.bind(this)}点击/button// 或者button onClick{()this.handleClick()}点击/buttonVue 里虽然不显式写bind但本质上button clickhandleClick/背后也帮你“处理好了 this”。 很多人只知道“不这么写会报错 / this 不对”但问题是❗ 为什么一定要这么写❗ 为什么框架这么依赖这些写法❗ 本质到底是什么2. 核心问题本质分析一句话说透不是 Vue / React 需要 bind而是 JavaScript 的 this 机制决定了你必须处理它核心矛盾❗函数的“调用方式”决定了 this 指向而框架做的事情本质是把你的函数“拿走”然后“换个地方调用”3. 原理讲解this 是怎么丢的来看一个最本质的例子constobj{name:张三,fn(){console.log(this.name)}}constfobj.fnf()// ❗ undefined 为什么因为obj.fn()// this objf()// this window / undefined严格模式✔this 不看“定义在哪”只看“怎么调用”4. 放到框架里看关键理解React / Vue 本质上会做这样的事情// 你写的this.handleClick// 框架内部类似element.addEventListener(click,this.handleClick) 注意element.addEventListener(click,this.handleClick)等价于constfnthis.handleClickfn()// ❗ this 丢了5. 常见错误或误区❌ 误区 1这是框架设计问题 错这是 JS 语言设计问题不是 React/Vue 的锅。❌ 误区 2箭头函数只是写法更简洁 大错特错箭头函数不是“简写”而是✔彻底改变了 this 绑定规则❌ 误区 3bind 是 React 专用 不是任何“函数被传递再调用”的场景都需要事件回调定时器Promise回调函数6. 解决方案分层说明✔ 方案一bind显式绑定this.handleClick.bind(this) 本质functionbind(fn,ctx){returnfunction(...args){returnfn.apply(ctx,args)}}✔ 强制 this 永远指向当前实例✔ 方案二箭头函数词法 this()this.handleClick() 本质没有自己的 this使用外层作用域的 this✔ 一劳永逸不会丢✔ 方案三类字段 箭头函数React 常见classApp{handleClick(){console.log(this)}}✔ 从定义时就绑定 this7. 工程实现真实项目写法React推荐写法classAppextendsReact.Component{handleClick(){console.log(this)}render(){returnbutton onClick{this.handleClick}点击/button}} 为什么推荐✔ 不需要 bind✔ 不会丢 this✔ 可读性强Vue为什么你感觉不到 this 问题exportdefault{methods:{handleClick(){console.log(this)}}} Vue 内部做了这件事this.handleClickthis.handleClick.bind(this)✔ 帮你自动绑定8. 架构或设计思路关键升维这一点非常关键 框架本质是在“调度函数”无论是React 事件系统Vue 模板编译Hooks / 响应式本质都是// 框架掌控执行权framework.run(fn)❗ 一旦函数执行权不在你手里this 就一定会出问题✔ 设计原则总结谁调用函数谁决定 this所以工程上必须要么固定 thisbind要么消灭 this箭头函数9. 性能或优化建议很多人会问❗ 每次 render 都写箭头函数会不会有性能问题button onClick{()this.handleClick()}/ 答案是✔ 小项目完全没问题⚠️ 大列表可能产生大量新函数✔ 更优方案handleClick(){} 避免重复创建函数子组件不必要更新10. 总结认知提升这篇文章你必须带走这 3 句话1. this 不是函数的属性是调用方式的结果2. 框架会“替你调用函数”所以 this 一定会丢3. bind 是修复箭头函数是规避11. 延伸思考你可以再深入想几个问题为什么 hooks 不再用 this为什么函数式组件越来越主流为什么 class 组件逐渐被淘汰 本质答案只有一个❗因为 this 太容易出错不适合大规模工程如果你能理解到这里其实你已经跨过了 “会用框架” → “理解框架设计”的门槛完结撒花✿✿ヽ(°▽°)ノ✿
