Question

我在egghead.io上看过关于 [Use ES2016 Property Initializer Syntax in ES6 classes]的课程，而且我不太确定 - 使用它是一个好习惯。这是来自上层课程的常规状态React组件：

class App extends Component {
  constructor() {
    super()
    this.state = {
      todos: [],
      currentTodo: ''
    }
  }
this.handleInputChange = this.handleInputChange.bind(this)

  handleInputChange (evt) {
    this.setState({
      currentTodo: evt.target.value
    })
  }

  render() {
    return (
    ...
          <TodoForm handleInputChange={this.handleInputChange}
            currentTodo={this.state.currentTodo}
          <TodoList todos={this.state.todos}/>
    ...
    );
  }
}

这里是使用ES2016语法的相同重构组件：

class App extends Component {
  state = {
    todos: [],
    currentTodo: ''
  }

  handleInputChange = (evt) => {
    this.setState({
      currentTodo: evt.target.value
    })
  }

  render() {

    return (
    ...
          <TodoForm handleInputChange={this.handleInputChange}
            currentTodo={this.state.currentTodo}
          <TodoList todos={this.state.todos}/>
    ...
    );
  }
}

Answer 1

是的，使用它是一种非常好的做法。当属性初始化程序为您执行绑定时，没有理由手动执行绑定：代码更清晰，并且您不会将代码与其他一行指令分散。

在ES6类中使用ES2016属性初始化程序语法是一个很好的React模式

1 个答案: