React Native bind函数

项目中我们经常会遇到如下写法

bind(this)

//列表显示控件
 renderItem={this.renderUserItem.bind(this)}

那么对于一个函数的调用我们到底什么时候需要.bind(this)，什么时候不需要.bind(this)呢？

bind是什么？

/**
     * For a given function, creates a bound function that has the same body as the original function.
     * The this object of the bound function is associated with the specified object, and has the specified initial parameters.
     * @param thisArg The object to be used as the this object.
     * @param args Arguments to bind to the parameters of the function.
     */
    bind(this: T, thisArg: ThisParameterType): OmitThisParameter;
    bind(this: (this: T, arg0: A0, ...args: A) => R, thisArg: T, arg0: A0): (...args: A) => R;
    bind(this: (this: T, arg0: A0, arg1: A1, ...args: A) => R, thisArg: T, arg0: A0, arg1: A1): (...args: A) => R;
    bind(this: (this: T, arg0: A0, arg1: A1, arg2: A2, ...args: A) => R, thisArg: T, arg0: A0, arg1: A1, arg2: A2): (...args: A) => R;
    bind(this: (this: T, arg0: A0, arg1: A1, arg2: A2, arg3: A3, ...args: A) => R, thisArg: T, arg0: A0, arg1: A1, arg2: A2, arg3: A3): (...args: A) => R;
    bind(this: (this: T, ...args: AX[]) => R, thisArg: T, ...args: AX[]): (...args: AX[]) => R;

/**

*对于给定函数，创建与原始函数具有相同主体的绑定函数。

*绑定函数的this对象与指定的对象关联，并具有指定的初始参数。

*@param thisArg要用作此对象的参数的对象。

*@param args用于绑定函数参数的参数。

*/

从上我们可以看出bind函数其实是一个绑定作用

那么我们什么时候才需要使用呢？

就拿bind(this)来说明，先看效果

代码如下：

    private showFlatList() {
        let dataList = this.props.listData
        if (dataList && dataList.length) {
           const extraUniqueKey = () => Math.random().toString();
            return (

                <FlatList
                    style={{
                        backgroundColor: '#ffffff',
                        height: (44 * (dataList.length > 5 ? 4 : dataList.length)+44),
                        marginHorizontal: 15,
                        marginTop: 20,
                    }}
                    //数据绑定
                    data={dataList}
                    // renderUserItem函数中使用到了this，如果不绑定this（bind(this)）会出错
                    renderItem={this.renderUserItem.bind(this)}
                    // renderUserItem函数中如果没有使用到this 可以用以下写法
                    // 或者renderUserItem是个箭头函数 即便使用到了this也不用绑定 
                    // renderItem={this.renderUserItem}

                    // listHeaderView函数中使用到了this，如果不绑定this（bind(this)）会出错
                    ListHeaderComponent={this.listHeaderView.bind(this)}
                    // 这种写法也可以，和bind(this)一个效果
                    // ListHeaderComponent={this.listHeaderView()}
                    // listHeaderView函数中如果没有使用到this 可以用以下写法
                    // ListHeaderComponent={this.listHeaderView}

                    showsVerticalScrollIndicator={false}
                    keyExtractor={extraUniqueKey}
                />


            );
        }
    }

    listHeaderView() {
        return (
            {{  
                backgroundColor: '#E7F1FF',
                height: 44,
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center',
            }}>

                {this.showStr()}
                来来来 

            )
    }

    // 普通函数
    renderUserItem(renderItem: ListRenderItemInfo) {
        let item: NotEvaUserModel = renderItem.item
        return (
            
                {this.showStr()}
                {item.userName}
            
        )
    }
    // 箭头函数
    // renderUserItem = (renderItem: ListRenderItemInfo) => {
    //     let item: NotEvaUserModel = renderItem.item
    //     return (
    //         
    //             {this.showStr()}
    //             {item.userName}
    //         
    //     )
    // }

    showStr(){
        return '我是showStr函数'
    }

综上所述：

1、普通函数中如果使用到this，最好我们要bind(this)来绑定下，某些情况下不绑定也不会出错

如果出现以下错误TypeError: this.showStr is not a function 那就是没有bind(this)的结果

2、箭头函数不用绑定

箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)，

bind将事件操作和函数处理建立联系，bind和箭头函数都能完成这一绑定。不过箭头函数是ES6的特色，

3、ES5语法React.createClass会自动绑定this,ES6的写法不再自动绑定this

绑定this有以下方法：

1.在constructor中进行函数绑定

2.将自定义的函数写成箭头函数形式

3.在调用函数的时候就绑定

4.在调用函数的时候写成箭头函数

如果不想bind(this)就直接使用箭头函数

详情参考：React Native绑定this(bind(this))

参考资料：

React/React Native 的ES5 ES6写法对照表

React Native bind方法 和 () => 函数(ES6)