【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>

简化写法(常用)

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、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>

注意:

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

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

你可能感兴趣的:(React,react.js,前端,javascript)