AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React Hooks 快速入门：从一个数据请求开始

2023-02-23 169
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React Hooks 快速入门：从一个数据请求开始

前言


Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。


早期的写法以 Class 类组件为主，附带一些纯用于展示的函数组件，但是函数组件是不能控制自身的状态的。Hooks 写法引入之后，函数组件的写法开始流行起来。


函数组件引入了多种钩子函数如 useEffect、useState、useRef、useCallback、useMemo、useReducer 等等，通过这些钩子函数来管理函数组件的各自状态。


下面就通过一些例子来简单了解部分 hook。



1、新建 hooks-demo 工程项目

我的 node 版本是 v12.13.0，npm 版本是 6.12.0。

c94234bd7dd0419aa2f7cdf6b370cca7.png

执行下面命令：

npm init @vitejs/app hooks-demo --template react


执行完之后，安装依赖运行

npm install
npm run dev


c90fb3d64c2f4e14a8b5897e6937d513.png


2、基础 Hook


useState

函数内声明变量，可以通过 useState 方法，它接受一个参数，可以为默认值，也可以为一个函数。


修改 App.jsx，改成下面代码：

import React, { useState } from 'react'
function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5])
  return (
    <div className="kaimo-app">
      {
        data.map((item, index) => <div key={index}>kaimo：{item}</div>)
      }
    </div>
  )
}
export default App


页面显示结果如下：

ec2c4cf4dc7c48b998227fc6b5705a13.png



useEffect

useEffect() 的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。


无需清除的 effect

   在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。


需要清除的 effect

   还有一些副作用是需要清除的。例如订阅外部数据源。这种情况下，清除工作是非常重要的，可以防止引起内存泄露！


useEffect 的用法

我们先通过 useEffect 副作用，模拟请求一个接口数据。

import React, { useState, useEffect } from 'react'
// 模拟数据接口，2 秒后返回数据
const getDataList = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([6, 7, 8, 9, 10])
    }, 2000)
  })
}
function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5])
  useEffect(() => {
    (async() => {
      const kaimo = await getDataList()
      console.log('useEffect：kaimo', kaimo)
      setData(kaimo)
    })()
  })
  return (
    <div className="kaimo-app">
      {
        data.map((item, index) => <div key={index}>kaimo：{item}</div>)
      }
    </div>
  )
}
export default App



页面显示结果：

28b0081a4c5f44f3ab009e562e0cf3cf.gif


我们发现函数组件默认进来之后，会执行 useEffect 中的回调函数，但是当 setData 执行之后，App 组件再次刷新，刷新之后会再次执行 useEffect 的回调函数，变成一个死循环了。


useEffect 的第二个参数


有时候，我们不希望 useEffect() 每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。


function Welcome(props) {
  useEffect(() => {
    document.title = `Hello, ${props.name}`;
  }, [props.name]);
  return <h1>Hello, {props.name}</h1>;
}


上面例子中，useEffect() 的第二个参数是一个数组，指定了第一个参数（副效应函数）的依赖项（props.name）。只有该变量发生变化时，副效应函数才会执行。


如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。


因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。


我们把副作用的部分加上空数组试试：


useEffect(() => {
  (async() => {
    const kaimo = await getDataList()
    console.log('useEffect：kaimo', kaimo)
    setData(kaimo)
  })()
}, [])


我们发现只会执行一次，不会再出现死循环了。

18694d9bd32840a88f4fbc3052fc3538.png



给请求一个 query 参数

下面我们给请求加一个 query 参数，代码如下：

import React, { useState, useEffect } from 'react'
// 模拟数据接口，2 秒后返回数据
const getDataList = (query) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('kaimo-query', query);
      resolve([6, 7, 8, 9, 10])
    }, 2000)
  })
}
function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5])
  const [query, setQuery] = useState('')
  useEffect(() => {
    (async() => {
      const kaimo = await getDataList(query)
      console.log('useEffect：kaimo', kaimo)
      setData(kaimo)
    })()
  }, [query])
  return (
    <div className="kaimo-app">
      <input type="text" placeholder='请输入查询参数' onChange={e => setQuery(e.target.value)} />
      {
        data.map((item, index) => <div key={index}>kaimo：{item}</div>)
      }
    </div>
  )
}
export default App


然后我输入 1 改变 query 的值，副作用函数便会被执行，结果如下：


2ce45b46572240afbea9c1e1c786c944.png

如果你的接口有查询参数，可以将参数设置在 useEffect 的第二个参数的数组值中，这样改变查询变量的时候，副作用便会再次触发执行，相应的函数也会重新带着最新的参数，获取接口数据。



useContext

const value = useContext(MyContext);

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。


当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。


下面修改 App.jsx 代码为：


import React, { useContext } from 'react'
const themes = {
  light: {
    foreground: "#fff",
    background: "orange"
  },
  dark: {
    foreground: "#000",
    background: "green"
  }
};
const ThemeContext = React.createContext(themes.light);
function ThemedButton() {
  const theme = useContext(ThemeContext);
  console.log('ThemedButton', theme)
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      Kaimo Theme Button
    </button>
  );
}
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}
export default App


