在reactjs上使用Arrow函数和普通函数有什么区别

Question

我是ReactJS和JavaScript的初学者，我正在尝试在ReactJS中创建一个测试类，每当用户点击按钮时，计算点击并将其显示在按钮的标签上，如果我使用这样的普通函数，它不起作用：

class Button extends React.Component 
  {
   state = { counter : 0} 
   test = function ()
       {
         this.setState({    
                        counter : this.state.counter + 1
                      })
       }
  render(){
          return(<button onClick={this.test}>{this.state.counter}</button>)
          };
 }

但是当我在测试中使用箭头功能时，它完美无缺：

   class Button extends React.Component 
          {  
           state = { counter : 0}
           test = () => {              ///////ONLY CHANGED THIS LINE    
           this.setState({      
               counter : this.state.counter + 1     
                        })
                        }
           render(){
           return(<button onClick={this.test}>{this.state.counter}</button>)
                   };
         }

有人可以解释一下这种行为吗？