ReactJS - Hooks 简介

你好，未来的 React 开发者们！今天，我们将踏上一段令人兴奋的旅程，探索 React Hooks 的世界。作为你亲切的计算机科学老师，我很高兴能引导你学习这个主题。如果你是编程新手，不用担心——我们将从基础开始，逐步深入。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们一起开始吧！

ReactJS - Introduction to Hooks

什么是 React Hooks？

在我们深入了解之前，先来了解一下 React Hooks 是什么。想象你正在搭建一个乐高房子。React Hooks 就像特殊的乐高部件，给你的房子赋予超能力。它们允许你在不编写类的情况下使用状态和其他 React 特性。酷吧？

React 从 16.8 版本开始引入了 Hooks，并且从那时起它们就改变了游戏规则。它们让你的代码更干净、更可复用、更容易理解。这就像整理你的房间——当一切都井井有条时，一切都会运转得更好！

内置 Hooks

React 提供了几个内置 Hooks。让我们来看看最常见的一些：

Hook	用途
useState	允许函数组件管理状态
useEffect	在函数组件中执行副作用
useContext	在不引入嵌套的情况下订阅 React 上下文
useReducer	在函数组件中管理复杂状态逻辑
useCallback	返回一个记忆化的回调函数以优化性能
useMemo	记忆化昂贵的计算
useRef	创建一个在重新渲染之间持久的可变引用

现在，让我们逐一深入了解这些 Hooks，并提供一些示例！

useState

useState Hook 像是一个魔法盒子，可以在你的组件中存储和更新信息。让我们看看它是如何工作的：

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点击我
</button>
</div>
);
}

在这个例子中，useState(0) 创建了一个状态变量 count，初始化为 0，以及一个函数 setCount 来更新它。每次点击按钮，setCount 被调用，更新 count 并重新渲染组件。

useEffect

useEffect 就像为你的组件设置了一个闹钟。它在每次渲染后运行，并可以执行副作用。这里有一个例子：

import React, { useState, useEffect } from 'react';

function WindowWidth() {
const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>窗口宽度：{width}</div>;
}

这个组件显示了当前窗口宽度，并在窗口大小改变时更新它。useEffect Hook 在组件挂载时设置了一个事件监听器，并在组件卸载时清理它。

应用 Hooks

现在我们已经看到了一些示例，让我们来谈谈如何有效地使用 Hooks：

只在顶层调用 Hooks：不要在循环、条件或嵌套函数中调用 Hooks。这确保了每次组件渲染时 Hooks 都以相同的顺序被调用。
只从 React 函数组件中调用 Hooks：不要从普通 JavaScript 函数中调用 Hooks。（有一个例外——你可以从自定义 Hooks 中调用 Hooks，我们稍后会学习它们！）
使用多个 Hooks：你可以在单个组件中使用尽可能多的 Hooks。每次调用 Hook 都会得到一个独立的状态。

以下是一个结合多个 Hooks 的示例：

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

if (isOnline === null) {
return '加载中...';
}
return isOnline ? '在线' : '离线';
}

这个组件使用了 useState 和 useEffect 来管理朋友的在线状态。

Hooks 的优势

Hooks 带来了几个好处：

可复用性：Hooks 允许你在不改变组件层次结构的情况下复用有状态逻辑。
可读性：它们帮助将组件内部的逻辑组织成可复用的独立单元。
灵活性：Hooks 在组件间共享有状态逻辑时提供了更多的灵活性。
简洁性：它们使理解和测试组件变得更加容易。

Hooks 的劣势

尽管 Hooks 非常优秀，但它们也有一些挑战：

学习曲线：如果你习惯了类组件，Hooks 需要一个不同的思维模式。
过度使用：很容易创建过多的自定义 Hooks，这可能导致过度抽象。
调试：对于初学者来说，调试 Hooks 可能比类组件更具挑战性。
有限的生命周期方法：某些生命周期方法没有直接的 Hook 等价物。

结论

恭喜你！你已经迈出了进入 React Hooks 世界的第一步。记住，就像学习骑自行车一样，掌握 Hooks 需要练习。如果一开始没有立即掌握，不要气馁——继续实验并构建项目。

在我们结束之前，我想起了一句著名计算机科学家 Alan Kay 的话：“预测未来的最佳方法是发明它。”有了 React Hooks，你不仅仅是在学习一个新特性——你在装备自己，为未来发明网页开发。

所以，勇敢地前进，编码，愿你的组件总是能够平滑地重新渲染！祝未来的 React 大师们编码愉快！

Credits: Image by storyset