React开发工作流搭建:Hooks与API通信全解析
1. React中的状态概念
在React里,状态可以看作是在任意时刻代表用户界面(UI)的一组数据。例如,在汽车销售应用中,状态可以是一组被选中的汽车,用户可能想要对这些汽车进行咨询,并通过标记星星或其他跟进图标来保存它们以供后续查看。表单的状态会根据输入类型的不同而有所变化,像文本框可能为空(等待填充)或已填充,复选框可能被选中或未选中,下拉菜单可能已选择或未选择。
状态在React(实际上在其他UI框架和库中也是如此)是一个极其重要的主题,有专门的书籍和会议来探讨它。在React早期,开发者需要通过扩展JavaScript类来创建组件,并通过一系列 this
调用维护状态,这使得状态管理变得冗长且繁琐。而随着React Hooks的引入,我们有了从简单到复杂的多种处理状态的机制。
2. React Hooks、事件与状态
React及其组件本质上是一个将状态转换为用户界面的函数。React组件实际上就是一个函数,它接收 props
作为参数,函数的输出是一个JSX元素。React Hooks则是一种功能性构造,使我们能够深入组件的生命周期并操作其状态。
3. 使用useState创建有状态变量
useState
是最基础的Hook之一,它能让我们在组件中维护特定的状态。以下是一个示例,我们要在单页应用中维护一个预算状态,以便网站不会诱导我们去查看价格过高的汽车。
首先,我们对 App.js
文件进行修改: