React应该如何优雅的绑定事件?
2019-01-05 16:00
148 查看
前言
由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的。所以本文想给大家介绍一下React绑定事件的正确姿势。
常见两种种错误绑定事件
class ErrorExample1 extends Component { balabala(e) {console.log(e)} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={(e) => this.balabala(e)}></Balabala> </Wrapper> ) } }
class ErrorExample2 extends Component { balabala(e) {console.log(e)} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.balabala.bind(this)}></Balabala> </Wrapper> ) } }
这是两种最常见的React绑定事件代码,但它为什么是错误的?
每当你的text发生变化,就会rerender,只要组件重新render,那就会重新创建新的事件函数,进而绑定事件,这个过程的开销就是极大极大的浪费。相当于,每次rerender都会创建一次事件函数。
这据说是 Best Practice
class Balabala extends Component { constructor(p) { suprt(p); this.balabala = this.balabala.bind(this); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.balabala}></Balabala> </Wrapper> ) } }
然而我更喜欢的姿势
class Balabala extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (e) => { alert('想你了'); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我}></Balabala> </Wrapper> ) } }
利用箭头函数,帮我们bind this。避免了在构造函数里生命一堆的变量。减少键盘的敲击,延长生命。
当然,还有人会问,这样的写法如何传参呢?以前别人会这样写
class 渣男 extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (e, text) => { alert(text); // alert 滚吧,渣男 } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我.bind(e, '滚吧,渣男')}></Balabala> </Wrapper> ) } }
但是其实,我们可以这样传参,更加简洁明了
class 渣男 extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (text) => (event) => { alert(text); // 你渣我也喜欢,因为是你 } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我( '你渣我也喜欢,因为是你')}></Balabala> </Wrapper> ) } }
动态绑定
基于这个我们还可以针对同一事件修改多个input值,进行事件优化
class ChangeMyName extends Component { 修改渣男名称 = name => { if (!this.handlers[name]) { this.handlers[name] = event => { this.setState({ [name]: event.target.value }); }; } return this.handlers[name]; } render() { return ( <> <input onChange={this.修改渣男名称('男神1号')}/> <input onChange={this.修改渣男名称('渣男2号')}/> </> ) } }
旁门左道,邪教!(个人不喜欢而已)
import autoBind from 'react-autobind'; class Balabala extends Component { constructor() { autoBind(this); } 醒来记得想我 (e) { alert('想你了'); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我}></Balabala> </Wrapper> ) } }
import { BindAll } from 'lodash-decorators'; @BindAll() class Bbb extends Component {}
// 这种写法等同于 bind class Bbb extends Component { balabala(){} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={::this.balabala}></Balabala> </Wrapper> ) } }
基本都大同小异吧,就不过多介绍了。看到这里,你也知道到底应该如何绑定事件了。
个人网站:http://meckodo.com
相关文章推荐
- React中如何优雅的捕捉事件错误
- 如何优雅地在React中处理事件响应
- 在React中如何优雅的处理事件响应详解
- jQuery:如何给动态生成的元素绑定事件?
- 如何在 Repeater 的事件中得到 当前 Item 绑定的数据
- UE4笔记---Slate控件中的代理事件如何绑定UObject方法
- 如何优雅的设计 React 组件
- jQuery:如何给动态生成的元素绑定事件?
- ios 动态添加了按钮,绑定同一个点击事件,如何判断点击的是哪个?
- 如何优雅地拦截按钮事件
- react 绑定事件
- Jquery绑定事件累加以及如何防止累加
- 动态加载指令时如何绑定事件(angularjs1)
- jquery绑定事件时如何向事件函数里传参数
- JQuery绑定事件 时如何传递参数
- jQuery:如何给动态生成的元素绑定事件?
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
- 如何在网页中绑定回车键事件
- 在不同的浏览器中如何绑定事件
- 数据库勒索事件频发_应该如何确保不被入侵勒索?