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

react中this指向的使用小结

 更新时间：2025年08月12日 11:29:34   作者：超级无敌大蟑王  
JavaScript中this指向取决于调用方式,React中需绑定this以防undefined,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

在JavaScript当中，this的指向取决于函数调用的上下文，但是在react当中，this通常指向指向问题是一个常见的困扰，如果this没有正确绑定，那么方法中的this很可能会是undefined，导致程序出错

讲之前,先回顾一下JavaScript当中的this指向

this表示函数（方法）当前所关联的对象，并且this的指向是动态的，this的指向完全取决于函数的调用方式

JavaScript当中this指向:

定义：

 this表示函数（方法）当前所关联的对象，并且this的指向是动态的，this的指向完全取决于函数的调用方式,谁调用函数，this 就指向谁（箭头函数和 bind 是例外，需单独记忆）

this常见的指向:

1.在普通函数当中：

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

在这种非严格情况下,函数当中的this指向全局window

    "use strict"
    function a() {
      console.log(this) //undefined
    }
    a()

在这种情况下,严格模式下的全局就是undefined,所以this指向undefined

2.在对象当中

    const person = {
      name: 'cheery',
      "sayHi": function () {
        console.log(this.name); // this 指向person
      }
    };
    person.sayHi()

在这种情况中,this指向person,然后输出的是"Alice"

    const person = {
      "sayHi": function () {
        console.log(this); // this 指向全局对象（非严格模式下是window）
      }
    };
    var a = person.sayHi;
    a() //window

在这种情况中,输出的是window,然后在严格模式下指向的是undefined 

3.特殊情况

箭头函数：
箭头函数没有自己的this,它继承的是外层作用域的this

const obj = {
      name: "bob",
      fuc: function () {
        const arrowFunc = () => {
          console.log(this)
        }
        arrowFunc()
      }
    }
    obj.fuc() //obj

事件处理函数的 this 指向触发事件的 DOM 元素。

    const btn = document.querySelector(".btn")
    btn.addEventListener("click", function () {
      console.log(this) //btn
    })

手动指向：

只有函数对象能够使用apply、call和bind方法   主要作用就是改变函数执行时this的指向，并且立即执行该函数

call:

  const person = {
    fullName: function (city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
    }
    }
    const person1 = {
    firstName: "John",
    lastName: "Doe"
    }
    person.fullName("Oslo", "Norway");
    // 输出: John Doe 正准备去 Oslo, Norway.

apply:

const person = {
    fullName: function (city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
    }
    }
    const person1 = {
    firstName: "John",
    lastName: "Doe"
    }
    person.fullName.apply(person1, ["Oslo", "Norway"]);
    // 输出: John Doe 正准备去 Oslo, Norway.

bind:

    const person = {
    fullName: function (city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
    }
   }
    const person1 = {
    firstName: "John",
    lastName: "Doe"
    }
    const func = person.fullName.bind(person1);
    func("Oslo", "Norway");
    // 输出: John Doe 正准备去 Oslo, Norway.
    person.fullName.bind(person1, "Oslo", "Norway")()

react当中的绑定this指向:

1.bind（this）：

在构造函数当中使用.bind(this)来this的指向绑定，这个方法比较方便，绑定一次即可生效，性能比较好，但是代码比较长

Test1ConstructorBind 继承自React.Component，这是定义 React 类组件的标准方式。

在构造函数中使用this.method.bind(this)为每个事件处理方法绑定this，确保方法内部的this指向组件实例。

import React, { Component } from 'react'

