React组件中的this的具体使用

2024-10-11 15:45:26

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实现pure render时bind(this)隐患需注意!
深入理解React中es6创建组件this的方法

深入理解React中es6创建组件this的方法

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component
react实现pure render时bind(this)隐患需注意!

pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传) 不论你用不用immutable,只要你想达到pure render,下面值得你注意! 一天我和往常一样,开开心心得写着react,用着@pureRender, export default class extends Component { ... render() { const {name,age} =this.state; return ( <div> <Person name={na
React 组件中的 bind(this)示例代码

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &
react组件中的constructor和super知识点整理

1.react中用class申明的类一些小知识如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeofChild === 'function' , 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B.Child类调用时候( new Child() ),会优先执行,并且自动执行Child的constructor函数. constructor() { console.log('执
react组件中过渡动画的问题解决

目录一.是什么二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么在日常开发中,页面切换时的转场动画是比较基础的一个场景当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画二.如何实现在react中,react-transition-g
在React 组件中使用Echarts的示例代码

在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件
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
React 组件中的state和setState()你知道多少

目录 state的基本使用 setState()修改状态解决方法: 总结 state的基本使用状态(state)即数据,是组件内部的私有数据,只能在组件内部使用 state的值是对象,可以通过this.state来获取状态. setState()修改状态状态是可变的,可以通过this.setState({要修改的数据})来改变状态注意:跟vue语法不同,不要直接修改state中的值,这时错误的! //正确 this.setState({ count:this.state.count+1
React组件封装中三大核心属性详细介绍

目录 1.介绍 2.state 概念演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件什么是父子组件父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局
详解如何优雅地在React项目中使用Redux

前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录
编写React组件项目实践分析

当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我(作者)把我们团队这些年来总结的使用React的经验总结在这里.希望这篇文字对你有用,不管你是初学者还是老手. 开始前: 我们使用ES6.ES7语法如果你不是很清楚展示组件和容器组件的区别,建议您从阅读这篇文章开始如果您有任何的建议.疑问都清在评论里留言基于类的组件现在开发React组件一般都用的是基于类的组件.下面我们就来
React 组件转 Vue 组件的命令写法

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面简介对于react-to-vue工具,转化的是基本的react component,而不是全部的react应用.而基本react component的定义更多是基于props和state来渲染的组件,其中也可以包括发请求. 本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理.在实际业务中,陆金所100多个的react基

React组件中的this的具体使用

您可能感兴趣的文章:

相关推荐

随机推荐