查看原始帖子 https://devaradise.com/react-custom-hooks-best-practices/ 以阅读目录
如果您是 React 开发人员，您可能遇到过需要跨组件共享逻辑的情况。在这篇文章中，我们将探讨什么是自定义钩子、何时使用它们、编写它们的最佳实践，以及一些使您的 React 应用程序更干净、更易于维护的常见用例。
有关 React 的相关帖子
- 如何在 2024 年启动和设置 React 项目
- 使用 Hooks 反应函数组件
- React 条件渲染（If Else）最佳实践
React 中的自定义 Hook 是什么？
自定义钩子是一个可重用的函数，具有可在 React 组件之间共享的状态逻辑。它们从前缀 use 开始，可以调用其中的其他钩子，从而可以将复杂的状态和效果逻辑抽象为简单的、可重用的函数。
React 自定义挂钩非常适合需要在应用程序的不同部分之间共享逻辑而不重复代码的情况。这不仅可以使您的组件保持干净，还可以促进更加模块化的代码库。
请注意，自定义钩子与常规 JavaScript 可重用函数不同。自定义钩子是有状态的，这意味着您应该将 React State 与 useState 钩子或其他内置钩子一起使用。
何时在 React 中使用自定义 Hook
每当您需要跨组件重用状态逻辑时，自定义挂钩都是非常适合的，特别是对于数据获取、表单处理和身份验证等复杂任务。它们简化了组件代码，增强了可读性，并使测试和维护变得更加容易。
自定义挂钩的另一个主要用例是当您发现自己在多个地方编写相同的代码时。您可以将其提取到自定义挂钩中并在需要的地方重用，而不是复制和粘贴相同的逻辑。这提倡 DRY（不要重复自己）原则，使您的代码库更加高效且不易出错。
编写自定义 Hook 的最佳实践
创建自定义挂钩时，需要牢记一些最佳实践，以确保它们有效且可维护。以下是一些关键准则：
1.从使用开始
自定义挂钩的名称始终以 use 开头。这是一个约定，可以帮助其他 React 开发人员将这些函数识别为钩子，确保正确应用钩子规则。
2. 保持 Hooks 纯粹
确保你的钩子是纯函数。避免直接在钩子内部产生副作用；相反，使用 useEffect 或类似的钩子来管理它们。
副作用是渲染后组件中发生的任何操作或行为，并且不会直接影响当前组件渲染周期。
3. 避免不必要的渲染
使用 useMemo 或 useCallback 等记忆技术来防止钩子导致不必要的重新渲染，特别是在处理昂贵的计算或复杂的状态更新时。
利用内置钩子（例如 useState、useEffect、useReducer 和 useCallback）来管理自定义钩子内的状态和副作用。
4.返回一致的值类型
从包含状态、函数或您想要公开的任何值的钩子中返回具有一致值类型的数组或对象。这清楚地表明了该钩子提供了什么以及如何使用它。
5. 编写测试并记录您的自定义 Hook
确保您的自定义挂钩经过充分测试。使用 React 测试库和 Jest 等工具编写测试来验证钩子的行为。
为您的自定义挂钩提供清晰的文档。解释它们的作用、参数和返回值，以便其他人（和您自己）更容易使用和维护。
6. 保持简单
避免让你的钩子过于复杂。如果一个钩子开始变得太复杂，请考虑将其分解为更小、更集中的钩子。
确保你的钩子只承担单一责任。
7. 优雅地处理错误
在你的钩子内优雅地处理错误。这确保使用这些钩子的组件可以处理意外场景而不会中断。
自定义 Hook 的示例用例
以下是您在 React 项目中可能会遇到的自定义钩子的一些常见用例：
1. 数据获取
用于从 API 端点获取数据的自定义挂钩可以在需要获取和显示数据的不同组件之间重用。
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
登录后复制
const Component = () => {
const { data, loading, error } = useFetch('https://example.com/api/path');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>Data:</h1>
<pre class="brush:php;toolbar:false">{JSON.stringify(data)}
);
};
登录后复制
2. 表单处理
自定义挂钩可以管理表单状态、处理验证并提供提交处理程序，使表单管理变得轻而易举。
import { useState } from 'react';
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const handleChange = (event) => {
const { name, value } = event.target;
setValues({
...values,
[name]: value
});
};
const validate = (name, value) => {
if (value.trim() === '') {
setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' }));
} else {
setErrors((prevErrors) => ({ ...prevErrors, [name]: '' }));
}
};
const handleSubmit = (event, callback) => {
event.preventDefault();
if (Object.values(errors).every((err) => err === '')) {
callback(values);
}
};
return { values, handleChange, handleSubmit, validate, errors };
}
登录后复制
const Component = () => {
const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);
const submit = () => {
alert('Form submitted successfully');
};
return (
<form onSubmit={(e) => handleSubmit(e, submit)}>
<div>
<label>Username</label>
<input type='text' name='username' value={values.username} onChange={handleChange} />
{errors.username && <p>{errors.username}</p>}
</div>
<button type='submit'>Submit</button>
</form>
);
};
登录后复制
3. 认证
管理用户身份验证状态，包括登录、注销以及检查用户是否通过身份验证。
import { useState, useEffect } from 'react';
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
const loggedUser = localStorage.getItem('user');
if (loggedUser) {
setUser(JSON.parse(loggedUser));
}
}, []);
const login = (userData) => {
setUser(userData);
// call login api here
localStorage.setItem('user', JSON.stringify(userData));
};
const logout = () => {
setUser(null);
localStorage.removeItem('user');
};
return { user, login, logout };
}
登录后复制
4. 窗口大小
用于跟踪窗口大小变化的自定义挂钩，这对于响应式设计非常有用。
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
登录后复制
5. 去抖输入
用于消除输入更改抖动的自定义挂钩，这对于搜索输入或您想要延迟函数调用的其他场景很有用。
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
登录后复制
结论
自定义挂钩可以极大地简化您的 React 代码，使其更具可重用性和可维护性。通过遵循最佳实践，例如避免直接在钩子内部产生副作用并确保不会直接改变数组或对象，您可以创建可预测且易于测试的钩子。
如果您觉得这篇文章有用，请考虑点赞并分享。如果您对自定义钩子有意见或更多建议，请随时在评论中发表。
谢谢您，编码愉快！
以上是React 自定义 Hook 最佳实践：示例用例的详细内容。更多信息请关注PHP中文网其他相关文章！