class Test1ConstructorBind extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hello!',
      count: 0,
      isVisible: true,
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleCount = this.handleCount.bind(this)
    this.toggleVisibility = this.toggleVisibility.bind(this)
    this.handleReset = this.handleReset.bind(this)
  }
  //切换消息文本
  handleClick() {
    console.log('方法1 - 构造函数绑定: 当前消息:', this.state.message)
    this.setState({
      message: this.state.message === 'Hello!' ? '你好!' : 'Hello!',
    })
  }
  //增加计数
  handleCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }))
  }
  //切换内容显示 / 隐藏
  toggleVisibility() {
    this.setState((prevState) => ({
      isVisible: !prevState.isVisible,
    }))
  }
  //重置所有状态
  handleReset() {
    this.setState({
      count: 0,
      message: 'Hello!',
      isVisible: true,
    })
  }

  render() {
    return (
      <div>
        <h2>方法1: 构造函数中绑定 this</h2>
        <p>在 constructor 中使用 this.method = this.method.bind(this) 绑定</p>
        <button onClick={this.handleClick}>切换消息</button>
        <span> 当前消息: {this.state.message}</span>
        <br />
        <button onClick={this.handleCount}>增加计数</button>
        <span> 计数: {this.state.count}</span>
        <br />
        <button onClick={this.toggleVisibility}>
          {this.state.isVisible ? '隐藏' : '显示'}内容
        </button>
        {this.state.isVisible && <div>这是可以切换显示/隐藏的内容</div>}
        <br />
        <button onClick={this.handleReset}>重置所有状态</button>
      </div>
    )
  }
}

export default Test1ConstructorBind

2.使用箭头函数：

箭头函数不绑定自己的this，它会捕获所在上下文的this值，使用这种方法无需手动绑定，每次渲染的时候需要创建两个函数实例，可能会影响性能

import React, { Component } from 'react'

class Test2ArrowFunction extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hello!',
      count: 0,
      isVisible: true,
    }
    // 使用箭头函数时，不需要在构造函数中绑定
  }

  // 方法2: 使用箭头函数自动绑定this
  handleClick = () => {
    console.log('方法2 - 箭头函数: 当前消息:', this.state.message)
    this.setState({
      message: this.state.message === 'Hello!' ? '你好!' : 'Hello!',
    })
  }

  handleCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }))
  }

  toggleVisibility = () => {
    this.setState((prevState) => ({
      isVisible: !prevState.isVisible,
    }))
  }

  handleReset = () => {
    this.setState({
      count: 0,
      message: 'Hello!',
      isVisible: true,
    })
  }

  render() {
    return (
      <div>
        <h2>方法2: 箭头函数自动绑定 this</h2>
        <p>使用箭头函数语法，this 自动绑定到组件实例</p>
        <button onClick={this.handleClick}>切换消息</button>
        <span> 当前消息: {this.state.message}</span>
        <br />
        <button onClick={this.handleCount}>增加计数</button>
        <span> 计数: {this.state.count}</span>
        <br />
        <button onClick={this.toggleVisibility}>
          {this.state.isVisible ? '隐藏' : '显示'}内容
        </button>
        {this.state.isVisible && <div>这是可以切换显示/隐藏的内容</div>}
        <br />
        <button onClick={this.handleReset}>重置所有状态</button>
      </div>
    )
  }
}

export default Test2ArrowFunction

3.使用内联bind：

组件较小且方法简单，需要快速传递参数，方法只在一处使用，无需复用。

大型列表渲染，性能敏感的组件，方法需要被多次复用（如传递给子组件）。

import React, { Component } from 'react'

class Test4InlineBind extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hello!',
      count: 0,
      isVisible: true,
    }
  }

  handleClick() {
    console.log('方法4 - 内联bind: 当前消息:', this.state.message)
    this.setState({
      message: this.state.message === 'Hello!' ? '你好!' : 'Hello!',
    })
  }

  handleCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }))
  }

  toggleVisibility() {
    this.setState((prevState) => ({
      isVisible: !prevState.isVisible,
    }))
  }

  handleReset() {
    this.setState({
      count: 0,
      message: 'Hello!',
      isVisible: true,
    })
  }

  render() {
    return (
      <div>
        <h2>方法4: 内联 bind 方法</h2>
        <p>
          在 render 中使用 onClick=this.handleClick.bind(this) 语法（性能较差）
        </p>
        <button onClick={this.handleClick.bind(this)}>切换消息</button>
        <span> 当前消息: {this.state.message}</span>
        <br />
        <button onClick={this.handleCount.bind(this)}>增加计数</button>
        <span> 计数: {this.state.count}</span>
        <br />
        <button onClick={this.toggleVisibility.bind(this)}>
          {this.state.isVisible ? '隐藏' : '显示'}内容
        </button>
        {this.state.isVisible && <div>这是可以切换显示/隐藏的内容</div>}
        <br />
        <button onClick={this.handleReset.bind(this)}>重置所有状态</button>
        <div>
          <small>
            注意：这种方法每次渲染都会创建新的函数，影响性能，不推荐在生产环境中使用。
          </small>
        </div>
      </div>
    )
  }
}

