在 ES6 类中使用 ES2016 属性 Initializer Syntax 是一个好的 React 模式吗

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 属性 Initializer Syntax 是一个好的 React 模式吗

Is it a good React pattern to use ES2016 Property Initializer Syntax in ES6 classes

javascript

reactjs

ecmascript-next

在 ES6 类 中使用 ES2016 属性 Initializer Syntax 是一个好的 React 模式吗

Is it a good React pattern to use ES2016 Property Initializer Syntax in ES6 classes

javascript

reactjs

ecmascript-next

在 ES6 类中使用 ES2016 属性 Initializer Syntax 是一个好的 React 模式吗