介绍
如何在反应中使用箭头函数?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<强>解决这引起的问题
箭头函数不会在函数体内重新定义这的值,这使得在回调中的行为更容易预测,并且避免了这在回调中潜存的bug
下面我们来看一个示例
我们期望点击按钮,改变按钮颜色,代码如下
class BrokenButton extends React.Component {
,使(){
,return (
& lt;才能button onClick={this.handleClick},风格={this.state}比;
Set 才能;background 用红色
& lt;才能/button>
,);
,}
,handleClick (), {
,this.setState({,写成backgroundColor:“red",});
,}
}
渲染(& lt; BrokenButton /祝辞,,. getelementbyid (“root")); 然而,当我们点击按钮时,什么效果都没有,为什么会这样呢
其实,不是handleClick方法没有起作用,因为JavaScript中压根没有方法,JavaScript中只有函数,而函数中这样的存在一些规则,正是这些规则,让上面的handleClick中这个值的变成了空
你需要清楚明白的是:你无法确定一个方法函数中这样的指向,因为它的值跟函数的调用方式有关
除非,你使用箭头函数,因为箭头函数中这样的值是继承自外围作用域
class Button extends React.Component {
,使(){
,return (
& lt;才能按钮
,,onClick={(),=祝辞,this.setState({,写成backgroundColor:“red",})}
风格才能={this.state}
祝辞才能;
Set 才能;background 用红色
& lt;才能/button>
,);
,}
}
渲染(& lt; Button /祝辞,,. getelementbyid (“root")); 现在就对了,接下来,我们继续
<强>浏览器支持
浏览器对箭头函数的支持大概是73%,因为目前,IE并不支持。但如果你已经意识到这一点,并且你还会代码转译,这对你来说就不算什么问题
<>强性能问题
大家都发现了,箭头函数书写起来是非常容易的,但书写忒多的函数,也会造成一些问题
<强>定义函数是昂贵的
浏览器每执行一次=祝辞,就需要创建一个新的函数对象,这其实是一个比较昂贵的操作
当然,如果你不是想构建一个性能超级无敌宇宙螺旋棒的组件,渲染一个非常长的列表或非常大的表格,你也不会发现这是一个问题
所以,如果你的组件只是在页面中渲染个几次,你也没必要忒担心性能这方面的问题
<强>两个相同的箭头函数并不相等
为了让大家意识到这个问题,接下来,我们用==比较一下两个相同的箭头函数相不相等
const a =, x =祝辞,x,
b 才能=,x =祝辞,x;
呈现(
,& lt; div>
,& lt; h4>
断开连接,才能& lt; code> a,以及& lt; code> b, equal by & lt; code>==& lt;/code> ?
,& lt;/h4>
,& lt; p>
{才能a ==, b ?,“是的!“,:,“No : (“}
,& lt;/p>
,& lt;/div>
,. getelementbyid (“root")
); 如果你在渲染中使用箭头函数,那么你在每次调用渲染时都会去创建一个新的函数对象,此时,即使使用PureComponent和shouldComponentUpdate也起不到优化作用
你可以在下面实例中看清这一点,其中,<代码> & lt; PropChangeCounter/比;> import PropChangeCounter 得到“react-armory-prop-change-counter";
class App extends React.Component {
,构造函数(道具){
,超级(道具);
,this.state =,{,电子邮件:““,};
,}
,使(){
,return (
& lt;才能div>
& lt;才能输入
,,占位符=癊mail"
,,value=https://www.yisu.com/zixun/{this.state.email}
onChange={e=>。设置状态({电子邮件:e。target。值})}/>
。设置状态({电子邮件:e。target。值})}/>
. getelementbyid(“根”)),
