7.3 āĻšā§āĻā§āĻ° āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°
React āĻāĻ° hooks āĻāĻ° āĻ¸āĻžāĻĨā§ āĻāĻļāĻž āĻāĻ°āĻŋ āĻāĻĒāĻ¨āĻžāĻ°āĻž āĻ¸āĻŦāĻžāĻ āĻāĻŽ āĻŦā§āĻļāĻŋ āĻĒāĻ°āĻŋāĻāĻŋāĻ¤āĨ¤ useState, useEffect, useRef, useContext āĻ¸āĻš āĻāĻ°ā§ āĻ āĻ¨ā§āĻāĻā§āĻ˛ā§āĻ āĻāĻā§āĨ¤Â āĻāĻŦāĻžāĻ° āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻā§āĻ° āĻ¸āĻžāĻĨā§ āĻ°āĻŋā§ā§āĻā§āĻ āĻšā§āĻ āĻā§āĻ˛ā§Â āĻāĻŋāĻāĻžāĻŦā§ āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻ¤āĻž āĻāĻāĻ¨āĻāĻ°ā§ āĻĻā§āĻā§ āĻĢā§āĻ˛āĻŋ āĻāĻ˛ā§āĻ¨,Â
useState
interface User {
id: number;
name: string;
email: string
}
const [state, setState] = useState<User | null>(null);
āĻāĻĒāĻ¨āĻžāĻ°āĻž āĻ¯āĻĻāĻŋ āĻāĻžāĻāĻĒ assertion āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻāĻžāĻ¨ āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻāĻžāĻŦā§ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨,
const [state, setState] = useState<User>({} 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<number>(0);
const inputRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const handleClick = () => {
if (buttonRef.current) {
buttonRef.current.disabled = true;
}
};
return (
<div>
<div ref={divRef}>âĻ</div>
<input type="text" ref={inputRef} />
<button ref={buttonRef} onClick={handleClick}>
Print Name
</button>
<p>Count: {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
