React 提供了一系列强大的 Hooks，除了 useRef 之外，还有许多其他重要的 Hooks，它们共同构成了函数式组件开发的基础。
一、useState
useState 是 React 中最基本和常用的 Hooks 之一。它用于在函数组件中添加状态管理功能。
- 用法：通过调用
useState函数并传入初始状态值，返回一个包含当前状态值和更新状态值的方法的数组。 - 示例：
```javascriptx
import React, { useState } from 'eact';
function MyComponent() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
**二、useEffect**
`useEffect` 用于处理副作用，即在函数组件的渲染过程中执行一些与界面交互、数据获取等相关的操作。
1. **用法**：接受一个回调函数作为参数，该回调函数中可以进行各种副作用操作。还可以提供第二个可选参数，用于控制副作用的触发时机。
2. **示例**：
```javascriptx
import React, { useEffect } from 'eact';
function MyComponent() {
useEffect(() => {
// 在这里进行数据获取、订阅事件等操作
}, []);
return (
<div>
<p>Component Content</p>
</div>
);
}
三、useContext
useContext 用于在函数组件中获取和使用上下文数据。
- 用法：通过创建上下文对象，并在组件树中使用
Provider组件提供上下文值，然后在子组件中使用useContext获取上下文值。 - 示例：
```javascriptx
import React, { createContext, useContext } from 'eact';
const ThemeContext = createContext();
function MyComponent() {
const theme = useContext(ThemeContext);
return (
Theme: {theme}
);
}
function ThemeProvider({ children }) {
const theme = 'dark';
return (
{children}
);
}
**四、useReducer**
`useReducer` 是一种更复杂的状态管理方式，适用于处理具有复杂状态逻辑的情况。
1. **用法**：接受一个 reducer 函数和初始状态值，返回当前状态值和发送动作的方法。
2. **示例**：
```javascriptx
import React, { useReducer } from 'eact';
const initialState = { count: 0 };
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(`Unhandled action type: ${action.type}`);
}
}
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
五、useMemo
useMemo 用于优化函数组件的性能，避免不必要的计算。
- 用法：接受一个计算函数和一个依赖数组，返回计算函数的结果，并在依赖项发生变化时重新计算。
- 示例：
```javascriptx
import React, { useMemo } from 'eact';
function MyComponent({ items }) {
const sortedItems = useMemo(() => {
return items.slice().sort((a, b) => a - b);
}, [items]);
return (
{sortedItems.map(item => (
- {item}
))}
);
}
**六、useCallback**
`useCallback` 与 `useMemo` 类似，用于优化函数组件中的函数引用，避免不必要的函数重新创建。
1. **用法**：接受一个函数和一个依赖数组，返回该函数的引用，并在依赖项发生变化时重新创建。
2. **示例**：
```javascriptx
import React, { useCallback } from 'eact';
function MyComponent({ onButtonClick }) {
const handleClick = useCallback(() => {
console.log('Button Clicked');
}, []);
return (
<div>
<button onClick={handleClick}>Click Me</button>
<button onClick={onButtonClick}>Other Button</button>
</div>
);
}
七、useImperativeHandle
useImperativeHandle 用于在使用 ref 访问子组件实例时，自定义暴露给父组件的属性和方法。
- 用法：需要与
forwardRef结合使用，在子组件中通过useImperativeHandle设置要暴露的属性和方法。 - 示例：
```javascriptx
import React, { useImperativeHandle, forwardRef } from 'eact';
function MyInput(props, ref) {
useImperativeHandle(ref, () => ({
focus: () => {
// 聚焦输入框的逻辑
},
}));
return ;
}
const MyInputWithRef = forwardRef(MyInput);
function MyComponent() {
const inputRef = useRef(null);
return (
);
}
**八、useLayoutEffect**
`useLayoutEffect` 与 `useEffect` 类似，但它会在浏览器布局和绘制之前执行，确保同步更新界面。
1. **用法**：与 `useEffect` 类似，但在执行时机上有所不同。
2. **示例**：
```javascriptx
import React, { useLayoutEffect } from 'eact';
function MyComponent() {
useLayoutEffect(() => {
// 在这里进行一些需要在布局之前执行的操作
}, []);
return (
<div>
<p>Component Content</p>
</div>
);
}
这些 Hooks 共同构成了 React 函数组件开发的强大工具集，使开发者能够更灵活、高效地构建复杂的用户界面。
