如何释放 React Hooks 的力量

2023-11-06
福建
本文字数：4663 字
阅读完需：约 15 分钟

React 是用于构建用户界面的一个流行 JavaScript 库，多年来已经发生了重大变化和改进。React 中最具颠覆性的新特性之一就是引入了 Hooks。React Hooks 彻底改变了开发者在函数组件中管理状态和生命周期的方式。在这个全面的指南中，将深入研究 React Hooks 的世界，探索它们的优点、用例，以及如何利用它们来编写更干净、更易于维护的 React 代码。

介绍

由 Facebook 公司开发的 React 已经成为构建现代交互式 Web 应用程序的首选库。传统上，React 组件被编写为具有复杂状态和生命周期管理的类。然而，随着 React 16.8 在 2019 年初的发布，React 团队引入了 Hooks，它使开发人员能够在函数组件中使用状态和其他 React 特性。React 范式的这种转变对开发人员编写和构建代码的方式产生了深远的影响。

在这一指南中，将探索 React Hooks 的各个方面，从理解它们的核心概念到在现实场景中如何有效地使用。无论是 React 新手还是经验丰富的开发人员，这一指南都旨在提供对 React Hooks 的全面了解。

什么是 React Hooks?

React Hooks 是让用户从函数组件中“挂钩”React 状态和生命周期特性的函数。在 Hooks 出现之前，这些特性只能在类组件中使用。有了 Hooks 之后，函数组件现在能够以更直接和更有表现力的方式管理状态、执行副作用和访问场景。

React Hooks 背后的主要动机是简化跨组件的重用有状态逻辑，并完全消除对类组件的需求。Hooks 是遵循命名约定的函数：它们都以 use 开头。React 提供了几个内置 Hooks，可以创建自己的自定义 Hooks 来封装可重用逻辑。

以下探索一下关键的 Hook 和它们的用例。

采用 Hooks 背后的动机

在深入了解 React Hooks 的细节之前，重要的是要了解引入它们背后的动机：

重用有状态逻辑

在类组件中，组件之间共享有状态逻辑通常涉及复杂的模式，例如高阶组件(HOC)和呈现 props。这可能导致“包装地狱”(wrapper hell)，并使代码更难理解。Hooks 允许用户重用有状态逻辑，而无需更改组件层次结构。这使得代码更模块化，更易于维护。

简化组件逻辑

随着类组件所包含的逻辑的增长，类组件会变得很麻烦。Hooks 允许用户根据组件封装的逻辑将组件拆分为更小、更集中的函数。这使得代码更容易阅读和维护。

消除对类的需求

类组件具有更陡峭的学习曲线，对于具有函数式编程背景的开发人员来说可能不太直观。Hooks 提供了一种更实用的方式来使用 React，使开发人员更容易理解和使用该库。

减少样板代码

类组件通常需要为生命周期方法和绑定编写重复的代码。Hooks 消除了很多这样的样板文件，产生了更干净、更简洁的代码。

基本的 Hooks

以下从基本构建块开始走上 React Hooks 之旅：

useState

useState Hooks 允许函数组件管理状态。它获取一个初始状态值，并返回一个包含当前状态的数组和一个用于更新状态的函数。这里有一个基本的例子：

JavaScript  import React, { useState } from 'react';  function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter;

复制代码

在本例中，使用 useState 初始化了一个初始值为 0 的计数状态变量。当点击“count”按钮时，可以使用 setCount 函数更新计数状态。

useEffect

useEffect Hooks 使用户能够在函数组件中执行副作用。副作用包括数据获取、DOM 操作等。useEffect 有两个参数：一个包含副作用代码的函数和一个可选的依赖项数组。

以下是一个在组件挂载时，从 API 获取数据的例子：

JavaScript  import React, { useState, useEffect } from 'react';  function DataFetching()  { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data)); }, []); // Empty dependency array means this effect runs once return (<div>{data ? (<ul> {data.map(item => <li key={item.id}>{item.name}</li>)}</ul>) : (<p>Loading data...</p> )} </div> ); }
 export default DataFetching;

复制代码

在这个例子中，useEffect Hook 在组件安装时从 API 获取数据（由于依赖项数组为空）。提取的数据存储在数据状态变量中，组件在可用时呈现它。

这些基本的 Hook 为管理函数组件中的状态和执行副作用提供了基础。然而，React 提供了各种额外的 Hooks 来处理更复杂的场景。

额外的 Hooks

React 提供了几个内置的 Hook 来满足组件逻辑的不同方面。以下是一些常用的附加钩子：

useContext

useContext Hooks 允许函数组件访问父组件的场景。提供了一种跨组件树共享值(如主题或身份验证状态)的方法，而无需人工传递 props。

下面是一个使用 useContext 来访问组件中的主题的例子：

JavaScript  import React, { useContext } from 'react';  const ThemeContext = React.createContext('light');  function ThemedButton() { const theme = useContext(ThemeContext); return ( <button className={`btn btn-${theme}`}>Themed Button</button> ); }
 export default ThemedButton;

复制代码

在这个例子中，useContext 从 ThemeContext 中检索当前主题，从而允许 ThemedButton 组件相应地设置自己的样式。

useReducer

useReducer Hook 是 useState 的一种替代方案，更适合管理复杂的状态逻辑。它接受一个 reducer 函数和一个初始状态，并返回当前状态和一个 dispatch 函数。

下面是一个使用 useReducer 的简单计数器的例子：

JavaScript  import React, { useReducer } from 'react';  function counterReducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } }
 function Counter() { const [state, dispatch] = useReducer(counterReducer, { count: 0 }); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); }
 export default Counter;

复制代码

