[小知识点] react 性能
程序员文章站
2023-12-13 21:54:16
场景: jsx 绑定方法 方法有3种 1: clickEye(a, b){ // do something..... } clickEye(a, b){ // do something..... } 2: 3: 总结: 我个人基本抛弃了第二种方法,经常使用的是第三种方法,如果遇到需要传特殊参数,并且 ......
场景: jsx 绑定方法
方法有3种
1:
// 在html中,使用箭头函数,自动绑定this class searchhistory extends react.component {
clickeye(a, b){
// do something.....
}
render(){ return( <button type='primary' appearance='link' onclick={() => { this.clickeye(a, item) }} > // 这里是箭头函数,写在了jsx中 <icon name='eye' style={successicon} /> 查看</button> ) } }
// 这样做的缺点是,每次走render函数时候,都会执行这个箭头函数,当把这个函数作为props传给子组件时候,则子组件每次都会拿到新的props,如果特别在意性能,就尽量少用这种方法。
2:
// 在构造器中绑定this class searchhistory extends react.component { constructor (props) { super(props) this.clickeye = this.clickeye.bind(this) } clickeye(a, b){ // do something..... } render(){ return( <button type='primary' appearance='link' onclick={ this.clickeye } > // 这里不是箭头函数 <icon name='eye' style={successicon} /> 查看</button> ) } }
// 这样做的缺点是,如果有很多方法,则构造器中需要写很多,只为了绑定this。
3:
// 在写函数时候,使用箭头函数,自动绑定当前this class searchhistory extends react.component { constructor (props) { super(props) // 没有在这里绑定 } clickeye = () => { // 这是个箭头函数,自动绑定了当前this。 // do something... } render(){ return( <button type='primary' appearance='link' onclick={ this.clickeye } > <icon name='eye' style={successicon} /> 查看</button> ) } }
// 这样做的缺点是,参数可以拿到event,但是传其他参数,就需要使用bind传参,比较麻烦
总结:
我个人基本抛弃了第二种方法,经常使用的是第三种方法,如果遇到需要传特殊参数,并且从props,或者state中不好拿到的话,会使用第一种方法。需要传特殊组件情况不是很多,我是在使用其他组件时候遇到的。如下图:这是一个第三方table组件,有render函数,需要给button传item,并不需要event,因此采用了第三种写法。