脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React中的this指向

详解React中的this指向

 更新时间：2021年04月26日 08:51:08   作者：小林别闹  
这篇文章主要介绍了React中的this指向的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

打算记流水账一般细数一下 React 中的 this 指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！

起因：

众所周知，React 的设计是响应式的，使用者无需操纵 DOM,操纵数据，页面就会渲染更新。

数据一变就更新，是更新所有的 DOM 吗？当然不是，哪些变了就重新渲染哪些。那就要对数据变化前后的 DOM 进行比较。直接对比真实 DOM 吗？这样性能会很低，React 比较的是虚拟 DOM，虚拟 DOM 也是对象，只不过相较真实 DOM而言，少了很多属性，更“轻”。

如何写虚拟 DOM 呢？原生JS我们可以使用 document.createElement() 方法，创建节点。React 中也可以通过 React.createElement(component, props, children)，但是呢这种写法遇见多层嵌套，就能让人眼花缭乱。于是 JSX “横空出世”，JSX 其实就是,React.createElement 的语法糖，但是我们用起来更加方便，可以直接写成 <p id="test">hello</p> 这种形式。

但是呢问题又又来了！JSX 语法是不被 webpack 识别的，webpack 默认只能处理 .js 后缀名的文件，所以需要借助 Babel 这个 JavaScript 编译器，而 babel 开启了严格模式 **

import React, { Component } from 'react'

export default class index extends Component {
    // speak(){
    //     console.log(this)//输出undefined
    // }
    speak = () => console.log(this)//输出该组件
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}

this 本质上就是指向它的调用者，this 是在函数运行时才绑定,JS 里边普通函数都是 window 调用的，所以指向 window,开启了严格模式之后是 undefined。

(function(){
    console.log(this)//window
})()

在 JSX 中传递的事件不是一个字符串（在原生 JS 的中监听事件，采用的是回调函数的形式，在Vue中给监听事件传递的是字符串变量），而是一个函数（如上面的:onClick={this.speak}），此时onClick即是中间变量，最终是由React调用该函数，而因为开启了严格模式的缘故，this 是undefined,所以处理函数中的this指向会丢失。

经过：

事实上我们需要的是 this 指向当前实例化对象,无疑会使代码编写方便很多。类式组件里边有两地方的this恰好指向当前实例化对象。

1.构造函数

类式组件里面的构造器里面的this是指向实例对象的，这是 ES6 类的特性，

众所周知 Javascript 里面是没有像 C++,JAVA 里面的的类的概念，ES6 类的实现也是基于原型链来实现的，

在 ES6 以前实例化一个对象应该这样：

function Animal(name, age) {
  this.name = name
  this.age = age
}
Animal.prototype.say = function () {
  console.log(this.name)
}
const Dog = new Animal('dog', 3)
Dog.say()  //会在控制台打印出dog

其中的 new 运算符，先产生了一个空对象 {}，然后生成一个 this 指针，将 this 指针指向这个空对象；运行构造函数时，就相当于{}.name=dog,{}.age=3一样的为这个对象动态添加属性。最后将这个生成好的对象付给 Dog,

当我们使用 ES6 的 class 来声明上面这个类的话，代码如下:

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const Dog = new Animal('dog', 3)
Dog.say()  //会在控制台打印出dog

类实现和上面应该大差不差，所以this是指向实例对象的。

2.render 函数

render 函数里面的 this,也是指向实例的。为啥呢？

首先 render 方法是在类式组件的原型上边的，React发现组件是使用类定义的时候，后边就会 new 出来该类的实例，注意这个实例是 React 帮你 new 出来的，随后实例调用 render 方法，将虚拟 DOM 转换为真实 DOM，所以 render 中的this 就是指向实例咯，毕竟是他调用的嘛！，类似的呢，render 是一个生命周期钩子，那其他的生命周期钩子里面的 this也是指向实例组件的。

3.bind 和箭头函数

解决 this 问题呢，要有两个知识储

（1）bind
call apply bind 都是定义在函数原型上边的，用来改变函数 this 指向，传入的第一个参数是 this,后面的参数就是fun1的参数

区别：

  • call 和 bind 传给调用的函数是可以传多个 apply 则是将参数放进一个数组
  • call 和 apply 返回立即执行函数，bind 返回新的函数，bind()() 也是立即执行
  • 使用 bind 绑定 this 后，该函数里面的 this 不能变化了，不论是谁调用
