反应组件，使用函数代替内联块事件处理程序更好吗？(React components, is it better to use functions instead inline block event

反应组件，使用函数代替内联块事件处理程序更好吗？(React components, is it better to use functions instead inline block event handlers?)

我是新手做出反应，不知道render()是如何在内部工作的。 哪一个更有效，是反应组件中事件处理的最佳实践？

onNameChange (event) { this.setState({ name: event.target.value }); } render() { return ( <TextField value={ this.state.name } onChange={ this.onNameChange.bind(this) } /> ); }

要么

render() { return ( <TextField value={ this.state.name } onChange={ (event) => this.setState({ name: event.target.value }) } /> ); }

如果我们想要做的不仅仅是用名称设置状态，情况会怎样？ 例如，假设我们想要分割名字和姓氏，然后设置状态：

render() { return ( <TextField value={ `${ this.state.name.first } ${ this.state.name.last }` } onChange={ (event) => { let parts = event.target.value.split(' '); this.setState({ name: { first: parts[0], last: parts[1] }}); }} /> ); }

I'm new to react, don't know how render() works internally. Which one is more efficient and the best practice for event handling in react components?

onNameChange (event) { this.setState({ name: event.target.value }); } render() { return ( <TextField value={ this.state.name } onChange={ this.onNameChange.bind(this) } /> ); }

OR

render() { return ( <TextField value={ this.state.name } onChange={ (event) => this.setState({ name: event.target.value }) } /> ); }

And what the case would be if we'd want to do something more than just setting the state with name? e.g. let's say we'd want to split first and last names then set the state:

render() { return ( <TextField value={ `${ this.state.name.first } ${ this.state.name.last }` } onChange={ (event) => { let parts = event.target.value.split(' '); this.setState({ name: { first: parts[0], last: parts[1] }}); }} /> ); }

最满意答案

执行此操作的最佳方法可能是在构造函数中绑定事件处理程序，而不是在每个渲染中绑定或使用新的箭头函数，至少从perf角度来看

constructor() { super(); this.onNameChange = this.onNameChange.bind(this); } onNameChange (event) { this.setState({ name: event.target.value }); } render() { return ( <TextField value={ this.state.name } onChange={ this.onNameChange } /> ); }

The best way to do this is probably to bind the event handler in the constructor instead of binding or using a new arrow function in every render, at least from a perf perspective

constructor() { super(); this.onNameChange = this.onNameChange.bind(this); } onNameChange (event) { this.setState({ name: event.target.value }); } render() { return ( <TextField value={ this.state.name } onChange={ this.onNameChange } /> ); }