react关于事件绑定this的四种方式

张利勇发布于2019-08-22 15:12 / 1524人阅读

摘要：在组件中，每个方法的上下文都会指向该组件的实例，即自动绑定为当前组件而且还会对这种引用进行缓存，以达到和内存的最大化。

在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件,而且react还会对这种引用进行缓存，以达到cpu和内存的最大化。在使用了es6 class或者纯函数时，这种自动绑定就不复存在了，我们需要手动实现this的绑定
以下是几种绑定的方法:

bind方法
直接绑定是bind（this）来绑定，但是这样带来的问题是每一次渲染是都会重新绑定一次bind；

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

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

    render() {
        return (
            
                
            
        );
    }
}

构造函数内绑定
在构造函数 constructor 内绑定this，好处是仅需要绑定一次，避免每次渲染时都要重新绑定，函数在别处复用时也无需再次绑定

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
        this.del=this.del.bind(this)
    }

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

    render() {
        return (
            
                
            
        );
    }
}

::不能传参
如果不传参数使用双冒号也是可以

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

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

    render() {
        return (
            
                
            
        );
    }
}

箭头函数绑定
箭头函数不仅是函数的"语法糖"，它还自动绑定了定义此函数作用域的this，因为我们不需要再对它们进行bind方法：

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };

    }

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

    render() {
        return (
            
                
            
        );
    }
}

以上几种方法都可以实现this绑定，使用那种各自的习惯；
希望大家喜欢，也希望大家指点错误，也可以加入qq群439667347，大家一起讨论，一起进步，后续更新中...

云服务器 GPU云服务器对数据仓库分析的四种方式 activity的四种状态数据迁移的四种方法 java中线程的四种状态

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93260.html

react创建组建的四种方式

摘要：原由写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客叙述我们在用的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时省力。原由：写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种(createClass, component, ...

XanaHopper 2019-08-20 16:06 评论0 收藏0
React基础再回顾

摘要：方法一必须在这里绑定方法二使用属性初始化器语法需要开启以上方法三在使用时绑定方法四在回调函数中使用箭头函数渲染的时候都会创建一个不同的回调函数。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。从16年夏天初学React，到17年正式投入到工作中使用，直到现在V16.2发版，React发生了巨大的变化，最近在工作中使用时遇到很多基础不是非常清晰，借此再...

2450184176 2019-08-22 15:16 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
玩转 React（六）- 处理事件

摘要：绑定事件处理函数指向的四中方式以及他们的优缺点。内部自己实现了一套高效的事件机制，为了提高框架的性能，通过事件冒泡，只在节点上注册原生的事件，内部自己管理所有组件的事件处理函数，以及事件的冒泡捕获。前面的文章介绍了 React 的 JSX 语法、组件的创建方式、组件的属性、组件的内部状态以及组件的生命周期。另外，还顺带说了各个知识点要重点注意的事情，以及我在项目实践中的一些经验。如果...

Astrian 2019-08-21 17:28 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0