我们发现按钮用的是 dark 的主题：



3、自定义 Hook

接下来，我们把上面的模拟接口请求抽离成一个自定义 hook，新建 useKaimoApi.jsx，在里面添加

import { useState, useEffect } from 'react'
// 模拟数据接口，2 秒后返回数据
const getDataList = (query) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('kaimo-query', query);
      resolve([6, 7, 8, 9, 10])
    }, 2000)
  })
}
// 自定义 hook
const useKaimoApi = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5])
  const [query, setQuery] = useState('')
  useEffect(() => {
    (async() => {
      const kaimo = await getDataList(query)
      console.log('useEffect：kaimo', kaimo)
      setData(kaimo)
    })()
  }, [query])
  return [data, setQuery]
}
export default useKaimoApi


App.jsx 中也修改一下：

import React from 'react'
import useKaimoApi from './useKaimoApi'
function App() {
  const [data, setQuery] = useKaimoApi()
  return (
    <div className="kaimo-app">
      <input type="text" placeholder='请输入查询参数' onChange={e => setQuery(e.target.value)} />
      {
        data.map((item, index) => <div key={index}>kaimo：{item}</div>)
      }
    </div>
  )
}
export default App


结果是一样的：

b9f6cbdfd11c481ab10b4f766c9b55c2.png

我们可通过自定义 Hook 的形式，把公共逻辑抽离出来复用，这也是之前 Class 类组件不能做到的。




4、额外的 Hook


useMemo


返回一个 memoized 值。


把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。


下面我们尝试修改一下 App.jsx 里的代码：

import React, { useState, useEffect } from 'react'
// 在内部新增一个子组件，子组件接收父组件传进来的一个对象，作为子组件的 useEffect 的第二个依赖参数。
function Child({data}) {
  useEffect(() => {
    console.log('kaimo-child：查询条件', data)
  }, [data])
  return <div className='kaimo-child'>子组件</div>
}
function App() {
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [kw, setKw] = useState('')
  const kaimoData = {
    name,
    phone
  }
  return (
    <div className="kaimo-app">
      <input type="text" placeholder='请输入姓名' onChange={e => setName(e.target.value)} />
      <input type="text" placeholder='请输入电话' onChange={e => setPhone(e.target.value)} />
      <input type="text" placeholder='请输入关键词' onChange={e => setKw(e.target.value)} />
      <Child data={kaimoData} />
    </div>
  )
}
export default App



下面我们依次在输入框里输入1，2，3，发现输入 kw 为 3 的时候，发现也执行了 useEffect 内的回调函数，而子组件并没有监听 kw 的变化。

ada00197ab894cc59340203bb4aae4ab.png


这个时候我们可以通过 useMemo 将 data 包装一下，告诉 data 它需要监听的值。

import React, { useState, useEffect, useMemo } from 'react'
...
const kaimoData = useMemo(() => ({
  name,
  phone
}), [name, phone])
...


添加 useMemo 之后，我们发现 kw 输入 3 的时候，不会在触发。它相当于把父组件需要传递的参数做了一个标记，无论父组件其他状态更新任何值，都不会影响要传递给子组件的对象。


9704980e300648efab5c3f70195f5684.png


useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);


返回一个 memoized 回调函数。


把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。


useCallback 也是和 useMemo 有类似的功能。


下面我们传递一个函数给子组件，修改 App.jsx 如下所示：

import React, { useState, useEffect } from 'react'
// 在内部新增一个子组件，子组件接收父组件传进来的一个对象，作为子组件的 useEffect 的第二个依赖参数。
function Child({callback}) {
  useEffect(() => {
    callback();
  }, [callback])
  return <div className='kaimo-child'>子组件</div>
}
function App() {
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [kw, setKw] = useState('')
  const kaimoCallback = () => {
    console.log('kaimo-child：查询条件', {
      name,
      phone
    })
  }
  return (
    <div className="kaimo-app">
      <input type="text" placeholder='请输入姓名' onChange={e => setName(e.target.value)} />
      <input type="text" placeholder='请输入电话' onChange={e => setPhone(e.target.value)} />
      <input type="text" placeholder='请输入关键词' onChange={e => setKw(e.target.value)} />
      <Child callback={kaimoCallback} />
    </div>
  )
}
export default App


当我们修改任何状态值，都会触发子组件的回调函数执行。

4d48de5371114683b54235683efba20f.png



我们给要传递的函数，包裹一层 useCallback，如下所示：

import React, { useState, useEffect, useCallback } from 'react'
...
const kaimoCallback = useCallback(() => {
  console.log('kaimo-child：查询条件', {
    name,
    phone
  })
}, [])
...


无论修改其他任何属性，都不会触发子组件的副作用：

useCallback 的第二个参数同 useEffect 和 useMemo 的第二个参数，它是用于监听你需要监听的变量，如在数组内添加 name、phone、kw 等参数，当改变其中有个，都会触发子组件副作用的执行。


ae4b1ac50c2245258debfb27a5b82886.png

其他更多可以查看Hook API 索引



5、重新认识 useEffect

先来看一个例子：我们修改一下 App.jsx

