编者按: InfoQ开设栏目"",精选技术书籍的精彩章节,以及分享看完书留下的思考和收获,欢迎大家关注.本文节选自由Artemij Fedosejev著,奇舞团译的《React 精髓》一书,介绍了如何规划React应用程序并创建可组合的React组件.
第四章 让React组件变得可响应
现在你已经知道如何创建有状态和无状态的React组件,我们可以尝试将React组件组合在一起构建更复杂的用户界面.事实上,我们现在可以开始创建第1章讨论过的web应用程序Snapterest了.在这个过程中,我们将学习如何规划React应用程序并创建可组合的React组件.让我们开始吧.
1. 使用React解决问题
编写Web应用程序之前,要考虑Web应用要解决什么问题.尽早且尽可能清晰地定义问题是走向成功解决方案(即有用的Web应用)的最重要一步.如果在开发过程之初没有定义清楚问题,或者定义得不准确,那么此后你将不得不停下来,并重新思考该怎么做,甚至要扔掉已经完成的一些代码并重新写.这是非常低效的,作为一个专业的软件开发者,你和你的团队的时间都是非常宝贵的,因此,花点时间提前想清楚问题是非常有益处的.在本书开始的时候,我强调过使用React的好处之一是代码重用,这意味着你将在更短的时间内做更多的事.因此,在看React代码之前,让我们先讨论要解决的问题是什么,而且要记得用React来思考.
我们将创建的Snapterest是一个Web应用程序,它会实时接收来自Snapkite引擎服务器的推文,并将推文逐条显示给用户.虽然我们不知道Snapterest会在什么时候收到一条新推文,但是当新推文到达时,它至少应该显示1.5秒钟以便用户有足够的时间看到并点击它.点击推文会将它添加到一个现有的推文集合或者创建一个新的集合.最终用户能够将集合导出为一段html代码.
对于我们正在构建的应用,上述描述非常笼统.让我们把它分解成更小的任务,如下图:
来源: http://www.infoq.com/cn/articles/let-react-components-become-responsive