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

[TomVista]

伪代码

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

[mxT52CRuqR6o5]

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

[TomVista]

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

[yimity]

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

[yimity]

顶一个 -> 定一个

[mxT52CRuqR6o5]

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

[h1104350235]

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

[zhea55]

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]

```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]

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

[xd199153]

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

[xd199153]

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

[zhea55]


[muzuiget]

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

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

[yimity]

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

[dany813]

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

[TomVista]

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

[TomVista]

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

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

[gouflv]

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