React-类式组件中的this

ps: 用于记录学习,持续更新

React类式组件中的this

类式组件

1. 类中所定义的方法,都放在了类的原型对象上, 供实例去使用
2. 在类式组件中 可以不写constructor; 如果有constructor(){} 加 extends, 那么就必须有 super();
3. 必须要有render () { return () } , render 中必须要有return
4. constructor 中的this, 就是当前的People组件的实例对象; render(){} 中的this也是当前的People组件的实例对象
5. 在@1:demo 方法中的this, 是undefined, 因为在类中的方法中默认开启了局部严格模式; 在加上script标签使用text/babel, 使用了babel, babel中方法也开启了严格模式所以是undefined
6. 由于demo是作为onClick的回调, 所以不是通过实例调用的, 是直接调用, 所以为undefined
7. 类的方法默认开启了局部严格模式, 所以this为undefined

class People {
	constructor (props) {
		super(props)
	}
	render() {
		return (
			// <li onClick={demo}></li> 这里不能直接调用demo, 得加上this.demo,  因为是当前类上的方法,得用this.demo
			<li onClick={this.demo}></li>
		)
	}
	function demo () {
		// @1
		// demo 方法放在那里? 类的原型对象上, 供实例使用
		// 由于demo是作为onClick的回调, 所以不是通过实例调用的, 是直接调用, 所以为undefined
		// 类的方法默认开启了局部严格模式, 所以this为undefined
		console.log(this)
	}
}
ReactDOM.render(<People />, document.getElementById('app'))

解决class中this的问题
在constructor中 添加

class People {
	constructor () {
		this.demo = this.demo.bind(this)
		// 解析
		1. 这里的this 是当前的组件实例对象
		2. ＝右边的， this.demo 一开始并不是直接把下面demo拿来用， 而是从当前实例对象的原型上找，才找到下面的demo方法
		3. bind的方法， 作用有两个，一是改变this的指向， 二是生成一个新的函数
		4. =左边的this.demo 是onClick中的this.demothis.demo
	}
	render() {
		return (
			<li onClick={this.demo}></li>
		)
	}
	function demo() {
	// demo 方法放在那里? ---> 类的原型对象上, 供实例使用
	}
}