javascript - react需要bind传参时怎样pure-render
ringa_lee
ringa_lee 2017-04-11 10:42:53
0
3
378

为了优化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等,或很多时候想传递额外的参数,这种时候上述方法就不起作用了,请问下该怎么解决这种问题

ringa_lee
ringa_lee

ringa_lee

全部回覆(3)
刘奇

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

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

迷茫

现象:
刚才试了下,无论是bind arrow funtion还是es8那种函数绑定方式
只要父组件setState或着forceUpdate,子组件的render函数都会执行 -- 除非你在子组件显示的使用shouldComponentUpdate阻止


假设以下均没有使用shouldComponentUpdate优化:
render函数每次执行返回的就是一个vdom而已, 就算每次子组件都执行一遍, 也就是返回一堆vdom而已, 这些调用开销很小(相比一个实际的dom操作)

一轮render后(也就是父组件下所有子组件), 开始进行vdom差异算法,得出真正需要更新的dom, 这时, 虽然render执行了,但是没有进行实际上的dom操作

具体到上面的每个li组件来说, 实际上render只是执行了一个很轻量的js函数而已, 并没有对最后要展示的dom进行操作

黄舟
constructor(props) {
        super(props);
        this. handleClick = this. handleClick.bind(this)
    }

render() {
        const list = this.props.data.list;
        
        <ul>
            {list.map((item, index) => {
                return (
                    <li key={item.id} onClick={this.handleClick(index, item.id)}></li>
                )
            })}
        </ul>
    }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板