react-bind-once 了解一下?

前端之家收集整理的这篇文章主要介绍了react-bind-once 了解一下?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react-bind-once

react-bind-once是一个将JSX事件句柄的this自动绑定到组件实例的工具
你还在构造函数里一一手动绑定吗?
试试react-bind-once
GitHub
npm

安装

$ npm install react-bind-once --save

使用

import React,{ Component } from 'react';
import bindOnce from 'react-bind-once';

class App extends Component {
    constructor(props) {
        super(props);
        bindOnce(this);
    }

    handleClick() {
        console.log('clicked');
    }

    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

export default App;

背景

绑定到JSX上的事件句柄,最终会变成事件监听的回调,而回调是指向全局作用域的

而我们需要事件句柄指向组件实例,因为里面可能会访问组件实例的属性

使JSX事件句柄的this指向组件实例的方式有四种:

在JSX里面直接绑定this

这样的问题是每次触发事件都要重新绑定一次

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick.bind(this)}>Click</button>
    );
}

包裹一层箭头函数

箭头函数没有this,会保留上级上下文,所以会指向组件实例

这样的问题是每次触发事件都会创建一个箭头函数

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={() => this.handleClick()}>Click</button>
    );
}

在构造函数里手动绑定,这是React官方推荐的方式

但是每一个事件句柄都要在构造函数手动绑定,很麻烦

而且这样做的后果就是方法同时存在于实例和原型上

等号右边的this.handleClick是从原型上获得的

但是等号左边,程序会以为你想赋值给实例

所以实例上有一份该方法,原型上也有一份该方法

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

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick}>Click</button>
    );
}

方法直接写在实例上

这种方式兼具性能和优雅

但是也有问题,每次实例化都会在实例上复制一份,违背了继承的规范

而且必须要写成箭头函数,如果写成普通函数,this仍然指向undefined

handleClick = () => {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick}>Click</button>
    );
}

利益

使用react-bind-once自动帮你把在 原文链接:https://www.f2er.com/react/301540.html

猜你在找的React相关文章