个人 尚硅谷React全家桶学习笔记(9)

个人 尚硅谷React全家桶学习笔记 （九）

12.对state的理解

1.有状态的为复杂组件，无状态的为简单组件

2.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

3.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

13.初始化state

		class Demo extends React.Component{
			constructor(props){
				super(props)
				this.state={isHot:true}
			}
			render(){
				const{isHot}=this.state
				return <h1>今天天气很{isHot ? '炎热':'凉爽'}</h1>
			}
		}
	
	ReactDOM.render(<Demo/>,document.getElementById('test'))

14.React中的事件绑定

class Demo extends React.Component{
		constructor(props){
			super(props)
			this.state={isHot:true}
		}
		render(){
			const{isHot}=this.state
			return <h1 onClick={demo}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
		}
	}
function demo(){
	console.log('点击')
}

ReactDOM.render(<Demo/>,document.getElementById('test'))

注意

React中的事件为驼峰命名 原生onclick应写为onClick

不应该用 引号写函数 而是用{}

直接写函数名 无需加()调用 react会帮你调用

15.类中方法中的this

		class Demo extends React.Component{
			constructor(props){
				super(props)
				this.state={isHot:true}
			}
			render(){
				const{isHot}=this.state
				return <h1 onClick={this.demo}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
			}
			demo(){
				console.log(this)
			}
		}
	
	ReactDOM.render(<Demo/>,document.getElementById('test'))

注意

由于demo是作为onClick的回调，所以不是实例调用，是直接调用。

类中的方法默认开启了局部的严格模式，所以

demo中的this为undefined

16.解决类中的this指向问题

class Demo extends React.Component{
		constructor(props){
			super(props)
			this.state={isHot:true}
			this.demo=this.demo.bind(this)
		}
		render(){
			const{isHot}=this.state
			return <h1 onClick={this.demo}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
		}
		demo(){
			console.log(this)
		}
	}

ReactDOM.render(<Demo/>,document.getElementById('test'))

this.demo1=this.demo2.bind(this)

这行代码意思为在实例中创建一个新函数 demo1 它的内容为原型中的demo2函数

这样就能解决this的指向问题 因为是用实例调用的函数

17.setState的使用

	class Demo extends React.Component{
		constructor(props){
			super(props)
			this.state={isHot:true}
			this.demo=this.demo.bind(this)
		}
		render(){
			const{isHot}=this.state
			return <h1 onClick={this.demo}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
		}
		demo(){
			const isHot=this.state.isHot
			this.setState({isHot:!isHot})
		}
	}

ReactDOM.render(<Demo/>,document.getElementById('test'))

注意

state必须通过setState进行更新，并且更新是合并不是替换。

18.state的简写方式

	class Demo extends React.Component{
		state={isHot:true}
		render(){
			const{isHot}=this.state
			return <h1 onClick={this.demo}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
		}
		demo=()=>{
			const isHot=this.state.isHot
			this.setState({isHot:!isHot})
		}
	}

ReactDOM.render(<Demo/>,document.getElementById('test'))

注意

state直接使用赋值语句也能初始化

自定义函数需要同时使用赋值语句和箭头函数 赋值语句用于类函数 箭头函数用于解决this的指向问题

19.总结state

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

3.组件中render方法中的this为组件实例对象

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

​ 1)强制绑定this: 通过函数对象的bind()

​ 2)箭头函数

5.状态数据，不能直接修改或更新