• 【04】基础知识：React组件实例三大核心属性 - state

    一、state 了解

    理解

    1、state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）

    2、组件被称为 “状态机”， 通过更新组件的 state 来更新对应的页面显示（重新渲染组件）

    强烈注意

    1、组件中 render 方法中的 this 为组件实例对象

    2、组件自定义的方法中 this 为 undefined，如何解决？

    a)、强制绑定 this：通过函数对象的 bind()

    b)、自定义方法使用：赋值语句+箭头函数

    3、状态数据，不能直接修改或更新，需要通过 setState 方法进行修改

    二、案例

    定义一个展示天气信息的组件，默认展示天气炎热 或 凉爽，点击文字切换天气

    基础写法（了解）

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>statetitle>
head>
<body>
	
	<div id="test">div>
	
	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		// let that // ********了解：定义变量，缓存this

		// 1、创建组件
		class Weather extends React.Component {
			// 构造器调用几次？———— 1次，实例化组件时调用
			constructor(props) { // props为组件三大属性二，后续学习
				console.log('constructor')
				super(props)
				// 初始化状态
				this.state = { isHot: false, wind: '微风' }
				// that = this // ********了解：赋值this给that

				// 解决changeWeather中this指向问题（获取原型上的changeWeather，修改this指向为实例对象，返回新函数，挂载在实例自身）
				this.changeWeather = this.changeWeather.bind(this)
			}

			// render调用几次？———— 1+n次，实例化组件时调用1次、n是状态更新的次数
			render() {
				console.log('render')
				const { isHot, wind } = this.state
				return <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }</h2>

				// ********了解：定义changeWeather在类外部
				// return 
    今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }
    
			}

			// changeWeather调用几次？———— 点几次调几次
			changeWeather() {
				// changeWeather放在哪里？———— Weather的原型对象上，供实例使用
				// console.log(this) // undefined
				// 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
				console.log('changeWeather')

				const { isHot } = this.state
				// 严重注意：状态必须通过setState进行更新，且更新是一种合并，不是替换。
				this.setState({ isHot: !isHot })

				// 严重注意：状态(state)不可直接更改
				// this.state.isHot = !isHot // 错误写法，React中值未改变
			}
		}

		// 2、渲染组件到页面
		ReactDOM.render(<Weather/>, document.getElementById('test'))

		 // ********了解：定义在类外部，一般不这么写
		// function changeWeather() {
		// 	console.log(this) // this为undefined，因为babel会将jsx转换为严格模式，严格模式下自定义函数中this为undefined
		// 	console.log(that.state)
		// }
	    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    简化写法（常用）

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式title>
head>
<body>
	
	<div id="test">div>
	
	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		// 1、创建组件
		class Weather extends React.Component {
			// constructor构造器不需要时可省略

			// 初始化状态：类中可以直接写赋值语句，如下代码的含义是：给Weather的实例对象添加一个属性state
			state = { isHot: false, wind: '微风' }

			render() {
				const { isHot, wind } = this.state
				return <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }</h2>
			}

			// 自定义方法：要用赋值语句的形式（将changeWeather放在实例对象上，而不是原型对象上）+ 箭头函数（箭头函数没有this，指向父级的this，为实例对象）
			changeWeather = () => {
				console.log(this)
				const { isHot } = this.state
				this.setState({ isHot: !isHot })
			}
		}

		// 2、渲染组件到页面
		ReactDOM.render(<Weather/>, document.getElementById('test'))
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    三、原生事件绑定方法

    1、element.addEventListener(事件名, 方法)

    2、element.onclick = 方法

    3、直接在标签上绑定

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Documenttitle>
	head>
	<body>
		<button id="btn1">按钮1button>
		<button id="btn2">按钮2button>
		<button onclick="demo()">按钮3button>

		<script type="text/javascript">
			const btn1 = document.getElementById('btn1')
			btn1.addEventListener('click', () => {
				alert('按钮1被点击了')
			})

			const btn2 = document.getElementById('btn2')
			btn2.onclick = () => {
				alert('按钮2被点击了')
			}

			function demo(){
				alert('按钮3被点击了')
			}
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    注意：

    React 对原生 javascript 中所有的事件做了一层封装

    比如，onclick 在 React 中需要写为 onClick

  • 相关阅读:
    Linux学习笔记14 - 多线程编程(一)
    敏感信息防泄漏：透明加密与通信内容安全策略深度解析
    java包装类型的缓存机制
    基于Prometheus的容器云平台监控架构设计
    Python——LeetCode刷题——【383. 赎金信】
    范西特-泽尼克定理的证明
    【POJ No. 3984】 迷宫问题
    Go语言的自给自足：编译自身的神奇之旅
    【微信小程序】冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化
    Java学习之继承一
  • 原文地址：https://blog.csdn.net/weixin_45559449/article/details/133809298