React Native中onChangeText={setAnswer}与箭头函数写法有什么区别？

两种写法的差异 #

• onChangeText={(text) => setAnswer(text)}：手动定义了一个匿名回调函数，onChangeText触发时会先把输入的文本值传给这个匿名函数，再由匿名函数把值传递给setAnswer执行状态更新。
• onChangeText={setAnswer}：直接把状态更新函数setAnswer作为回调传入，onChangeText触发时会自动把输入的文本值作为第一个参数传给setAnswer，直接完成状态更新。

直接简写会不会出问题？ #

在你当前的使用场景下两种写法完全等价，直接用onChangeText={setAnswer}不会有任何问题，运行效果、性能表现没有任何差异。

只有两种场景下你需要写完整的箭头函数包裹：

1. 需要在更新状态前对输入值做额外处理，比如限制输入长度、转换字符格式、加校验逻辑等，示例如下：

// 比如限制输入仅为大写、最多8位字符
onChangeText={(text) => {
  const filteredText = text.toUpperCase().slice(0,8)
  setAnswer(filteredText)
}}

2. 如果回调触发时会传入多个参数，而你只需要用其中某一个参数更新状态，这种时候简写就会出现参数不匹配的问题。不过React Native官方规范里TextInput的onChangeText回调只会传入输入文本这一个参数，所以你当前的场景完全可以放心使用简写。

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