在这个例子中，定义了一个 reducer 函数 counterReducer 来处理状态更新。useReducer Hook 初始化状态，并提供一个分派函数来分派动作。

useRef

useRef Hooks 创建一个可变 ref 对象。Refs 通常用于访问 DOM、管理焦点或缓存不会触发重新渲染的值。

以下是使用 useRef 关注输入元素的示例：

JavaScript  import React, { useRef } from 'react';  function InputWithFocus() { const inputRef = useRef(); const focusInput = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </div> ); }
 export default InputWithFocus;

复制代码

在这个例子中，inputRef ref 被附加到 input 元素上，使用户能够在单击“focus input”按钮时对其进行聚焦。

useCallback 和 useMemo

useCallback 和 useMemo Hooks 用于通过记忆函数或计算值来优化性能。useCallback 存储一个函数，而 useMemo 存储一个计算值。

以下是一个 useMemo 仅在数字发生变化时计算其平方的示例：

JavaScript  import { useState, useEffect } from 'react';  function useTimer(initialTime = 0) { const [time, setTime] = useState(initialTime); useEffect(() => { const intervalId = setInterval(() => { setTime((prevTime) => prevTime + 1); }, 1000); return () => { clearInterval(intervalId); }; }, []);  return time; }
 export default useTimer;

复制代码

在这个例子中，squaredNumber 的值是使用 useMemo 来记忆的，所以只有当数字状态改变时才会重新计算。

这些额外的 Hook 为用户的函数组件提供了灵活性和优化机会。用户可以混合和匹配这些 Hooks 以满足应用程序的特定需求。

自定义 Hooks

虽然 React 提供了一组内置的 Hooks，但用户也可以创建自己的自定义 Hooks 来封装可重用的逻辑。自定义 Hooks 遵循相同的命名约定，并且可以在内部使用现有的 Hooks。

JavaScript  import { useState, useEffect } from 'react';  function useTimer(initialTime = 0) { const [time, setTime] = useState(initialTime); useEffect(() => { const intervalId = setInterval(() => { setTime((prevTime) => prevTime + 1); }, 1000); return () => { clearInterval(intervalId); }; }, []);  return time; }
 export default useTimer;

复制代码

在这个例子中，useTimer 自定义 Hook 管理一个每秒递增的计时器。它在内部使用 useState 和 useEffect Hook。

用户可以在任何函数组件中使用这个自定义 Hook 来管理计时器，而无需复制计时器逻辑。

常见的 Hooks

React Hooks 为简化 Web 开发中的常见模式提供了许多可能性。以下来探索一些实际场景，其中 Hooks 可以特别有用：

数据获取

从 API 或其他来源获取数据是 Web 应用程序中的常见任务。用户可以使用 useEffect Hook 来获取数据和管理加载状态。以下是一个简单的例子:

JavaScript  import React, { useState, useEffect } from 'react';  function DataFetching() { const [data, setData] = useState([]);  const [loading, setLoading] = useState(true);  useEffect(() => {  fetch('https://api.example.com/data')  .then((response) => response.json())  .then((data) => {  setData(data);  setLoading(false);  });  }, []);  return (  <div>  {loading ? (  <p>Loading data...</p>  ) : (  <ul>  {data.map((item) => (  <li key={item.id}>{item.name}</li>  ))}  </ul>  )}  </div>  ); }
 export default DataFetching;

复制代码

在本例中，使用 useState 来管理数据和加载状态，并使用 useEffect 在组件装载时获取数据。

表单处理

表单是大多数 Web 应用程序的重要组成部分。React Hooks 允许用户更干净地管理表单状态和验证逻辑，从而简化了表单处理。以下是一个基本示例：

JavaScript  import React, { useState } from 'react';  function Form() {  const [formData, setFormData] = useState({  username: '', password: '', });  const handleChange = (e) => {  const { name, value } = e.target;  setFormData({  ...formData, [name]: value, }); };  const handleSubmit = (e) => {  e.preventDefault(); // Handle form submission with formData  };  return (  <form onSubmit={handleSubmit}>  <input type="text" name="username" value={formData.username}  onChange={handleChange}  />  <input type="password" name="password" value={formData.password}  onChange={handleChange}  />  <button type="submit">Submit</button>  </form> ); }
 export default Form;

复制代码

在这个例子中，使用 useState Hook 来管理表单数据，并使用 handleChange 函数来更新表单状态。

结论

在这篇指南中，从 React Hooks 的介绍和动机到实际示例和常见模式，走遍了 React Hooks 的世界。React Hooks 彻底改变了开发人员编写 React 组件的方式，使函数组件比以往任何时候都更加强大和富有表现力。

React Hooks 如今已经成为 React 开发人员工具包中的重要工具，可以提高代码的可读性、可维护性和可重用性。无论是想要开始使用 React 的初学者，还是想要重构代码库的经验丰富的开发人员，React Hooks 都提供了一种现代而有效的方式来构建健壮的 Web 应用程序。

原文标题：Unleashing the Power of React Hooks，作者：Atul Naithani

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/3e3d4a373b2ec40a5705b8a36】。

树上有只程序猿

关注

IT领域从业者分享见解 2023-06-19 加入

还未添加个人简介

发布

暂无评论

创作场景

如何释放 React Hooks 的力量

介绍

什么是 React Hooks?

采用 Hooks 背后的动机

重用有状态逻辑

简化组件逻辑

消除对类的需求

减少样板代码

基本的 Hooks

useState

useEffect

额外的 Hooks

useContext

useReducer

useRef

useCallback 和 useMemo

自定义 Hooks

常见的 Hooks

数据获取

表单处理

结论

树上有只程序猿

评论