React Native中使用bind()的常见写法为何触发Flow类型检查错误？

问题场景 #

在React Native项目里用ES6写组件时，我们常习惯在构造函数里绑定事件处理函数的this指向，写法大概是这样：

handleSearch(input) { ... }
constructor() {
  // 其他初始化逻辑...
  this.handleSearch = this.handleSearch.bind(this);
}

但运行Flow类型检查器时，却弹出了这个错误：

Cannot assign `this.handleSearch.bind(...)` to `this.handleSearch` because property `handleSearch` is not writable.
33| this.handleSearch = this.handleSearch.bind(this);
^^^^^^^^^^^^^^^^^

错误原因 #

这其实是Flow的类型检查机制在起作用：当你在类里定义了一个类方法（比如handleSearch），Flow默认会把这个属性标记为**只读（read-only）**的。你试图在构造函数里重新给这个只读属性赋值（哪怕是绑定后的同一个函数），自然就触发了"not writable"的错误。

简单说，Flow认为类的原型方法是不能被实例重新赋值的，哪怕你是在做this绑定这种常见操作。

修复方案 #

这里有几个靠谱的解决办法，你可以根据自己的习惯选择：

1. 用类字段语法定义箭头函数（推荐）

这是现在最流行的写法，箭头函数会自动捕获当前类实例的this，不需要手动绑定，而且Flow也不会报错：

handleSearch = (input) => {
  // 函数逻辑...
}

这样写不仅省掉了构造函数里的绑定代码，还彻底避免了this指向的问题，一举两得。

2. 给类方法添加可写的类型注解

如果你还是想保留原来的写法，那可以给handleSearch加上类型注解，明确告诉Flow这个属性是可写的：

class YourComponent extends React.Component {
  handleSearch: (input: string) => void; // 先声明类型，标记为可写

  handleSearch(input) {
    // 函数逻辑...
  }

  constructor() {
    super();
    this.handleSearch = this.handleSearch.bind(this);
  }
}

通过提前声明类属性的类型，Flow就会允许你后续对它进行赋值操作了。

3. 在调用时直接绑定（不推荐）

还有一种方式是直接在JSX里绑定this，不过这种写法每次渲染都会创建一个新的函数实例，可能会带来轻微的性能损耗，所以不太推荐在频繁渲染的组件里使用：

<SearchBar onChangeText={this.handleSearch.bind(this)} />

或者用箭头函数包裹实现同样的效果：

<SearchBar onChangeText={(input) => this.handleSearch(input)} />

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