react　关于函数绑定的认识

直至今日才发现自己之前的理解都是不对的，真是姚明！

react组件形式有两种，一种是function component，一种是class component。

在class component中我们经常会这样写：

class Demo extends React.Component{
	constructor(props){
		super(props);
		this.clickEvent = this.clickEvent.bind(this)
	}
	clickEvent(){
		console.log(this)
	}
	render(){
		return (
      		<button onClick={this.clickEvent}>Click me</button>
    	)
	}
}

以上写法有个非常明显的弊端，如果我有N多个函数的话，我就要在constructor中写N个函数绑定的语句，这样未免也太麻烦了。

噔噔噔噔~

解决方法来啦！

方法一：使用类属性

类属性的两个特性：1、它不在protoType上。2、类属性函数中的this固定绑定在类实例上。

class Demo extends React.Component{
	clickEvent = ()=>{
		console.log(this)
	}
	render(){
		return (
      		<button onClick={this.clickEvent}>Click me</button>
    	)
	}
}

方法二：使用箭头函数

这种方法一般没什么问题，但有时会影响到性能，当该函数做为一个prop传递到子组件时，可能会导致子组件重新渲染。这是因为getDerivedStateFromProps函数并非是props变化时调用，而是只要传入了就会调用。

class Demo extends React.Component{
	clickEvent (){
		console.log(this)
	}
	render(){
		return (
      		<button onClick={()=>this.clickEvent()}>Click me</button>
    	)
	}
}