React中能否使用箭头函数处理onChange事件更新组件state

你完全可以直接用这种写法实现state更新，这是React类组件中完全合法的常用实现，用起来没有任何问题。

传统bind写法的由来 #

你之前在老代码里看到的、给每个事件处理函数在constructor中绑定this的写法，本质是为了解决类方法的this指向丢失问题：普通的类方法如果不手动绑定this，作为事件回调传递出去后，触发时的执行上下文不会指向当前组件实例，会导致在方法内部调用this.setState、访问this.state/this.props时报错。

内联箭头函数的工作逻辑 #

你提到的这段代码：

onChange={(e) => this.setState({text: e.target.value})}

可以正常运行的核心原因是，箭头函数不会绑定自己的this，会自动继承它定义位置的词法上下文的this。这里的箭头函数定义在组件的render方法作用域中，这个作用域的this本身就指向当前组件实例，所以在箭头函数内部调用this.setState、访问组件的实例属性完全没有问题，不需要再额外执行bind操作。

写法的适用边界 #

• 这种内联箭头函数的写法，在直接绑定给原生DOM元素（比如input、button这类浏览器原生标签）的事件时，没有任何可感知的性能问题。对于逻辑简单的state更新场景，这种写法省去了单独声明类方法、在constructor中写bind代码的冗余流程，写起来非常简洁，适合快速开发。
• 唯一需要注意的优化细节：内联箭头函数会在组件每次重新渲染时生成一个全新的函数引用。如果把这个函数作为prop传递给自定义子组件，会打断子组件的浅比较优化（比如被React.memo、PureComponent包裹的子组件），导致子组件出现不必要的重复渲染。遇到这类场景，可以把箭头函数抽成类的实例字段写法（比如直接在类里写handleTextChange = (e) => this.setState({text: e.target.value})），这种写法生成的函数引用是稳定的，不会因为组件重新渲染发生变化。

内容的提问来源于stack exchange，提问作者Jan Bellenberg