React Native CLI 项目中的箭头函数逻辑

Question

我创建了一个新的 React Native CLI 项目，并考虑将 App 组件转换为基于 class 的组件，以在使用 react-navigation 时修复 hot reload issue。

但是我不明白这两个箭头函数的逻辑，以及如何转换它：

const App: () => React$Node = () => {
  return <NavigationWrapper />;
};

更新：箭头问题已得到解答，但它对热重载问题没有帮助（我的逻辑中存在一个小故障）。有关解决方案，请参阅 this link。

Answer 1

首先，阅读这段代码时要非常小心。看起来是两个箭头函数，其实第二个'arrow function'是App的类型注解。所以它与此相同：

const App: (() => React$Node) = () => {
  return <NavigationWrapper />;
};

甚至更清楚：

const App = (): React$Node => {
  return <NavigationWrapper />;
};

然后，记住箭头函数就像普通函数一样，所以可以这样写：

function App(): React$Node {
  return <NavigationWrapper />;
};

所以现在它看起来很清楚了：

class App {
  render(): React$Node {
    return <NavigationWrapper />;
  }
}

Arrow function logic in React Native CLI project