react类组件中this的绑定

介绍

本篇文章带你了解在各种情况下如何为react类组件的事件监听函数绑定this。

为什么要绑定this

你必须谨慎对待 JSX 回调函数中的 this，在jsx中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

如何绑定this

使用 bind 方法绑定this

原理就是改变函数执行时的this指向，使得this指向类实例

import React, { Component } from 'react'

export default class index extends Component {

	constructor(props){
	    super(props)
	    this.add=this.add.bind(this)
	}
	
	state={num:0}
	
	add(e){          
	   this.setState((state)=>({num:state.num+1}))
	}

	render() {
			return (
				<div>
					<p>{this.state.num}</p>
					<button onClick={this.add}>add one</button>
				</div>
			)
		}
}

使用 class fields 语法绑定this

原理就是利用箭头函数没有自己的this，它的this指向外层作用域，因此函数的this指向的是类作用域中的this

import React, { Component } from 'react'

export default class index extends Component {

	state={num:0}
	
	add=(e)=>{        
	   this.setState((state)=>({num:state.num+1}))
	}
	
	render() {
		return (
			<div>
				<p>{this.state.num}</p>
				<button onClick={this.add}>add one</button>
			</div>
		)
	}
}

使用箭头函数绑定this

原理和 class field一样。此语法问题在于每次渲染时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为prop传入子组件时，这些组件可能会进行额外的重新渲染。使用尽量不要使用该方式来绑定this

import React, { Component } from 'react'

export default class index extends Component {

	state={num:0}
	
	add(e){
	   this.setState((state)=>({num:state.num+1}))
	}
	
	render() {
		return (
			<div>
				<p>{this.state.num}</p>         
				<button onClick={(e)=>{this.add(e)}}>add one</button>  
			</div>
		)
	}
}

如果函数需要传递参数，此时应该如何绑定this呢

此时只能使用bind方法或箭头函数方法绑定this。原因是如果直接在监听器函数后面写()，组件render时，该函数就会执行，使得我们绑定的监听器是函数的返回值。

import React, { Component } from 'react'

export default class index extends Component {

	constructor(props){
	    super(props)
	    this.increase=this.increase.bind(this,2)
	}
	
	state={num:0}
	
	add(n){
	   this.setState((state)=>({num:state.num+n}))
	}
	
	increase(n,e){                
	   this.setState((state)=>({num:state.num+n}))
	}
	
	render() {
		return (
			<div>
				<p>{this.state.num}</p>
				<button onClick={(e)=>{this.add(2)}}>add n</button>
				<button onClick={this.increase}>add n</button>
			</div>
		)
	}
}

总结

相信认真看完这篇文章后，你对this的绑定肯定是很熟悉了。这里我推荐使用class fields 语法和 箭头函数来绑定this，当组件中的方法太多了，如果我们使用 bind方法去绑定，这样是不是更麻烦呢。不过还是看个人喜好吧。

结尾

感谢各位小伙伴的观看，如果有任何疑问和建议，欢迎提出和分享。