V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
TomVista
V2EX  ›  React

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

  •  
  •   TomVista · 2021-07-05 17:19:42 +08:00 · 1595 次点击
    这是一个创建于 997 天前的主题,其中的信息可能已经有所发展或是发生改变。

    伪代码

    category.map(item=>{
    	return (<Category onClick={()=>{this.categorySelected(item)}} />)
    })
    
    
    18 条回复    2021-07-06 12:39:22 +08:00
    mxT52CRuqR6o5
        1
    mxT52CRuqR6o5  
       2021-07-05 17:25:25 +08:00
    category.map(item=>{
    return (<Category categorySelected={this.categorySelected} />)
    })
    TomVista
        2
    TomVista  
    OP
       2021-07-05 17:28:49 +08:00
    @mxT52CRuqR6o5 非组件,例如 div,这种有什么办法? 或者说这个情况,拆分成组件,比较合适?
    yimity
        3
    yimity  
       2021-07-05 17:31:49 +08:00   ❤️ 1
    把 ()=>{this.categorySelected(item)} 这个顶一个 useCallback 包起来的函数试试。
    yimity
        4
    yimity  
       2021-07-05 17:32:16 +08:00
    顶一个 -> 定一个
    mxT52CRuqR6o5
        5
    mxT52CRuqR6o5  
       2021-07-05 17:33:24 +08:00   ❤️ 1
    @TomVista 其实大部分时候不差这点性能,你要是在意就在合适的边界处抽象出组件
    h1104350235
        6
    h1104350235  
       2021-07-05 17:37:14 +08:00   ❤️ 1
    useCallback()试试,搜下 react 性能优化
    zhea55
        7
    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
        8
    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
        9
    FaiChou  
       2021-07-05 17:46:12 +08:00
    加一个 key ? <Category key={item.id.toString()} ... />
    Imindzzz
        10
    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
        11
    Imindzzz  
       2021-07-05 18:04:01 +08:00   ❤️ 1
    不过直觉上这种性能没多大差别吧,写法麻烦了。你可以先测试一下看看。
    zhea55
        12
    zhea55  
       2021-07-05 18:07:08 +08:00   ❤️ 1
    ![example]( )
    muzuiget
        13
    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
        14
    yimity  
       2021-07-06 09:45:26 +08:00
    @muzuiget React 这种事件绑定,框架最终处理成的不是就是委托的么?
    dany813
        15
    dany813  
       2021-07-06 10:27:00 +08:00
    你这箭头函数。。。每次都是一个新的引用
    TomVista
        16
    TomVista  
    OP
       2021-07-06 10:56:33 +08:00
    @dany813 对,就是是想解决 利用箭头函数 传参数导致的 重复更新...
    TomVista
        17
    TomVista  
    OP
       2021-07-06 11:30:54 +08:00
    @yimity 是事件委托,但是循环这种情况 虽然都是 onClick=myFunction,myFunction==myFunction //true,最后到 docment 上会有循环长度数量的事件委托,

    如果扔到 循环的父元素上,会只有一个 onClick=myFunction
    gouflv
        18
    gouflv  
       2021-07-06 12:39:22 +08:00 via iPhone
    @muzuiget react 本来就是委托事件,不需要自己优化
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5927 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 02:37 · PVG 10:37 · LAX 19:37 · JFK 22:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.