react-类组件内 修正/修改 this指向的问题

前言

React是一款javascript前端框架，把用户界面抽象成一个个的组件，按需组合成页面，与其他框架的共同点是，都采用虚拟dom和数据驱动。
React使我们对于代码编写的介入感更强，需要注意的问题也会更多，比如this指向的问题。

一、this指向

在类组件内事件函数内部的this会丢失，this指向的是undefined，这是因为React是严格模式的。

二、修正this

1.方法一

使用bind来修正this，方法后不能加()不然会直接调用，也不能使用call来修正this因为也会直接调用。

import React from "react";
import ReactDom from "react-dom"

class App extends React.Component{
	render(){
		return (
			<div>
				<button onClick={this.方法名.bind(this)}></button>   //在这一步修正this
			</div>
		)
	}
}

ReactDom.render(
	<App></App>,
	document.querySelector("#root)
)

1.方法二

使用箭头函数修正this，因为箭头函数不会修改this指向

import React from "react";
import ReactDom from "react-dom"

class App extends React.Component{
	render(){
		return (
			<div>
				<button onClick={()=>{this.方法名()}}></button>		//在这一步修正this
			</div>
		)
	}
}

ReactDom.render(
	<App></App>,
	document.querySelector("#root)
)

1.方法三

在构造器内修正this指向，它的权重很高。

import React from "react";
import ReactDom from "react-dom"

class App extends React.Component{
	constructor(props){		//创建构造器
		super(props);
		this.方法名 = this.方法名.bind(this)		//在这一步修正this
	};
	render(){
		return (
			<div>
				<button onClick={this.方法名}></button>
			</div>
		)
	}
}

ReactDom.render(
	<App></App>,
	document.querySelector("#root)
)

1.方法四

将方法定义成箭头函数的形式，这样就不用修正this指向了，它的权重是最高的。

import React from "react";
import ReactDom from "react-dom"

class App extends React.Component{
	方法名=()=>{		//在这一步修正this
		代码逻辑
	};
	render(){
		return (
			<div>
				<button onClick={this.方法名}></button>
			</div>
		)
	}
}

ReactDom.render(
	<App></App>,
	document.querySelector("#root)
)

总结

以上方法都可以修正this指向，最常用的是方式四来修正this指向的问题。