react常用 Hooks
React Hooks 是 React 16.8 引入的一项功能，它允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。Hooks 使函数组件可以管理本地状态、处理副作用、使用上下文等，使得函数组件更加强大和灵活。以下是常用的 React Hooks 及其使用方法：
useState
import React, { useState } from 'react';
const Counter = () => {
// 声明一个状态变量 `count` 和更新它的函数 `setCount`
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
};参数:
• useState(initialState): initialState 是状态的初始值。
返回值:
• [state, setState]: 返回当前状态和更新状态的函数。
useEffect
useEffect 允许你在函数组件中执行副作用，比如数据获取、订阅或手动操作 DOM。
import React, { useEffect, useState } from 'react';
const Example = () => {
const [data, setData] = useState(null);
useEffect(() => {
// 进行副作用操作，例如数据获取
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
// 可选的清理函数
return () => {
// 执行清理操作
};
}, []); // 空数组表示仅在组件挂载时执行
return (
{data ? {data.message}
: Loading...
}
);
};参数:
• useEffect(callback, dependencies): callback 是副作用函数，dependencies 是依赖数组，指定了 effect 何时需要重新执行。
返回值:
• undefined 或一个清理函数（如果需要清理副作用）。
useContext
useContext 允许你在组件中访问上下文。
import React, { createContext, useContext } from 'react';
// 创建上下文
const MyContext = createContext('default value');
const ChildComponent = () => {
const value = useContext(MyContext);
return Value from context: {value}
;
};
const ParentComponent = () => {
return (
);
};参数:
• useContext(Context): Context 是你创建的上下文对象。
返回值:
• 上下文的当前值。
useReducer
useReducer 是 useState 的替代方案，适用于管理复杂状态逻辑。
import React, { useReducer } from 'react';
// 定义 reducer 函数
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
Count: {state.count}
);
};参数:
• useReducer(reducer, initialState): reducer 是处理状态更新的函数，initialState 是初始状态。
返回值:
• [state, dispatch]: 返回当前状态和 dispatch 函数，用于发送动作。
useMemo
useMemo 用于优化性能，通过缓存计算结果来避免不必要的计算。
import React, { useMemo, useState } from 'react';
const ExpensiveComponent = ({ value }) => {
// 使用 useMemo 缓存计算结果
const computedValue = useMemo(() => {
// 假设这是一个昂贵的计算
return value * 2;
}, [value]); // 依赖项数组
return Computed Value: {computedValue}
;
};
const ParentComponent = () => {
const [value, setValue] = useState(1);
return (
参数:
• useMemo(() => computeValue, [dependencies]): computeValue 是计算结果的函数，dependencies 是依赖数组。
返回值:
• 缓存的计算结果。
useCallback
useCallback 用于缓存回调函数，避免每次渲染时创建新的函数实例。
import React, { useCallback, useState } from 'react';
const Button = ({ onClick }) => {
return ;
};
const ParentComponent = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]); // 依赖项数组
return (
Count: {count}
);
};参数:
• useCallback(callback, [dependencies]): callback 是需要缓存的回调函数，dependencies 是依赖数组。
返回值:
• 缓存的回调函数。
自定义 Hooks
除了内置 Hooks，你还可以创建自定义 Hooks 来重用状态逻辑。
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, [url]);
return { data, loading, error };
};使用自定义 Hook:
const App = () => {
const { data, loading, error } = useFetch('https://api.example.com/data');
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return Data: {JSON.stringify(data)};
};总结
React Hooks 使得函数组件能够实现与类组件相同的功能，提供了更简单的 API 和更强大的功能。通过 useState、useEffect、useContext、useReducer、useMemo 和 useCallback 等 Hooks，你可以在函数组件中管理状态、处理副作用、使用上下文等，构建更复杂和高效的 React 应用。