React组件中的this的具体使用

更新时间：2018年02月28日 11:42:31 作者：keywords

这篇文章主要介绍了React组件中的this的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

React组件的this是什么

通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this：

import React from 'react';

const STR = '被调用，this指向：';

class App extends React.Component{
  constructor(){
    super()
  }

  //测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){

    console.log(`render ${STR}`,this);
    return(
      <div>
        <h1>hello World</h1>
        <label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

结果如图：

可以看到，render函数中的this指向了组件实例，而handler（）函数中的this则为undefined，这是为何？

JavaScript函数中的this

我们都知道JavaScript函数中的this不是在函数声明的时候定义的，而是在函数调用（即运行）的时候定义的

var student = {
  func: function() {
    console.log(this);
  };
};

student.func();
var studentFunc = student.func;
studentFunc();

这段代码运行，可以看到student.func()打印了student对象，因为此时this指向student对象；而studentFunc()打印了window，因为此时由window调用的，this指向window。

这段代码形象的验证了，JavaScript函数中的this不是在函数声明的时候，而是在函数运行的时候定义的；

同样，React组件也遵循JavaScript的这种特性，所以组件方法的‘调用者'不同会导致this的不同（这里的 “调用者” 指的是函数执行时的当前对象）

“调用者”不同导致this不同

测试：分别在组件自带的生命周期函数以及自定义函数中打印this，并在render（）方法中分别使用this.handler(),window.handler(),onCilck={this.handler}这三种方法调用handler（）：

/App.jsx

 //测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);

    this.handler();
    window.handler = this.handler;
    window.handler();

    return(

      <div>
        <h1>hello World</h1>
        <label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

可以看到：

render中this -> 组件实例App对象；
render中this.handler() -> 组件实例App对象 ;
render中window.handler() -> window对象；
onClick ={this.handler} -> undefined

继续使用事件触发组件的装载、更新和卸载过程：

/index.js

import React from 'react'
import {render,unmountComponentAtNode} from 'react-dom'

import App from './App.jsx'


const root=document.getElementById('root')

console.log("首次挂载");
let instance = render(<App />,root);

window.renderComponent = () => {
  console.log("挂载");
  instance = render(<App />,root);
}

window.setState = () => {
  console.log("更新");
  instance.setState({foo: 'bar'});
}


window.unmountComponentAtNode = () => {
  console.log('卸载');
  unmountComponentAtNode(root);
}

使用三个按钮触发组件的装载、更新和卸载过程：

/index.html

<!DOCTYPE html>
<html>
<head>
  <title>react-this</title>
</head>
<body>
  <button onclick="window.renderComponent()">挂载</button>
  <button onclick="window.setState()">更新</button>
  <button onclick="window.unmountComponentAtNode()">卸载</button>
  <div id="root">
    <!-- app -->
  </div>
</body>
</html>

运行程序，依次单击“挂载”，绑定onClick={this.handler}“单击”按钮，“更新”和“卸载”按钮结果如下：

1. render()以及componentDIdMount()、componentDIdUpdate()等其他生命周期函数中的this都是组件实例；

2. this.handler()的调用者，为render（）中的this，所以打印组件实例；

3. window.handler()的“调用者”，为window，所以打印window；

4. onClick={this.handler}的“调用者”为事件绑定，来源多样，这里打印undefined。

-面对如此混乱的场景，如果我们想在onClick中调用自定义的组件方法，并在该方法中获取组将实例，我们就得进行转换上下文即绑定上下文：

自动绑定和手动绑定

React.createClass有一个内置的魔法，可以自动绑定所用的方法，使得其this指向组件的实例化对象，但是其他JavaScript类并没有这种特性；
所以React团队决定不再React组件类中实现自动绑定，把上下文转换的自由权交给开发者；
所以我们通常在构造函数中绑定方法的this指向：

import React from 'react';
const STR = '被调用，this指向：';
class App extends React.Component{
  constructor(){
    super();
    this.handler = this.handler.bind(this);
  }
//测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);
    this.handler();
    window.handler = this.handler;
    window.handler();

    return(
      <div>
        <h1>hello World</h1>
        <label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

将this.handler()绑定为组件实例后，this.handler()中的this就指向组将实例，即onClick={this.handler}打印出来的为组件实例；

总结：

React组件生命周期函数中的this指向组件实例；

自定义组件方法的this会因调用者不同而不同；

为了在组件的自定义方法中获取组件实例，需要手动绑定this到组将实例。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React
this

React状态管理Redux原理与介绍
redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
2022-08-08
React实现路由返回拦截的三种方式
最近项目为了避免用户误操作导致数据丢失,增加返回拦截功能,但是之前由于qiankun的报错导致这个功能一直有一些问题,所以专门独立搞了一个专题研究在react中各种方式实现这个功能,需要的朋友可以参考下
2024-05-05
React组件通信浅析
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
2022-12-12
React学习之事件绑定的几种方法对比
这篇文章主要给大家介绍了关于React学习之事件绑定的几种方法对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
react render props模式实现组件复用示例
本文主要介绍了react render props模式实现组件复用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
js中自定义react数据验证组件实例详解
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中自定义react数据验证组件 ,需要的朋友可以参考下
2018-10-10
如何使用Redux Toolkit简化Redux
redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了
2022-12-12
提高React界面性能的十个技巧
众所周知，性能是Web应用界面的关键方面，它直接影响到用户的使用体验。本文将向您展示十种提高React UI性能的特定技术和一般方法。
2021-05-05
react实现可播放的进度条
这篇文章主要为大家详细介绍了react实现可播放的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
React中组件优化的最佳方案分享
React组件性能优化可以减少渲染真实DOM的频率,以及减少VD比对的频率,本文为大家整理了一些有效的React组件优化方法,需要的小伙伴可以参考下
2023-12-12

React组件中的this的具体使用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具