1.有状态组件

有状态组件一般用来创建复杂数据的组件，包括页面UI的更新等，并且可以访问组件的生命周期方法

用法：大多数推荐利用Es6 Class field方法创建

class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);}
}

2.this的指向问题

先来看，我们在有状态组件中定义一个事件

import React from "react";export default class Capture extends React.Component {constructor(props) {super(props)this.state = {value: 1}}handonClick() {const num = this.state.valuethis.setState({value: num++})}render() {return (<div><button onClick={this.handonClick}>点击</button><h1>{this.state.value}</h1></div>)}
}

当我们点击事件的时候 num会进行加1 ，但是控制台打印结果令我们意想不到

我们在函数中打印一下this

handonClick() {// let num = this.state.value// console.log(this);// this.setState({//     value: num+=1// })console.log(this);}

打印结果：

这是因为 jsx类的实例方法默认没有绑定this 所以此刻函数的作用域是由调用时决定的所以此时this指向的是window 但是React在babel的转译 js会变成严格模式所以会变成undefind

解决方法：

1.在构造函数中利用bind call apple方法绑定this

   constructor(props) {super(props)this.state = {value: 1}this.handonClick = this.handonClick.bind(this)}

此刻可以发现解决啦我们再来打印this 发现

2.使用箭头函数

<button onClick={()=>{this.handonClick()}}>点击</button><h1>{this.state.value}</h1>

因为箭头函数没有单独的作用域在函数内使用this,this会默认绑定函数外作用域上下文此刻this指向的外围的this 我们测试一下

   render() {console.log(this);return (<div><button onClick={()=>{this.handonClick()}}>点击</button><h1>{this.state.value}</h1></div>)}

无状态组件

不需要显示声明this关键字，在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定。

React中this指向undefind？？？相关推荐

this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
React中构造函数、reader和函数的调用次数和时机测试
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
如何在React中使用gRPC-web
by Mohak Puri 由Mohak Puri 如何在React中使用gRPC-web (How to use gRPC-web with React) For the past few mont ...
React中的高阶组件
React中的高阶组件高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合 ...
为什么不可变性在 React 中非常重要
handleClick(i) {const squares = this.state.squares.slice();squares[i] = 'X';this.setState({squares: ...
Immutable 操作在 React 中的实践
作者简介 Amy 蚂蚁金服·数据体验技术团队最近在需求开发的过程中,踩了很多因为更新引用数据但是页面不重新渲染的坑,所以对这块的内容总结了一下. 在谈及 Immutable 数据之前,我们先来聊聊 ...
React 中constructor 作用
React 中constructor 作用 react中的constructor大体有两个作用 1.初始化this.state 2.纠正方法的this的指向 constructor(props) {s ...
Immutable 详解及 React 中实践 1
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

React中this指向undefind？？？

1.有状态组件

2.this的指向问题

无状态组件

React中this指向undefind？？？相关推荐

最新文章

热门文章