Question

编辑：据我所知，这个问题并不重复，因为问题不在于是否使用箭头功能，而是使用构造函数，即使不是必需的使用箭头功能，更高效，或更清晰的语法或最佳实践。我很困惑何时使用构造函数，什么时候不使用，因为我从来不需要使用它，也没有教过它是必要的。这是我试图澄清的问题，我无法付出巨大的努力。

我已经搜索了很多，并且我们无法找到问题的答案。当我最近学习React时，我被教会编写这样的组件，没有构造函数：

class App extends React.Component {
  state = {
      color: "green"
  }
  changeColor = () => {
    if (this.state.color === "green"){
      this.setState({color: "yellow"})
    } else {
      this.setState({color: "green"})
  }

  render() {
    return(
      <div>
        <h1 style={{color: this.state.color}}>What color am I?</h1>
        <button className='btn btn-default' onClick={this.changeColor}>Change Color</button>
      </div>
    )
  }
}

箭头功能绑定＆＃34;这个＆＃34;的上下文。这段代码运行得很好，但是我看到的每个教程，我看过的每个视频，我看到的其他人的代码都是这样编写的：

class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      color: "green"
    }
    this.changeColor = this.changeColor.bind(this);
  }
  changeColor(){
    if (this.state.color === "green"){
      this.setState({color: "yellow"})
    } else {
      this.setState({color: "green"})
  }

  render() {
    return(
      <div>
        <h1 style={{color: this.state.color}}>What color am I?</h1>
        <button className='btn btn-default' onClick={this.changeColor}>Change Color</button>
      </div>
    )
  }
}

我感到好奇的是使用构造函数是否有好处，或者第一个示例是更好的方法呢？我不知道这样做会有什么陷阱吗？任何帮助将不胜感激。

使用箭头函数反映构造函数与绑定

0 个答案: