Hooks 是我们在构建 React Web 应用时，如果想要使用函数组件，React 提供给我们的一些特性。这些特性不仅是 INLINECODE14948419 和 INLINECODE29d2a937 等生命周期方法的替代方案，还为我们提供了编写可维护代码的更大灵活性。
前置知识
目录
- UseState Hooks
- UseEffect Hooks
- UseRef Hooks
1. React useState() hooks: 这个 Hook 帮助函数组件来管理状态。它接收一个参数（即初始状态），并返回一个包含当前状态和用于更新该值的函数的数组。
语法:
const [state, setState] = useState( );
2. React useEffect() hooks: 这个 Hook 帮助我们在页面渲染时执行副作用操作，例如数据获取、手动 DOM 操作等。它的作用类似于类组件中的生命周期方法（如 INLINECODE52b46bed、INLINECODE7f45825e 和 componentWillUnmount）。它接受两个参数：一个函数和一个可选的依赖数组。
语法:
useEffect(() => {
console.log("welcome to geeks for geeks");
}, [input])
3. React useRef() hooks: 这个 Hook 主要用于创建对 DOM 元素的引用。它在多次重新渲染之间保留值，并且当值发生变化时不会导致重新渲染，这使应用程序运行更快，并有助于缓存和存储先前的值。它只接受一个初始值，并返回一个具有 current 属性的对象。
语法:
const stateRef = useRef();
// some code ...
现在我们将借助这些 Hooks 创建一个天气应用程序。
创建 React 应用程序 的步骤
步骤 1: 使用以下命令创建一个 React 应用程序。
npx create-react-app foldername
步骤 2: 创建项目文件夹（即 function demo）后，使用以下命令进入该文件夹。
cd foldername
步骤 3: 安装 Axios 依赖。
npm install axios
步骤 4: 运行开发服务器。
npm start
项目结构:
示例: 现在创建两个名为 App.js 和 WeatherComponent.js 的文件
App.js
CODEBLOCK_240b4bfd
WeatherComponent.js
import React, { useState, useEffect } from "react";
import axios from "axios";
const WeatherComponent = ({ location }) => {
const [weatherData, setWeatherData] = useState(null);
useEffect(() => {
const fetchData = async () => {
if (location === undefined |
location.length === 0)
location = "Delhi";
var options = {
method: "GET",
url: "https://w