react 传参为啥使用箭头函数?

Posted 2023-03-15

<List
bordered
dataSource=state.list
renderItem=(item,index) => (
<List.Item onClick=()=> deleteItem(index)>item</List.Item>
)
/>

这个组件中向deleteItem传递index参数为什么要加个箭头函数

参考技术A 避免this指向的问题
你的代码发的不全，

是否是下面这种情况呢？
<DeleteItem index=()=>Item/>追问

追答

你还是发这个组件完整的代码比较好分析

追问

追答

百度知道还是有点问题，我刚提问的时候就看不到
(
deleteItem(index)>item
)
/>

现在开始回答你这张图片，

如果你写成onClick=deleteItem(index) 当然是不可以的
deleteItem(item) 是执行一个方法
而 ()=>deleteItem(item) 是创建了一个匿名函数

刚写了一堆发现没提交出去

写简单点
handleOnClick(index) 执行handleOnClick方法的返回值
()=>handleOnClick(index) 一个匿名方法

追问

为什么（）=>a+b; 返回的是a+b的值；
()=>handleOnClick(index) 不是返回handleOnClick的执行结果呢

追答

（）=> a+b 是一个匿名函数
()=>handleOnClick(index) 也是匿名函数

((）=> a+b) 返回的才是a+b的值

追问

这不就是返回a+b的值吗

如果我把a+b换成handleOnClick(a,b),result就等于handleOnClick的return结果，

那react中的例子onClick为什么=handleOnClick函数，而不是handleOnClick的return结果

追答

上一条答案的一个地方我写错了
((）=> a+b) 返回的才是a+b的值
(()=>a+b)() 少打了括号
为什么onClick接收函数呢，onClick就是一个函数定义，所以它必须接收一个函数

本回答被提问者采纳 参考技术B onClick 的参数必须是一个函数。（）=> ... 定义了一个匿名函数。

[转]为啥在 React 的 Render 中使用箭头函数和 bind 会造成问题

参考技术A

原文转自https://zhuanlan.zhihu.com/p/29266705

在 render 中使用箭头函数或绑定会导致子组件重新渲染，即使 state 并没有改变。作者推荐使用提取子组件或在 HTML 元素中传递数据的方式来避免绑定。
这个例子中，我在 render 中使用一个箭头函数来绑定每个删除按钮对应的用户 ID。

点击 CodeSandbox 来查看及演示完整的 demo。（CodeSandbox 很酷，是一个 React 在线编辑器，可以实时编译和展示当前的界面。）

在 35 行中，我使用了一个箭头函数将一个值传递给了 deleteUser 函数，这就是问题的所在。

要查看为什么会这样，先来看看 User.js：

每次 render 调用时，控制台上都会打印日志。User 已经被声明为 PureComponent。所以 User 应该只在 props 或者 state 改变时才会重新 render。但是，当你点击 delete 按钮时， 对于每一个 User 实例，都会调用 render 。

原因在于：父组件在 props 中传递了一个箭头函数。 箭头函数在每次 render 时都会重新分配（和使用 bind 的方式相同） 。所以，尽管我将 User 声明为 PureComponent，User 的父组件中的箭头函数导致 User 组件为所有的用户实例传递了一个新的函数。所以当点击任何删除按钮时，每个用户实例都会重新 render。

结论：

避免在 render 中使用箭头函数和绑定。否则会打破 shouldComponentUpdate 和 PureComponent 的性能优化。

先来看个例子比较一下在 render 中不使用箭头函数的差异。

点击 CodeSandbox 查看和运行完整 demo。

在这个例子中，index.js 的 render 中没有箭头函数了。相关的数据被传到 User.js：

在 User.js 中，onDeleteClick 调用了在 props 中传递的 onClick 函数，并传递了相应的 user.id。

当你再次点击 delete 按钮时，其他的用户再也不会调用 render 了！

为了最佳性能：

React + Redux 性能优化（一）：理论篇