let aa = {
    fun1: function(a,b){
        console.log(this)
        console.log(a-b);
    }
}        
let bb = {
    fun2: function(a,b){
        console.log(this)
        console.log(a+b);
    }
}

aa.fun1.call(bb,11,22);//bb-11
bb.fun2.apply(aa,[11,22]);//aa 33
aa.fun1.bind(bb,11,22)();//bb -11

（2）箭头函数
箭头函数：箭头函数并不会创建自己的执行上下文，所以箭头函数中的this都是外层的this,会向外作用域中，一层层查找this，直到有 this 的定义

const A = {
    arrow:() =>{
        console.log(this)//window
    },
    func:function(){
        this.arrow()//window
        console.log(this)//A
        setTimeout(() => {
            console.log(this)//A
        });
    }
}
A.arrow()
A.func()

结果：

解决方法俺会两，嘿嘿！

方法一：在构造函数中使用bind

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super()
        this.speak = this.speak.bind(this)
        /*解决类中的this问题：this.speak = this.speak.bind(this)，构造器里面的this默认指向实例对象，
      实例对象通过原型链在类的原型上找着fnc函数，通过bind函数将其this指向改为实例对象，并返回一个新的函数
      再将这个新的函数给实例，并取名为fnc*/
    }
    speak(){
        console.log(this)//输出当前实例对象
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}

方法二：将箭头函数赋值给类的属性

import React, { Component } from 'react'

export default class index extends Component {
    speak = () =>{
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按钮</button>
            </div>
        )
    }
}//需要传参的话，可以使用函数柯里化的思想

注意：性能存在差异

使用箭头函数来解决性能会比较低，因为箭头函数不是方法，它们是匿名函数表达式，所以将它们添加到类中的唯一方法是赋值给属性。前面介绍ES6的类的时候可以看出来，ES 类以完全不同的方式处理方法和属性

方法被添加到类的原型中，而不是每个实例定义一次。

类属性语法是为相同的属性分配给每一个实例的语法糖，实际上会在 constructor里面这样实现：

    constructor(){
        super()
        this.speak = () => {console.log(this)}
    }

这意味着新实例被创建时，函数就会被重新定义,丢失了JS实例共享原型方法的优势。而方法一，只是在生成实例时多了一步 bind 操作，在效率与内存占用上都有极大的优势

以上就是详解React中的this指向的详细内容，更多关于React中的this指向的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • es6在react中的应用代码解析

    es6在react中的应用代码解析

    这篇文章主要介绍了es6在react中的应用代码解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-11-11
  • 关于React中setState同步或异步问题的理解

    关于React中setState同步或异步问题的理解

    相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下
    2021-11-11
  • 详解React自定义Hook

    详解React自定义Hook

    在React项目中,我们经常会使用到React自带的几个内置Hooks，如 useState，useContext和useEffect。虽然在React中找不到这些 Hooks，但React提供了非常灵活的方式让你为自己的需求来创建自己的自定义Hooks，想了解更多的，欢迎阅读本文
    2023-04-04
  • React高阶组件的使用浅析

    React高阶组件的使用浅析

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
    2022-08-08
  • 详解如何在React组件“外”使用父组件的Props

    详解如何在React组件“外”使用父组件的Props

    这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React Native自定义控件底部抽屉菜单的示例

    React Native自定义控件底部抽屉菜单的示例

    本篇文章主要介绍了React Native自定义控件底部抽屉菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React根据当前页面路由进行自动高亮示例代码

    React根据当前页面路由进行自动高亮示例代码

    要根据当前页面路由自动高亮顶部菜单项,可以使用 React Router 的 useLocation 钩子来获取当前路径,并根据路径动态设置菜单项的高亮效果,本文给大家介绍了一个完整的示例,展示如何根据当前页面路由自动高亮顶部菜单项,需要的朋友可以参考下
    2024-07-07
  • React封装弹出框组件的方法

    React封装弹出框组件的方法

    这篇文章主要为大家详细介绍了React封装弹出框组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果，继而引发的一系列思考，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • React受控组件与非受控组件深入讲解

    React受控组件与非受控组件深入讲解

    具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
    2022-12-12

最新评论