React this指向问题

最新推荐文章于 2022-11-10 16:30:21 发布

Tom098

最新推荐文章于 2022-11-10 16:30:21 发布

阅读量109

点赞数

分类专栏：前端文章标签： react this指向

本文链接：https://blog.csdn.net/Tom098/article/details/118890347

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			
			//构造器调用几次？ ———— 1次
			constructor(props){
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = {isHot:false,wind:'微风'}
				//解决changeWeather中this指向问题
                //在生成的对象上加上一个changeWeather123 函数，而这个函数是由类Weather 的
                //changeWeather函数经过bind函数处理之后生成的。
                //左边this后边的函数名可以随便取，不一定跟右边this后边的函数名相同。
                
				this.changeWeather123 = this.changeWeather.bind(this)
			}

			//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render(){
				console.log('render');
				//读取状态
				const {isHot,wind} = this.state
                //上边在生成对象上加上一个changeWeather123函数，这里必须使用新加的这个函数
                //注意没有()，不然就将函数的返回结果赋给onClick了。
                //这里跟原生的javascript onclick=function()不同，原生onclick都是小写，
                //而且函数名后有括号，这也是jsx语法与js不同的地方之一。
                //卫生么上边的构造函数要在创建对象时，在对象上加一个改造this指针指向的 
                //changeWeather函数，就是因为如果不改，会将类中的changeWeather函数赋给onClick
                //当onClick作为函数执行时，当时的上下文环境，this指向Windows，如果使用严格模式
                //this是undefined。这不符合我们的需求。
				return <h1 onClick={this.changeWeather123}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//changeWeather调用几次？ ———— 点几次调几次
			changeWeather(){
				//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
				//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
				
				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
				this.setState({isHot:!isHot})
				console.log(this);

				//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
				//this.state.isHot = !isHot //这是错误的写法
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))
				
	</script>
</body>
</html>

Tom098

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React this指向问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>state</title></head><body>  <div id="test"></div>  <script type.
复制链接

扫一扫

专栏目录