您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在React中正确使用箭头功能

在React中正确使用箭头功能

我了解箭头函数通过不重新创建每个呈现的函数(类似于构造函数中的绑定方式)来使事情更高效。

这不是真的。这取决于您在哪里使用箭头功能。如果Arrowfunction在render方法中使用了它们,那么它们将创建一个新的实例everytimerender,就像bind将如何工作一样。考虑这个例子

<div onClick={()=>{this.onClick()}}>PrevIoUs</div>

在这里,每次调用render都会创建一个匿名函数,而该函数调用时会调用this.onClick

但是考虑下面的情况

onClick = () => {
    console.log("Div is clicked")
}

在上述情况下,arrow函数并非每次都重新创建函数,而是在An arrow function does not have its own this; the this value of the enclosing execution context is used.实例化该类时一次将上下文绑定到React组件。这类似于如何binding works is constructor。这是一部分,proposed class fields for arrow functions不是ES6功能

在您的情况下,您曾经Arrow function定义过prevItem,因此可以获取封闭的React组件的上下文。

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

现在,在它的孩子,即使你调用prevItem任何自定义的背景下,using bind or arrow functionprevItem当父执行,即Main.js会得到其封闭的情况下作出反应的组成部分。而且由于您只希望执行prevItem函数,并且不想从子级传递任何数据到此,因此编写

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

<div onClick={()=>{this.props.onClick()}}>PrevIoUs</div>

根本没用而且由于在创建新的功能只会增加性能含义SecondClassThirdClass每次。您根本不需要将这些功能定义为箭头功能,而只需编写

<ThirdClass type="prev" onClick={this.props.prevItem} />

<div onClick={this.props.onClick}>PrevIoUs</div>

因为它已经绑定在父级中。

其他 2022/1/1 18:21:37 有563人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