React Hooks是React 16.8及以后版本引入的一组函数，它们允许我们在无需编写类组件的情况下，使用状态和其他React特性。Hooks可以使函数组件具有类组件的能力，例如管理状态、处理副作用等。下面是一些常用的React Hooks。
- useState：useState是最常用的React Hook之一，它用于在函数组件中声明和管理状态。它返回一个包含当前状态和更新状态的数组。可以使用数组解构来获取状态和更新状态的函数。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
- useEffect：useEffect用于处理副作用操作，例如订阅事件、数据获取、DOM操作等。它接收一个副作用函数和一个依赖数组作为参数。副作用函数会在组件渲染后执行，并且可以在组件更新后重新执行。依赖数组用于指定副作用函数的依赖项，当依赖项发生变化时，副作用函数会重新执行。
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData();
}, []); // 空数组表示仅在组件挂载时执行一次
const fetchData = () => {
// 发起数据请求
// 更新数据
setData(data);
};
return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading...</p>}
</div>
);
}
- useContext：useContext用于在函数组件中访问React的上下文（Context）。它接收一个上下文对象作为参数，并返回该上下文的当前值。可以在函数组件中使用useContext来获取和更新上下文的值。
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemeButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme }}>Button</button>
);
}
- useRef：useRef用于在函数组件中创建可变的引用。它返回一个包含可变值的对象，该值在组件的整个生命周期中保持不变。通常用于访问DOM元素、保存定时器ID等。
import React, { useRef, useEffect } from 'react';
function Timer() {
const intervalRef = useRef(null);
const timerRef = useRef(0);
useEffect(() => {
intervalRef.current = setInterval(() => {
timerRef.current += 1;
console.log(timerRef.current);
}, 1000);
return () => {
clearInterval(intervalRef.current);
};
}, []);
return <div>Timer: {timerRef.current}</div>;
}
- useCallback：useCallback用于在函数组件中缓存回调函数，以避免在每次渲染时重新创建回调函数。它接收一个回调函数和一个依赖数组作为参数，并返回一个缓存的回调函数。
import React, { useState, useCallback } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
- useMemo：useMemo用于在函数组件中缓存计算结果，以避免在每次渲染时重新计算。它接收一个计算函数和一个依赖数组作为参数，并返回计算结果。
import React, { useMemo } from 'react';
function ExpensiveComponent({ data }) {
const expensiveResult = useMemo(() => {
// 计算昂贵的结果
return calculateExpensiveResult(data);
}, [data]);
return <div>Result: {expensiveResult}</div>;
}
这只是React Hooks的一小部分，还有其他的Hooks可以用于处理表单、路由、动画等。React Hooks提供了一种更简洁、灵活的方式来编写React组件，使得函数组件在功能上与类组件更接近，并且更易于维护和测试。但需要注意的是，Hooks只能在函数组件的顶层使用，不能在条件语句、循环或嵌套函数中使用。
