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

Question

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

在受控组件中，我这样调用相关函数。

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

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

方法一

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

方法二

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

我的问题是:

1. 一个比另一个更受欢迎吗？为什么？
2. 与仅执行其内容的方法 2 相比，方法 1 不是从函数返回值吗？

这是受控输入的工作代码片段。

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>

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

Answer 1

方法 1 清晰易读。它不返回任何东西。请注意，此方法不需要 e 两边的括号。

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