import React, { useEffect, useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setTimeout(() => {
      console.log('kaimo 点击次数: ' + count);
    }, 2000);
  }
  return (
    <div className="kaimo-app">
      <button onClick={() => setCount(count + 1)}>点击{count}次</button>
      <button onClick={handleClick}>展示点击次数</button>
    </div>
  )
}
export default App


我们先按下面的步骤操作：

  1. 点击增加按钮两次，将 count 增加到 2。
  2. 然后点击展示点击次数按钮。
  3. 在 console.log 执行之前，再次点击新增按钮 2 次，将 count 增加到 4。

按照正常的思路，浏览器应该打印出 kaimo 点击次数: 4。


7317a81b3b7e41bd811b6c2a3f7ceefb.gif


我们发现打印出来的是 kaimo 点击次数: 2。


这是因为函数组件 App，在每一次渲染都会被调用，而每一次调用都会形成一个独立的上下文，可以理解成一个快照。每一次渲染形成的快照，都是互相独立的。


用一份伪代码来解释，大致如下：

// 默认初始化
function App() {
  const count = 0; // useState 返回默认值
  // ...
  function handleClick() {
    setTimeout(() => {
      console.log('kaimo 点击次数: ' + count);
    }, 2000);
  }
  // ...
}
// 第一次点击
function App() {
  const count = 1; // useState 返回值
  // ...
  function handleClick() {
    setTimeout(() => {
      console.log('kaimo 点击次数: ' + count);
    }, 2000);
  }
  // ...
}
// 第二次点击
function App() {
  const count = 2; // useState 返回值
  // ...
  function handleClick() {
    setTimeout(() => {
      console.log('kaimo 点击次数: ' + count);
    }, 2000);
  }
  // ...
}


我们可以知道，每次渲染函数组件时，useEffect 都是新的，都是不一样的。

我们改造一下代码：

import React, { useEffect, useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      console.log('kaimo 点击次数: ' + count);
    }, 2000);
  })
  return (
    <div className="kaimo-app">
      <button onClick={() => setCount(count + 1)}>点击{count}次</button>
    </div>
  )
}
export default App


我们连续点击4次，每一次点击，都会重新执行 useEffect 内的回调，并且 count 值也是当时的快照的一个常量值。

2491f3ab2531410a92d194ff7a0945cf.gif


参考资料



拓展资料




文章标签：
JavaScript
前端开发
索引
API
关键词：
React Native hooks
React Native数据
React Native hooks数据
React Native请求
React Native数据请求
凯小默
目录
相关文章
夏天49597
|
1月前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性，简化了状态管理和生命周期管理。本文从基础概念入手，详细介绍了 `useState` 和 `useEffect` 的用法，探讨了常见问题和易错点，并提供了代码示例。通过学习本文，你将更好地理解和使用 Hooks，提升开发效率。
夏天49597
69 4
游客5fdji2pvmf8888
|
1月前
|
前端开发
深入解析React Hooks：构建高效且可维护的前端应用
本文将带你走进React Hooks的世界，探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践，文章旨在帮助你充分利用Hooks来提高开发效率，编写更简洁、更可维护的前端代码。我们将通过实际代码示例，深入了解useState、useEffect等常用Hooks的内部工作原理，并探讨如何自定义Hooks以复用逻辑。
游客5fdji2pvmf8888
64 1
夏天49597
|
13天前
|
前端开发 UED 开发者
React 数据表格分页实现
本文详细介绍了如何在React中实现数据表格的分页功能，包括基础实现、常见问题及解决方案。通过状态管理和事件处理，我们可以有效地减少页面加载时间，提升用户体验。文章提供了完整的代码示例，帮助开发者解决分页按钮样式、按钮过多和初始加载慢等问题，并给出了相应的优化方案。
夏天49597
91 53
夏天49597
|
14天前
|
前端开发 搜索推荐 测试技术
React 数据表格排序与过滤
本文介绍了如何在 React 中实现数据表格的排序和过滤功能，从基础概念到实际代码实现，涵盖排序和过滤的基本原理、实现步骤、常见问题及解决方法。通过合理管理状态、优化性能和避免常见错误，帮助开发者提高用户体验和开发效率。
夏天49597
30 4
程序员成长之路
|
14天前
|
前端开发 JavaScript
深入探索React Hooks：从useState到useEffect
深入探索React Hooks：从useState到useEffect
程序员成长之路
22 1
土木林森
|
23天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱：如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来，已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念，包括 `useState` 和 `useEffect` 的使用方法，并提供了最佳实践，如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等，帮助开发者更高效地使用 Hooks，构建健壮且易于维护的 React 应用。
土木林森
30 2
mao29955
|
28天前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks，除了 `useRef` 之外，还有许多其他重要的 Hooks，它们共同构成了函数式组件开发的基础。
mao29955
35 6
G0518
|
5天前
|
缓存 前端开发 开发者
深入理解React Hooks，打造高效响应式UI
深入理解React Hooks，打造高效响应式UI
G0518
13 0
听白
|
1月前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
听白
35 1
前端徐徐
|
1月前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用，重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook，并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
前端徐徐
58 0