Sobes.tech
Middle

Бо кадом hooks дар компонентҳои функсионалӣ кор кардаед? Кадомаш ба назар ғайриоддӣ буд?

sobes.tech AI

Ҷавоб аз AI

Дар компонентҳои функсионалӣ React, одатан истифода мешаванд, ки баъзе hooks:

  • useState — барои идоракунии ҳолат.
  • useEffect — барои таъсироти ҷониб (пурсишҳо, обунаҳо).
  • useContext — барои дастрасӣ ба контекст.
  • useRef — барои нигоҳ доштани арзишҳои тағйирёбанда ва дастрасӣ ба DOM.
  • useMemo ва useCallback — барои оптимизатсияи иҷроиш.

Ҳукки ғайриоддӣ, ки ман кор кардам, метавонад useImperativeHandle бошад. Он имкон медиҳад, ки намунаи, ки ба компонент-падар тавассути ref дастрас мешавад, танзим карда шавад. Ин кӯмак мекунад, вақте ки бояд назорат кард, ки кадом усулҳо ё хосиятҳо аз берун дастрасанд, махсусан дар кор бо фароъҳо бар рӯи унсурҳои DOM ё китобхонаҳои тарафи сеюм.

Масалан истифодаи useImperativeHandle:

import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Компоненти падар метавонад усули focus-ро даъват кунад:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();