1. 什么是React
假如你正在为Web、桌面应用程序、智能手机，或虚拟现实(Virtual Reality，VR)创建用户界面(User Interface，UI)。
你期望你的页面或者应用程序能够显示可随时间变化的各种数据，例如，经过认证的用户信息、可被筛选的商品列表、数据可视化，或用户详情。
同时，你期望用户也可与应用程序进行交互，例如，选择过滤条件、数据集或用户，填写表单，或探索VR空间！
此外，你的应用程序可能会消费来自网络或者互联网的数据，例如，社交媒体的更新、股票行情或产品的可用性。
React都将会为你提供帮助。
React使构建可组合且可复用的用户界面组件变得更简单，并且这些组件可用对数据变化和用户交互做出反应。
以一个社交媒体网站的页面为例，该页面包含了按钮、帖子、评论、图像和视频，以及许多其他界面组件。
当用户向下滚动页面、打开帖子、添加评论或切换到其他界面时，React会帮助界面进行更新。
此外，页面上的某些组件可能包含了重复的子组件，这些子组件包含了相同的元素结构，只是内容不同。
而这些子组件也可以由组件构成！
如缩略图、重复的按钮、可单击的文本和大量图标。
总而言之，这个页面包含了上百个这类元素。
但是，如果将如此丰富的界面拆分成多个可复用的组件，那么开发团队就可以更轻松地专注特定的功能领域，并将这些组件应用于多个页面。
React的核心目标之一是简化组件的定义和复用，并将它们组合成复杂但易于理解且可用的接口。
类似的还有其他的前端库(如AngularJS、Vue.js和Ember.js)。
1.1 用组件构建UI
社交媒体网站丰富的、具有层级结构的多层级用户界面，均可借助React设计和编码完成。
但是现在，我们先从一些相对简单的内容入手，感受一下React的特性。
假设你想构建一个答题应用程序，帮助学习检验学习情况。
那么，你的组件应该能够控制提问的显示和隐藏，并且也可用控制答案的显示和隐藏。
你可以为提问区域和答案区域各创建一个组件。
但两个组件的结构是一样的，每个组件都有一个标题、一些可显示或隐藏的文字，以及一个控制显示或隐藏的按钮。
React可以将其简化成一个组件的定义，例如TextToggle组件。
你可以在提问和答案部分同时使用该组件，可将标题、文字和文字的显示与否传递给每个TextToggle组件。
所传递的值将作为属性(或prop)，如下面的代码所示：