7.3 āĻšā§āĻā§āϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ
React āĻāϰ hooks āĻāϰ āϏāĻžāĻĨā§ āĻāĻļāĻž āĻāϰāĻŋ āĻāĻĒāύāĻžāϰāĻž āϏāĻŦāĻžāĻ āĻāĻŽ āĻŦā§āĻļāĻŋ āĻĒāϰāĻŋāĻāĻŋāϤāĨ¤ useState, useEffect, useRef, useContext āϏāĻš āĻāϰ⧠āĻ āύā§āĻāĻā§āϞā§āĻ āĻāĻā§āĨ¤Â āĻāĻŦāĻžāϰ āĻāĻžāĻāĻĒāϏā§āĻā§āϰāĻŋāĻĒā§āĻā§āϰ āϏāĻžāĻĨā§ āϰāĻŋā§ā§āĻā§āĻ āĻšā§āĻ āĻā§āϞā§Â āĻāĻŋāĻāĻžāĻŦā§ āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻāϰāϤ⧠āĻĒāĻžāϰāĻŋ āϤāĻž āĻāĻāύāĻāϰ⧠āĻĻā§āĻā§ āĻĢā§āϞāĻŋ āĻāϞā§āύ,Â
useState
interface User {
id: number;
name: string;
email: string
}
const [state, setState] = useState(null);
āĻāĻĒāύāĻžāϰāĻž āϝāĻĻāĻŋ āĻāĻžāĻāĻĒ assertion āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻāϰāϤ⧠āĻāĻžāύ āϤāĻžāĻšāϞ⧠āĻāĻāĻžāĻŦā§ āĻāϰāϤ⧠āĻĒāĻžāϰāĻŦā§āύ,
const [state, setState] = useState({} as User);
āĻāĻāĻžāύ⧠āĻāϏāϞ⧠āϝāĻž āĻšāĻā§āĻā§ āϤāĻž āĻšāϞ, āĻāĻžāĻāĻĒāϏā§āĻā§āϰāĻŋāĻĒā§āĻ āĻāĻŽā§āĻĒāĻžāĻāϞāĻžāϰāĻā§ āύāĻŋāϰā§āĻĻāĻŋāώā§āĻ āĻāϰ⧠āĻŦāϞāĻž āĻšāĻā§āĻā§ āϝ⧠{} User āĻāĻžāĻāĻĒā§āϰāĨ¤ āĻāĻāĻžāĻŦā§ āύāĻž āĻāϰāĻžāĻāĻž āĻāϤā§āϤāĻŽāĨ¤Â
useCallback
const handleClick = useCallback((param1: string, param2: number) => {
console.log(param1, param2);
//...
}, []);
āĻ āĻŋāĻ āϤā§āĻŽāύāĻŋ āĻāĻžāĻŦā§ āύāĻŋāĻā§ āĻŦāĻžāĻāĻŋ āĻāĻŋāĻā§ āϰāĻŋā§ā§āĻā§āĻ āĻšā§āĻ āĻāϰ āĻāĻĻāĻžāĻšāϰāĻŖ āĻĻā§ā§āĻž āĻšāϞ:
useReducer
type Action = { type: 'increment'; payload: number } | { type: 'decrement'; payload: number };
const initialCount = {
count: 0,
};
const reducer = (state: initialCount, action: Action) => {
switch (action.type) {
case 'increment':
//return something
case 'decrement':
//return something
default:
return state;
}
};
useReducer
const ReactHooks = () => {
const countRef = useRef(0);
const inputRef = useRef(null);
const divRef = useRef(null);
const buttonRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const handleClick = () => {
if (buttonRef.current) {
buttonRef.current.disabled = true;
}
};
return (
âĻ
Count: {countRef.current}
);
};