export default Test4InlineBind

4.使用内联箭头函数：

语法简洁，自动绑定this，可直接传递参数

每次渲染都会创建新的函数实例，可能影响性能

import React, { Component } from 'react'

class Test3InlineArrow extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hello!',
      count: 0,
      isVisible: true,
    }
  }

  render() {
    return (
      <div>
        <h2>方法3: 内联箭头函数</h2>
        <p>
          在 render 中使用 onClick={() => this.handleClick()} 语法（性能较差）
        </p>
        <button
          onClick={() => {
            console.log('方法3 - 内联箭头函数: 当前消息:', this.state.message)
            this.setState({
              message: this.state.message === 'Hello!' ? '你好!' : 'Hello!',
            })
          }}
        >
          切换消息
        </button>
        <span> 当前消息: {this.state.message}</span>
        <br />
        <button
          onClick={() => {
            this.setState((prevState) => ({
              count: prevState.count + 1,
            }))
          }}
        >
          增加计数
        </button>
        <span> 计数: {this.state.count}</span>
        <br />
        <button
          onClick={() => {
            this.setState((prevState) => ({
              isVisible: !prevState.isVisible,
            }))
          }}
        >
          {this.state.isVisible ? '隐藏' : '显示'}内容
        </button>
        {this.state.isVisible && <div>这是可以切换显示/隐藏的内容</div>}
        <br />
        <button
          onClick={() => {
            this.setState({
              count: 0,
              message: 'Hello!',
              isVisible: true,
            })
          }}
        >
          重置所有状态
        </button>
        <div>
          <small>
            注意：这种方法每次渲染都会创建新的函数，影响性能，不推荐在生产环境中使用。
          </small>
        </div>
      </div>
    )
  }
}

export default Test3InlineArrow

到此这篇关于react中this指向的使用小结的文章就介绍到这了,更多相关react this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React样式冲突解决问题的方法

    React样式冲突解决问题的方法

    本文主要介绍了React样式冲突解决问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • React实现一个高度自适应的虚拟列表

    React实现一个高度自适应的虚拟列表

    这篇文章主要介绍了React如何实现一个高度自适应的虚拟列表，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • 浅析React中的受控组件和非受控组件

    浅析React中的受控组件和非受控组件

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

    React 组件中实现事件代理

    React的事件系统和浏览器事件系统相比,主要增加了两个特性：事件代理、和事件自动绑定,本文主要介绍了React 组件中实现事件代理,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • React-Native之截图组件react-native-view-shot的介绍与使用小结

    React-Native之截图组件react-native-view-shot的介绍与使用小结

    这篇文章主要介绍了React-Native之截图组件react-native-view-shot的介绍与使用小结,需本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，要的朋友可以参考下
    2021-08-08
  • React获取url后面参数的值示例代码

    React获取url后面参数的值示例代码

    这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂，文末给大家补充介绍了react获取URL中参数方法，需要的朋友可以参考下
    2022-12-12
  • 创建React项目的三个方式小结

    创建React项目的三个方式小结

    本文主要介绍了创建React项目的三个方式小结,包括create-react-app、Vite和Next.js,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2025-07-07
  • React二维数组的几种声明和使用过程

    React二维数组的几种声明和使用过程

    React二维数组声明需注意结构与值的可变性,正确方法包括直接赋值或动态初始化,避免使用const map=[[]]导致长度固定,动态扩展时应先定义一维数组再添加元素,确保数组大小可变
    2025-07-07
  • React中的受控组件与非受控组件详解

    React中的受控组件与非受控组件详解

    在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下
    2023-08-08
  • Express+React+Antd实现上传功能(前端和后端)

    Express+React+Antd实现上传功能(前端和后端)

    这篇文章主要介绍了Express+React+Antd实现上传功能(前端和后端),本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-04-04

最新评论