React应该如何优雅的绑定事件?
2023-09-11 14:16:54 时间
前言
由于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
相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- laravel 事件 & 监听
- iOS代码实现:创建按钮,绑定按钮事件,读取控件值
- 第十六节:读文件,文件的创建,写文件,文件的读写以及鼠标键盘事件和图形绘制
- 你可能不知道的陷阱:C#委托和事件的困惑
- 【Nacos源码之配置管理 二】Nacos中的事件发布与订阅--观察者模式
- React-native 触摸事件
- jquery插件select2事件不起作用(select2-3.5.4)
- react native断点调试--Debug React-Native with VSCode
- Flutter App (一) —— ListView以及GridView的列表展示与Item点击事件
- React动画库之react-transition-group(入场enter、出场exit、初始化appear)
- QWidget标题栏双击事件(QWidget::event里拦截NonClientAreaMouseButtonDblClick)
- 【微信小程序】事件绑定
- jquery动态给子元素绑定事件,将元素内容添加到另一个元素中
- ‘全局事件总线’&‘消息订阅与发布’
- WGDI 分析全基因组复制事件完整流程
- React 滚动事件