react native 绑定this的几种方式

对于react native 绑定this，我将其归类为以下四种方式：

• bind
• 箭头函数
• ::运算符
• 使用箭头函数定义函数

首先明确观点，我向大家推荐第四种方式：

1.bind

class TestBind extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del(){
        console.log('del')
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={this.del.bind(this)}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}

针对使用bind方法的绑定方式，还有一种优化方案，就是在constructor函数中绑定，这样在性能上会有一定的优化。

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.del = this.del.bind(this);
    }

    del(){
        console.log('del')
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={this.del}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}

2.箭头函数

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del(){
        console.log('del')
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={()=>this.del()}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}

还有一种使用箭头函数定义函数的新写法，我暂时将其归类为第四种方法，将在下文中介绍。

3.使用：：运算符

该运算符现在还在草案阶段，也不支持传入参数，在ES6中暂不支持。在形式上是这样的：

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del(){
        console.log('del')
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={::this.del}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}

4.使用箭头函数定义函数（自动绑定this，推荐）

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del = () => {
        console.log('del')
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={this.del}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}

当需要传入参数时，在调用的时候也需要使用箭头函数来触发

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del = (text) => {
        console.log(text)
    }

    render() {
        return (
            <view>
                <TouchableOpacity onPress={()=>this.del('test text')}>
                    <Text>this is a text</Text>
                </TouchableOpacity>
            </view>
        );
    }
}