如何释放React Hooks的力量-51CTO.COM

译者 | 李睿

审校 | 重楼

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