箭头函数的理解 - 为什么箭头函数的内容没有运行？

源码，问题是标着不好用的两句语句，死活打不出日志来

class Board extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        squars: Array(9).fill(null),
        next: false
      }
    }
    renderSquare(i) {
      return <Square value={this.state.squars[i]}
        onClick={() => this.handleClick(i)} 　　　　　　　　　　　　         //调用在这里
      />;
    }

    handleClick(i){
      squares[i] = true
      if (squares[i]) {console.log("DO NOT CLICK ME!"); return}　　　　     //好用
      // if (squares[i]) {return () => alert(1)}　　　　　　　　　　　　　　　　不好用　　　　
      // if (squares[i]) { return () => console.log("Dont work at all?") }           不好用
    }
  
    render() {
      const status = 'Next player: ';
      return (
        <div>
          <div className="status">{status.concat(this.getNext())}</div>
          <div className="board-row">
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          </div>
        </div>
      );
    }
  }

如何理解箭头函数套箭头函数呢？

当用户点击了渲染出来的square，会触发

 <Square value={this.state.squars[i]}
        onClick={() => this.handleClick(i)} 

这里面的onClick钩子，于是调用了钩子里面的匿名函数（箭头函数），为了方便看我们把它拆出来，变成不匿名函数
squareOnClickFunction(){return this.handleClick(i)}
由于这个函数只有一句return，于是函数返回，开始执行handleClick函数：

    handleClick(i){
      squares[i] = true
      if (squares[i]) {console.log("DO NOT CLICK ME!"); return}　　　　     //好用
      // if (squares[i]) {return () => alert(1)}　　　　　　　　　　　　　　　　不好用　　　　
      // if (squares[i]) { return () => console.log("Dont work at all?") } 不好用
    }

好用的那一句不用说, 打印日志确实地被执行了，然后返回了一个null；为什么二三句不好用呢？
二三句在返回一个函数对象给调用方，我们把返回的函数换个名字，变成下面的样子：

function console() {
  console.log("Dont work at all?") 
}
if (squares[i]) { return console } 

squareOnClickFunction会变成下面的模样：

squareOnClickFunction(){
return** console ** //看到这里了吗！返回的是一个函数对象，而不是函数调用！
}

因此，为了解决这个问题我们应当返回一个调用了的函数，或者是在返回之后调用它一下：
method 1:

    handleClick(i){
      squares[i] = true
      if (squares[i]) {console.log("DO NOT CLICK ME!"); return}　　　　     //好用
      if (squares[i]) {return （() => alert(1))() }   // if (squares[i]) {return () => alert(1)}　**先调用再返回　**
    }

method 2:

 <Square value={this.state.squars[i]}
        onClick={() => this.handleClick(i)()}.    // **先返回再调用**