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

item

sele

cted

onclick

18 replies • 2021-07-06 12:39:22 +08:00

mxT52CRuqR6o5

Jul 5, 2021

1

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

TomVista

OP

Jul 5, 2021

2

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

yimity

Jul 5, 2021

1

3

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

yimity

Jul 5, 2021

4

顶一个 -> 定一个

mxT52CRuqR6o5

Jul 5, 2021

1

5

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

h1104350235

Jul 5, 2021

1

6

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

zhea55

Jul 5, 2021

7

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

Jul 5, 2021

8

```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>
)
}
}
```

ethusdt

Jul 5, 2021

9

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

Imindzzz

PRO

Jul 5, 2021

10

因为参数变化才需要重新定义，那利用一下 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

PRO

Jul 5, 2021

1

11

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

zhea55

Jul 5, 2021

1

12

![example](

)

muzuiget

Jul 5, 2021

13

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

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

yimity

Jul 6, 2021

14

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

dany813

Jul 6, 2021

15

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

TomVista

OP

Jul 6, 2021

16

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

TomVista

OP

Jul 6, 2021

17

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

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

gouflv

Jul 6, 2021 via iPhone

18

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