react中类组件this指向

这是一个标准的类组件

import React,{Component} from 'react';
class View extends Component{constructor(props){super(props)}state={}  //写在这里跟写在constructor中一样，都可以起到初始化的效果,并且可以省去thisfn(){}fn1(){}render(){return(<div><button onClick={this.fn}>按钮</button><ul>{this.fn1()}</ul></div>)   }
}

接下来是this指向的问题

主要分三个模块：

constructor：this指向new生成的实例，这里也就是我们的View组件了
render()：this指向也是组件实例View

方法：

   fn(): this指向是undefind fn1(): this指向是组件实例

为什么fn()的指向是undefined？

分析：
1、我们知道调用都是有（）的，所以这里只是把onClick指向堆中的fn，调用时也就没有实例————所以this会指向window
2、使用babel编译后就是严格模式（严格模式下this不能指向window)，所以this就会变为undefined

改变方法this指向的4种方法

在contructor写入this.fn=this.fn.bind(this)

会在实例的属性中添加一个fn属性，指向改变this指向之后的fn(),原型链的的fn()并无变化。
使用bind是因为不会自执行，而call，apply都会自执行
方法使用箭头函数的写法fn=()=>{}

箭头函数this指向特性
调用时使用箭头函数，可以传参()=>{this.fn("text")}
调用时使用bind改变this指向，也可以传参this.fn.bind(this,'text')

react中类组件this指向相关推荐

react中类组件this的指向问题
1.铺垫知识 a.普通函数的this指向若是一个普通函数直接被调用,那this默认是指向全局的,若是非严格模式下,则是指向window的 function display(){console.log ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
React类组件的两种写法
react中类组件的两种写法: 要点:•类组件必须要继承React.Component •类组件中的render()方法,返回值是一个jsx // 方式一: import React from 're ...
React 函数式组件缓存原理
对 React 函数式组件缓存的思考自从 React 16.8 版本推出 Hooks 用法以来,围绕函数组件的优化出现了各种不同的思考.本篇文章从 React 底层 Render 角度,分析 Rea ...
react创建组件_如何使用React创建时间轴组件
react创建组件 These days I've been working on a new page for my website. I wanted to have a Timeline to ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
react 调用组件方法_React源码分析1 — 组件和对象的创建（createClass，createElement）...
1 组件的创建学习了半年前端了,感觉前端的水确实也很深.做安卓的时候就对React-Native比较感兴趣,开发H5时也使用了一段时间的ReactJS.所以决定好好分析下它的源码.文章中有不对的地方 ...
React的组件生命周期
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmoun ...
【React 基础】之 React 面向组件编程
准备工作使用 React 开发者工具调试复习类相关知识定义 class(类),代码如下: // 创建一个 Person 类 class Person {// 构造器方法constructor ...

react中类组件this指向

这是一个标准的类组件

接下来是this指向的问题

改变方法this指向的4种方法

react中类组件this指向相关推荐

最新文章

热门文章