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

Question

我创建了一个新的React Native CLI项目，并正在考虑将应用程序组件转换为基于类的组件，以便在使用react导航时修复hot reload issue。

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

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

更新:箭头问题已经回答了，尽管它对热重载问题没有帮助(这是我逻辑上的一个小故障)。有关这方面的解决方案，请参阅this link。

Answer 1

首先，在阅读这段代码时要非常小心。它看起来像两个箭头函数，但实际上第二个“箭头函数”是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 />;
  }
}