React Native是个新手,我想在我的第一个项目中应用适当的"良好实践"。我正在尝试建立一个黑客新闻客户端。
你可以在这里找到它:https://github.com/napolux/hnative正如你所看到的,我正处于我项目的最初阶段。
我愿意将我为从组件ItemList获取新闻而进行的API调用分离到它们当前所在的位置。我的目标是最大限度地重用代码。
在伪代码中,这就是我所做的:
componentDidMount = () => {
this.makeApiRequest();
}
makeApiRequest = () => {
// Ask for data
// Save data in component state
}
render = () => {
// Use data to render stuff...
}
我仍然对redux感到困惑,我仍然不确定它是否能以任何方式满足我的需求,并帮助我组织代码。
有什么建议吗?
你走在了正确的轨道上。最常见的错误是将API调用置于componentWillMount
生命周期挂钩中,但您比大多数人都更聪明:)
和大多数事情一样,正确的答案是不满意的"取决于情况"。虽然你才刚刚开始,但我认为你走在了正确的轨道上。保持简单,直到简单变得难以管理,然后重构以解决这种复杂性。
你可以采用几种策略。我认为你已经迈出了正确的"第一步"。不过,在时机成熟的时候,你可能还想研究其他一些策略。
容器组件
您基本上将无状态组件封装在一个负责获取所需数据的容器中。这将是你合乎逻辑的"下一步"。以下是我为这个话题加了书签的几篇文章。
- https://css-tricks.com/learning-react-container-components/
- https://voice.kadira.io/let-s-compose-some-react-containers-3b91b6d9b7c8#.qgg1i13vp
- http://krasimirtsonev.com/blog/article/react-js-presentational-container-components
API助手
这是我从Tyler McGinnis那里学到的一个策略,并在我的第一个项目中使用。基本上将所有API调用放在一个单独的助手文件中。当你需要调用API时,你只需导入并使用它。如果你愿意,你可以很容易地将其与上面的容器策略相结合。
- https://github.com/geirman/RepairMaps/tree/master/App/Utils
Redux
Redux应该是你的最后一站。这给项目增加了很多样板,而且是有成本的。保持简单,直到你需要解决Redux真正擅长解决的问题。你怎么知道那是什么时候?Dan Abromov写了一篇很棒的文章,所以我会让他告诉你,这样你就可以自己进行权衡了。
- https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
您也可以查看mobx。您可以将API调用放在mobx@action方法中