Chào mừng đến Phần 2 của loạt bài React Hooks! Hôm nay chúng ta sẽ khám phá useContext và useReducer cho các tình huống quản lý state nâng cao hơn.
Hook useContext cho phép bạn sử dụng các giá trị context mà không cần prop drilling:
TypeScriptimport { createContext, useContext }
Bạn thấy thế nào?
Đăng nhập để phản hồi.
useReducer giống như useState nhưng cho logic state phức tạp:
TypeScriptimport { 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:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Số đếm: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}Trong Phần 3, chúng ta sẽ học về custom hooks và cách xây dựng logic có thể tái sử dụng!
Phát triển Web
Khám phá các React Hooks nâng cao: useContext cho quản lý state và useReducer cho state phức tạp