javascript - react需要bind传参时怎样pure-render

问题描述

问 题

为了优化react的性能，我们都知道尽量减少re-render的次数，对于使用bind肯定都会re-render

class someComp extends Component {    
    handleClick() {
    
    }

    render() {
        const list = this.props.data.list;
        
        <ul>
            {list.map((item, index) => {
                return (
                    <li key={item.id} onClick={this.handleClick.bind(this, index, item.id)}></li>
                )
            })}
        </ul>
    }
}

如上，因为每次bind后函数指向都是一个新的地址，因此不管list有没有变化，这个组件都re-render掉了

因此都会注意把handleClick放在constructor中或ES8的方法等等，参考not use bind

但我若需要传递参数时，如上述想传递每条数据的id和index等，或很多时候想传递额外的参数，这种时候上述方法就不起作用了，请问下该怎么解决这种问题

解决方案

你这个是不会re-render的，原因在于virtual node并没有发生改变，你改变的只是绑定的函数而已，绑定的函数还不是立即就会执行的，不影响视图。

如果你执意觉得这种有问题，你可以将li抽象成子组件，item和index直接传递进去，handleClick由子组件监听，确实需要这个组件里面的环境的话，你用child-parent的沟通方式处理就行了。

这篇关于javascript - react需要bind传参时怎样pure-render的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！