javascript - react 绑定this 与State 提交大家都是怎么做的呢？

Question

我的方式是直接在constructor上绑定，总感觉这样的代码有点傻呼呼的，之前我是在render中绑定，但是那样每次render都会重新绑定，所以换成了这种方式,不知道大家有什么好的方式,在哪里绑定呢？

另外问一下每次更改状态也就是setState的时候 由于是回调原因，主程序走在前面，刚才想到了一个问题，就是假如回调还在队列中，那么我提交state的时候是不是也要用回调保险点呢？ 万一回调队列还没有执行完，那岂不是错误的数据?

Answer 1

我通常使用箭头函数

Answer 2

//可以在调用的时候绑定this引用
class Example extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                //onPress={this.handleOptionsButtonClick.bind(this)}
                onPress={e=>this.handleOptionsButtonClick(e)}
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}
//上面两种都可以
//bind来绑定this引用
//利用箭头函数(它会绑定当前scope的this引用)来调用

Answer 3

用ES6

class Component extends React.Component{
    onClick(e){
        console.log('123');
    }
    
    render(){
        return (
            <p>
                <button onClick={e=>this.onClick(e)}>ok</button>
            </p>
        );
    }
}

Answer 4

建议写在constructor 就像你说的，如果在render中每次都会绑定一次，重复了
其次，在川参数的时候可以考虑下在render中，表现直观

Answer 5

官方的实例是就是在constructor上绑定的，平常我也是这么写的，虽然傻乎乎。但代码很清晰。如果你闲多的话，可以自己再封装个函数。传递数组，改变this指向。

如：

funcA (upNumber, downNumber,...)

Answer 6

你这样写是性能最好的做法，其他都会影响性能，相见：https://daveceddia.com/avoid-...