react中关于函数调用()与bind this的原因及分析

//函数组件则就是 无状态组件  只负责数据的展示（静态）
//类组件这就是有状态组件      负责更新ui，让页面动起来
//状态（state ）就是数据，是组件内部的私有数据，只能在组件内部使用
//state的值是对象，即就是一个组件内部可以拥有多个数据
class StateComponent extends React.Component{
  //使用es6简化办法初始化
  //state={
  //  count:0
  //}
   constructor(props) {
    super(props);
    this.state = {count: 0};
    this.addClick3 = this.addClick3.bind(this);
  }
  addClick(){
    this.setState({count : this.state.count + 1});
  }
  addClick2=()=>{
    this.setState({count : this.state.count + 1});
  }
  addClick3(){
    this.setState({count : this.state.count + 1});
  }
  render(){
    return(
      <>
    <button onClick={()=>{
      this.setState({
        count: this.state.count+1
      })
    }}>有状态组件,{this.state.count}</button>

    <button onClick={this.addClick.bind(this)} >不使用constructor，使用注释的es6简化写法</button>
    <button onClick={()=>this.addClick()} >箭头函数使用</button>
    <button onClick={this.addClick2} >使用箭头函数</button>
    <button onClick={this.addClick3} >constructor中进行绑定后可使用</button>
    </>
    )
  }
}

function check(){
}

hadleClick(){
 return <div>hello world</div>
 //函数体内部没有使用this
}

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={this.handleClick()}>Click Me</button>
}

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>Click Me</button>
}

class Comment extends React.Component{
    state={
         comments:[
            {id:1,name:'jack',comment:"沙发"},
            {id:2,name:"tom",comment:'沙发不错'},
            {id:3,name:"blue",comment:"还行"}
         ]
    }
    renderList(){
        return(
            this.state.comments.kength===0?
                <div className="no-comment" >暂无评论，快去评论</div>:
                <ul >
              {this.state.comments&&this.state.comments.map(comment=>
                  <li key={comment.id}><h3>评论人:{comment.name}</h3>
                  <p>评论内容 :{comment.content}</p>
                  </li>
              )} 
               </ul>
              
        )
    }
      render(){
        return(
            <>
            {this.renderList()}
             </>
        )
      }

}