在带有 setState 的 React 类组件中使用箭头函数的最佳实践答案

【问题标题】：Best practice using an arrow function in a React class component with setState在带有 setState 的 React 类组件中使用箭头函数的最佳实践
【发布时间】：2018-08-04 22:52:33
【问题描述】：

我试图了解在 React 类组件中使用箭头函数和设置状态的两种方式之间的区别。两者似乎都可以正常工作并正确设置状态。

在受控组件中，我这样调用有问题的函数。

<input onChange={this.handleChange} placeholder="Enter name" />

我见过定义这些函数的两种方式是这样的；

方法一。

handleChange = (e) => this.setState({ name: e.target.value});

方法二

handleChange = (e) => {
  this.setState({ name: e.target.value });
};

我的问题是：

一个优先于另一个，为什么？
与仅执行其内容的方法 2 相比，方法 1 不是从函数返回值吗？

这是受控输入的工作代码 sn-p。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' }
  }

  handleChange = (e) => this.setState({ name: e.target.value});

  handleChange2 = (e) => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div className="App">
        <input onChange={this.handleChange} placeholder="Enter name" />
        <p>{this.state.name || 'no name yet'}</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

	<div id="root"></div>

任何有助于澄清这一点以及被视为最佳实践的方法都会有所帮助。

【问题讨论】：

没有函数体 {} 的箭头函数也将隐式返回单个语句，如您所说。如果您不想要返回值，您仍然可以在没有函数体的情况下编写它并忽略返回值，如果您发现这种编写方式更好。这只是口味问题。
它们实际上是同一件事，因为两者都将返回undefined。 setState 不返回值，第二个不提供返回值
它们是一样的，第一个是隐式返回。您也不需要选项 1 中 (e) 周围的括号，因为它是单个参数
@GhostCat，不用担心。这确实很有帮助，也很有意义。我将再次阅读您在 cmets 中发布的分类线程。 see help me is not a question 因为这提供了更多关于我哪里出错的上下文。
感谢我们快速而友善的回归！

标签： javascript reactjs arrow-functions

【解决方案1】：

方法1简洁易读。它不返回任何东西。请注意，此方法不需要 e 周围的括号。

方法 2 是首选，以防您在更改文本时想要做的不仅仅是更改状态 (setState())。例如，您想调用另一个函数，或者您只是想以某种方式验证输入。此外，如果添加返回语句，则可以返回一个值。

【讨论】：

【解决方案2】：

handleChange = (e) => this.setState({ name: e.target.value});

和

是一样的

handleChange = e => {
    return this.setState({ name: e.target.value});
};

【讨论】：