有什么解决 react 循环中,事件总是新的,导致重渲染的方法吗? 搜索的姿势不对,找不到答案

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1248 天前的主题，其中的信息可能已经有所发展或是发生改变。

伪代码

category.map(item=>{
	return (<Category onClick={()=>{this.categorySelected(item)}} />)
})

18 条回复 • 2021-07-06 12:39:22 +08:00

mxT52CRuqR6o5

2021-07-05 17:25:25 +08:00

category.map(item=>{
return (<Category categorySelected={this.categorySelected} />)
})

TomVista

2021-07-05 17:28:49 +08:00

@mxT52CRuqR6o5 非组件,例如 div,这种有什么办法? 或者说这个情况,拆分成组件,比较合适?

yimity

2021-07-05 17:31:49 +08:00

把 ()=>{this.categorySelected(item)} 这个顶一个 useCallback 包起来的函数试试。

yimity

2021-07-05 17:32:16 +08:00

顶一个 -> 定一个

mxT52CRuqR6o5

2021-07-05 17:33:24 +08:00

@TomVista 其实大部分时候不差这点性能，你要是在意就在合适的边界处抽象出组件

h1104350235

2021-07-05 17:37:14 +08:00

useCallback()试试，搜下 react 性能优化

zhea55

2021-07-05 17:44:07 +08:00

import React from 'react'
import PropTypes from 'prop-types'

export default class Category extends React.Component {
static propTypes = {
item: PropTypes.object.isRequired,
}

constructor(props) {
super(props);

this.onCategoryClick = this.onCategoryClick.bind(this)
}

onCategoryClick() {
this.props.onClick(this.props.item);
}

render() {
return (
<div onClick={this.onCategoryClick}>

</div>
)
}
}

zhea55

2021-07-05 17:45:36 +08:00

```Javascript
import React from 'react'
import PropTypes from 'prop-types'

export default class Category extends React.Component {
static propTypes = {
item: PropTypes.object.isRequired,
}

constructor(props) {
super(props);

this.onCategoryClick = this.onCategoryClick.bind(this)
}

onCategoryClick() {
this.props.onClick(this.props.item);
}

render() {
return (
<div onClick={this.onCategoryClick}>

</div>
)
}
}
```

FaiChou

2021-07-05 17:46:12 +08:00

加一个 key ? <Category key={item.id.toString()} ... />

Imindzzz

2021-07-05 18:00:55 +08:00

因为参数变化才需要重新定义，那利用一下 event 对象吧。

const handleClick= (e)=>{
const item = category.find(x=>x.id ===e.target.dataset.id)；
}

category.map(item=>{
return (<div data-id={item.id} onClick={handleClick} />)
})

Imindzzz

2021-07-05 18:04:01 +08:00

不过直觉上这种性能没多大差别吧，写法麻烦了。你可以先测试一下看看。

zhea55

2021-07-05 18:07:08 +08:00

![example](

)

muzuiget

2021-07-05 18:27:31 +08:00

关键词：事件委托，把数组索引存到 dom 上，然后在父组件响应事件，使用 event.target 取的产生事件对象 dom，获取数组索引。

<div onClick={this.categorySelected}>
{category.map((item, i)=>{
return (<Category index={i} />)，
})
</div>

yimity

2021-07-06 09:45:26 +08:00

@muzuiget React 这种事件绑定，框架最终处理成的不是就是委托的么？

dany813

2021-07-06 10:27:00 +08:00

你这箭头函数。。。每次都是一个新的引用

TomVista

2021-07-06 10:56:33 +08:00

@dany813 对,就是是想解决利用箭头函数传参数导致的重复更新...

TomVista

2021-07-06 11:30:54 +08:00

@yimity 是事件委托,但是循环这种情况虽然都是 onClick=myFunction,myFunction==myFunction //true,最后到 docment 上会有循环长度数量的事件委托,

如果扔到循环的父元素上,会只有一个 onClick=myFunction

gouflv

2021-07-06 12:39:22 +08:00 via iPhone

@muzuiget react 本来就是委托事件，不需要自己优化