React.js?? ?? ?? ??, ?? ?? ??? ?? ? ?? ??? ??? ? ?? ?? ?? ??? ????. ????? ?? ??? ??? ?? ???? ??????.

1. ???? ???? ??(??? ????)

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

??? ??(???? ???)

• ???()

  • ????? ????? ?? ?????.
  • ?? ??? ?? ??? ??? ???? ?????.

• static getDerivedStateFromProps(props, state)

  • ?? ???? ?? ???? ?? ??? ?? ?????.
  • props? ???? ??? ????? ? ????.

• ???()

  • ??? ?????? ???? ??? ??????.
  • DOM?? ???? React ??? ???? ???.

• comComponentDidMount()

  • ????? ???? ? ?? ?????.
  • ??? ????, ?? ?? ?? API ??? ????? ?????.

???? ??(props ?? ?? ???? ?? ?? ???)

• static getDerivedStateFromProps(props, state)

  • (???? ??? ???) props? ???? ??? ?????? ? ?????.

• shouldComponentUpdate(nextProps, nextState)

  • ????? ???? ?????.
  • ???? ???? ???? ??? ????? ? ??? ? ????.

• ???()

  • (???? ? ?? ???)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • ?? DOM? ?? ??? ?? DOM? ???? ??? ?????.
  • ???? ? ??(?: ??? ??)? ???? ? ?????.

• comComponentDidUpdate(prevProps, prevState, snapshot)

  • ???? ? ?? ?????.
  • ????? ????? ? ??? ???? ? ?????(?: prop ??? ?? API ?? ??).

??? ?? ??(?? ?? ?? ? ??)

• ????WillUnmount()
  • ????? ??? ???? ???? ??? ?????.
  • ??, ??? ?? ??? ???? ???? ? ?????.

?? ??

• comComponentDidCatch(??, ??)
  • ??? ?, ?? ?? ??? ?? ?? ?? ?? ???? ??? ?? ?? ?????.
  • ?? ?? ? ?? UI ??? ?????.

2. React Hooks(?? ????)

??? ???? ???? ??? ?? ? ?? React ??? ??? ? ?? ??? React 16.8? ??? ?? ?????.

?? ??

• useState(?? ??)
  • ??? ?? ??? ??? ??? ? ????.
  • ?? ??? ?? ?????? ??? ?????.

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

• useEffect(??, ???)
  • commentorDidMount, componentDidUpdate ? componentWillUnmount? ??? ?? ?????.
  • ??? ????, ?? ?? DOM ?? ??? ?? ???? ?????.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(????)
  • Consumer ?? ??? ???? ??? React ????? ??? ? ????.

  const value = useContext(MyContext);

?? ??

• useReducer(reducer,initialState)
  • ?? ??? ?? ??? ???? ?? useState? ?????.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(??, ???)
  • ?? ??? ???? ?? ?? ??? ????? ? ??? ?? ??? ??? ??? ?????.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

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

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(???)
  • ??? ?? ???? ?? ??? ?? ??? ?????.
  • DOM ??? ?????? ?? ??? ?? ???? ? ?????.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, ???)
  • forwardRef? ?? ref? ??? ? ???? ???? ?? ??? ?????.

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

• useLayoutEffect(??, ???)

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

• useDebugValue(?)

  • React DevTools?? ??? ?? ??? ?? ??? ???? ? ??? ? ????.

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

3. ??? ?? ??

React? ?? DOM ??? ??? ????? ? ?? ???? ?? ??? ?? ??? ?????.

• ??
• ?? ?
• ?? ?
• ??
• ?? ??
• KeyPress

?:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. ?? React ???

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

• React.createRef()

  • ??? ?????? ??? ???? ? ?????.

• React.forwardRef()

  • ?? ?? ??? ??? ?????.

• React.memo(????)

  • props? ???? ?? ?? ????? ???? ?? ?? ?????.

• React.lazy()

  • ?? ?? ? ?? ?? ?? ??? ?????.

• ??.????

  • React.lazy()? ?? ???? ??? ????? ???? ?? ??? ?????.

5. React ??? ??(????)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

?:

  const value = useContext(MyContext);

6. Prop ?? ? ?? Prop

• propType

  • ????? ??? prop ??? ???? ? ?????.

• defaultProps

  • props? ???? ????? ?????.

?:

  const [state, dispatch] = useReducer(reducer, initialState);

??

• ??? ????? ?? ????? ?? ?? ??? ?????.
• ??? ?? ??? ??? ???? ???? ?? ???? ?? ?? React ???? ????? ?????.

?? ?? ?? ??? ???? ???? ? ?? ??? ?? ??? ????, ? ???? ??? API? ?? ?? ??? ?????.

? ??? ??? ?? ?? || ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!