React系统学习2（组件三大核心属性之state）

VIP文章 Tatum_99999

已于 2022-04-11 08:54:20 修改

阅读量1.2k

点赞数 1

分类专栏： js 文章标签： react state

于 2022-04-10 10:39:53 首次发布

本文为【程序员涂小哥】原创，若要转载，请【务必】注明出处：http://tuzongxun.blog.csdn.net;个人博客：https://blog.tzxcode.cn

本文链接：https://blog.csdn.net/tuzongxun/article/details/124074149

版权

之前简单学习的react中函数式组件和类式组件的基本使用，函数式组件适用于定义简单的组件，类式组件适用于定义复杂的组件。

复杂的组件指的是有状态的组件，所谓的状态，在react中就是三大核心属性之一的state。

从一个小例子说起

假设需要这个一样组件，访问的时候展示一个人的名字和心情，当点击的时候就切换到另一个人，再次点击就再切换回去。

那么对这个需求进行分析，就会知道首先肯定是需要有地方进行信息展示，然后就是肯定需要有点击事件，再然后就是需要有地方保存数据。

基于上边的分析，在还不是太会react的情况下，基于之前的js基础，这个组件一开始可能会先做如下这样的定义：

<body>
	<div id="test"></div>
	<!--核心库-->
	<script type="text/javascript" src="../../js/react.development.js"></script>
	<!--操作dom-->
	<script type="text/javascript" src="../../js/react-dom.development.js"></script>
	<!--用户将jsx转为js-->
	<script type="text/javascript" src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

	<script type="text/babel">
		 // 1.类式组件
		class ClassComponent extends React.Component{
			name='tuzongxun'
			mood='happy'
			render() {
				return <h1 onclick="changeUser()">I'm {this.name}，today i'm {this.mood}</h1>
			}
			changeUser(){
				if(this.name === 'tuzongxun'){
					this.name='tzx'
					this.mood='unhappy'
				}else{
					this.name='tuzongxun'
					this.mood='happy'
				}
				
			}
		}
		// 2.渲染虚拟DOM
		ReactDOM.render(<ClassComponent/>,document.getElementById('test'))

	</script>
</body>

然后当在浏览器访问的时候，就会发现点击根本是没有反应的，如果打开浏览器控制台，就会看到有如下的错误提示：

Warning: Invalid event handler property `onclick`. Did you mean `onClick&

最低0.47元/天解锁文章

Tatum_99999

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React系统学习2（组件三大核心属性之state）

之前简单学习的react中函数式组件和类式组件的基本使用，函数式组件适用于定义简单的组件，类式组件适用于定义复杂的组件。复杂的组件指的是有状态的组件，所谓的状态，在react中就是三大核心属性之一的state。从一个小例子说起假设需要这个一样组件，访问的时候展示一个人的名字和心情，当点击的时候就切换到另一个人，再次点击就再切换回去。那么对这个需求进行分析，就会知道首先肯定是需要有地方进行信息展示，然后就是肯定需要有点击事件，再然后就是需要有地方保存数据。基于上边的分析，在还不是太会react的情
复制链接

扫一扫