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

【问题标题】：Arrow function logic in React Native CLI projectReact Native CLI 项目中的箭头函数逻辑
【发布时间】：2020-03-03 18:41:14
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案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 />;
  }
}

【讨论】：