React Hooks 提供了一种在函数组件中使用状态和其他 React 特性的方式，它们可以让你在不编写类的情况下使用 state, 生命周期 和其他特性。
以下是一些常见的 React Hooks 以及它们的使用场景：
- useState
useState 可以让你在函数组件中添加 state。
import React, { useState } from 'react';
function Example() {
// 定义一个 'count' state 变量，初始值为 0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
- useEffect
useEffect 可以让你在函数组件中添加副作用。它就像是 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用 ref 来直接访问 DOM
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
- useContext
useContext 可以让你在组件之间共享和访问数据。
import React, { useContext } from 'react';
const UserContext = React.createContext(null);
function UserInfo() {
const user = useContext(UserContext);
return <p>Hello, {user.name}!</p>;
}
function App() {
const user = { name: 'Alice', avatar: 'https://...' };
return (
<UserContext.Provider value={user}>
<UserInfo />
</UserContext.Provider>
);
}
- useReducer
useReducer 是 useState 的替代方法，它更适合管理复杂的状态。
import React, { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
throw new Error();
}
}
function Counter() {
const [count, dispatch] = useReducer(reducer, 0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
- useCallback
useCallback 可以让你保存一个函数，它只会在某些依赖项改变时才变化。
import React, { useCallback } from 'react';
function Example() {
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
return <MyCompone