React? Hook? ??????

??? ???? ??? ?? ??? React ?? ? ?? ?? ??? "??"? ? ?? ?????. ?? ???? ??? ?? ??? ??? ?? ?? ?? ?? ???? ??, ???? ? ?? React ??? ??? ? ??? React 16.8? ???????. Hooks ???? ??? ?? ??? React?? ??, ?? ?? ??? ? ?? ??? ???? ??? ???????.

??? ?? ?? ??? ?? ? ?? ?? ??? ???? ?? ???? ?? ?? ??? ??? ??? ?????. ??? ???? React ???? ? ???? ????? ????? ?? ?? ??? ??? ? ????.

---

1. ?? ?? ??

1.1. useState ??

useState ??? ?? ???? ???? ?? ?? ??? ?? ??? ??? ??? ? ????. ?? ?? ?? ?? ?? ?????? ??? ??? ??? ?????.

?:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState? ?? ?? ?? ??(? ?? 0)? ??? ?? ??(count)? ?? ?????? ??(setCount)? ??? ??? ?????.

1.2. useEffect Hook

useEffect ??? ???? ?? ?? ???? ???? ??? ? ????. ??? ????? ??? ????, ??? ?? ?? DOM ?? ??? ?? ??? ??? ? ????. ?? componentDidMount, componentDidUpdate ? componentWillUnmount? ?? ??? ?? ??? ?? ?? ???? ?????.

?:

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect? ????? ?? ??? ?? ?????. ??? ? ?? ??? ??? ??? ???? ??? ???? ??? ??? ? ????. ??? ??? ?? ??? ?? ??? ???? ? ??? ? ?? ?????.

1.3. useContext ??

useContext ??? ???? ?? Context ??? ???? ?? ???? ? ????. ?? ?? ???? ??? ???? ??? ?? ?? ?? ?? ??? ?? ???? ???? ? ?????.

?:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext? ?? ??? ???? ???? ?? ThemedComponent ?? ThemeContext ?? ????? ? ?????.

1.4. useReducer ??

useReducer ??? ? ??? ?? ??? ???? ? ?, ?? ?? ??? ?? ??? ???? ?? useState? ?????. Redux?? ???? ???? ??? ???? ?????.

?:

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer? ??? ??? ?? ??? ??? ?? ?? ??? ???? ??? ???? ???? ??? ????.

1.5. ?? ?? ??

useCallback ??? ??? ? ??? ??? ???? ???? ???? ??? ??? ?????. ?? ?? ??? ?? ?? ??? ???? ??? ? ???? ?? ???? ???? ??? ????? ? ??? ? ? ????.

?:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback? ?? ????? handlerClick ??? ?? ???? ?? ???? ?? ??? ???????? ??? ??????.

1.6. ??? ??

useMemo ??? useCallback? ????? ??? ?? ?? ??? ?? ?????. ??? ???? ?? ?? ???? ??? ????? ? ??? ???.

?:

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

• useMemo? ?? ???(? ?? ??)? ??? ??? ?? ??? ???? ??? ?? ?? ??? ???? ? ??? ???.

---

2. Hooks? ??

1. ? ???? ???? ??

??? ???? ??? ?? ?? ??? ???? ??? ?? ?? ??? ?? ? ?? ??? ??? ? ???? ??? ??? ???? ?? ??? ???? ?????.

2. ???? ??

??? ???? ?? ?? ??? ??? ?? ??? ??? ? ???? ??? ???? ??? ??? ?? ?? ?? ??? ? ?? ??? ? ????.

3. ? ?? "this" ???? ????

?? ??? ?????? ???? ??? ??? ?????? ?? ???? this ???? ?? ??? ??? ????.

4. ??? ?? ??

??? ???? ?? ??? ?? ??? ? ????. ?? ??, ??? ?? ?? ??? ???? ?? useEffect? ???? ?? ??? useState? ?? ??? ? ???? ????? ? ????.

---

3. ??

??? ???? ?? ?? ???? ??, ?? ?? ?? ? ?? React ??? ??? ? ??? ?? React? ??? ?????. useState, useEffect, useContext ? useReducer? ?? ??? ???? React ???? ? ???? ?? ??? ??? ??? ??? ??? ? ????. ??? ??? ?? ??? ?? ???? ??? ??? ?? ??? ??? ?? ?? ? ???? ?? ?? ??? ??? ? ?? ????.

---

? ??? React Hooks ??: ?? React ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!