首先我们先来理解 React Hook的背景和优势，React Hook 是在 React 16.8 版本中引入的一项重大改进。在传统的 React 类组件中，为了共享状态逻辑和处理副作用，我们需要使用复杂的生命周期方法、高阶组件或 render props 等方式来组织代码。这种方式可能导致组件间的代码分散且难以复用，同时增加了学习曲线和编写复杂组件的难度。
React Hook 的产生背景是为了简化和优化 React 组件的编写方式，它摒弃了类组件的复杂性，提供了函数式风格的开发体验。相较于传统的类组件，使用 Hook 有以下优势：更简洁、更直观、更易于推理和测试；方便地管理状态，避免了繁琐的代码和错误；灵活处理副作用，避免生命周期方法中的混乱；可复用的逻辑封装和共享；提供性能优化的工具。总之，React Hook 让我们能够以简单、清晰和高效的方式编写 React 组件。
常用Hook
useState
useState 是 React 提供的一个 Hook，它用于在函数组件中添加状态管理。通过使用 useState，我们可以在函数组件中声明一个或多个状态变量，并能够对其进行读取和更新。它接收一个初始值作为参数，并返回一个包含状态变量和更新函数的数组。通过调用更新函数，我们可以更新状态变量的值，从而触发组件的重新渲染。
使用 useState 的好处是它简化了在函数组件中管理和更新状态的过程。我们不再需要编写类组件中的 constructor 和 setState 方法，以及手动维护组件的状态。相反，useState 使用起来更加简洁和直观，使得组件的状态管理更容易理解和维护。
import React, {
useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {
count}</p>
<button onClick={
increment}>Increment</button>
</div>
);
}
export default Example;
useEffect
useEffect 也是 React 提供的一个 Hook，它用于处理副作用和模拟类组件的生命周期方法。副作用指在组件渲染期间发生的操作，比如数据获取、订阅事件、手动操作 DOM 等。在函数组件中，由于没有生命周期方法，我们无法在特定的时机执行这些操作。而 useEffect 正好解决了这个问题。
通过使用 useEffect，我们可以在函数组件中定义副作用函数，并在组件渲染时自动执行它。useEffect 接收两个参数：副作用函数和依赖数组。副作用函数会在组件渲染后执行，类似于 componentDidMount 和 componentDidUpdate。而依赖数组用于指定副作用函数的依赖项，只有当依赖项发生变化时，才会触发执行副作用函数。
使用 useEffect 可以使我们更好地控制和处理副作用逻辑，避免了在不同生命周期方法中拆分和重复代码的问题。它使得代码更具可读性和可维护性，并且提供了清理函数的机制，用于在组件销毁时执行一些必要的清理操作。
import React, {
useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component did mount');
return () => {
console.log('Component will unmount');
};
}, []);
return (
<div>
<p>Count: {
count}</p>
<button onClick={
() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Example;
useRef
- Hook 介绍：
useRef用于在函数组件中创建一个可变的引用值。它类似于类组件中的ref，可以用来保存任意可变值，并且不会触发组件重新渲染。 - 代码示例
import React, {
useRef } from 'react';
function Example() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={
inputRef} type="text" />
<button onClick={
focusInput}>Focus Input</button>
</div>
);
}
export default Example;
useContext
- Hook 介绍：
useContext用于在函数组件中访问上下文（Context）的值。它接收一个上下文对象（通过React.createContext创建），并返回当前上下文的值。它使得在组件树中深层级的组件中能够方便地使用上下文数据。 - 代码示例
import React, {
useContext } from 'react';
const ThemeContext = React.createContext('light');
function Example() {
const theme = useContext(ThemeContext);
return (
<div>
<p>Current theme: {
theme}</p>
</div>
);
}
export default Example;
useCallback
- Hook 介绍：
useCallback用于在函数组件中缓存回调函数，以避免在每次渲染时重新创建新的回调函数。它接收一个回调函数和依赖数组，并返回一个记忆化后的回调函数。 - 代码示例：
import React, {
useState, useCallback } from 'react';
function Example() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {
count}</p>
<button onClick={
increment}>Increment</button>
</div>
);
}
export default Example;
这些是一些常用的 React Hook 的介绍和代码示例：useRef 用于创建可变的引用值，useContext 用于访问上下文的值，useCallback 用于缓存回调函数。它们都可以帮助我们更好地在函数组件中管理状态、处理副作用和优化性能。
不常用的Hook
useReducer
- Hook 介绍：
useReducer用于在函数组件中实现复杂的状态管理。它类似于 Redux 中的 reducer，接收一个纯函数和初始状态，并返回当前状态和一个派发函数，用于触发状态更新。它适用于需要处理多个相关状态变化并具有复杂逻辑的场景。 - 代码示例：
import React, {
useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1 };
case 'decrement':
return {
count: state.count - 1 };
default:
throw new Error('Unexpected action');
}
}
function Example() {
const [state, dispatch] = useReducer(reducer, {
count: 0 });
const increment = () => {
dispatch({
type: 'increment' });
};
const decrement = () => {
dispatch({
type: 'decrement' });
};
return (
<div>
<p>Count: {
state.count}</p>
<button onClick={
increment}>Increment</button>
<button onClick={
decrement}>Decrement</button>
</div>
);
}
export default Example;
useMemo
- Hook 介绍：
useMemo用于在函数组件中进行性能优化，通过缓存计算结果来避免重复计算。它接收一个依赖数组和一个回调函数，并返回回调函数的结果。只有当依赖数组发生变化时，才会重新计算结果。 - 代码示例：
import React, {
useMemo } from 'react';
function Example({
a, b }) {
const result = useMemo(() => {
// 复杂的计算逻辑
return a * b;
}, [a, b]);
return (
<div>
<p>Result: {
result}</p>
</div>
);
}
export default Example;
useLayoutEffect
- Hook 介绍：
useLayoutEffect与useEffect类似，用于处理副作用，但它在浏览器执行绘制之前同步调用副作用函数。这可以用于在更新 DOM 后立即进行一些操作，如测量元素布局或触发动画。 - 代码示例：
import React, {
useLayoutEffect, useRef } from 'react';
function Example() {
const ref = useRef(null);
useLayoutEffect(() => {
// 获取元素的布局信息并进行操作
const width = ref.current.clientWidth;
console.log(`Width: ${
width}px`);
}, []);
return (
<div ref={
ref}>
<p>Example</p>
</div>
);
}
export default Example;
这些是一些不太常用但仍然有用的 React Hook 的介绍和代码示例：useReducer 用于复杂的状态管理，useMemo 用于性能优化，useLayoutEffect 用于在绘制之前同步调用副作用函数。它们可以帮助我们处理更复杂的场景和优化性能需求。
总结
总结一下，React Hook 是 React 16.8 引入的一项重要特性，它可以让我们在函数组件中使用状态和其他 React 特性，避免了类组件的繁琐和重复。通过使用 React Hook，我们可以更方便地管理组件的状态、处理副作用、优化性能等。
常用的 React Hook 包括：
- useState：用于在函数组件中管理状态；
- useEffect：用于处理副作用，如异步请求、订阅事件等；
- useContext：用于访问上下文的值；
- useRef：用于创建可变的引用值；
- useCallback：用于缓存回调函数。
较少使用但仍然有用的 React Hook 包括：
- useReducer：用于复杂的状态管理；
- useMemo：用于性能优化，根据依赖数组缓存计算结果；
- useLayoutEffect：与 useEffect 类似，但在浏览器绘制前同步调用副作用函数。
使用 React Hook 可以使代码更简洁、易读和易于维护，而且不会改变 React 的基本理念。同时，我们需要注意在使用 Hook 时遵循其规则，如仅在顶层调用 Hook、依赖数组的正确使用等，以确保正确使用和避免潜在的问题。
