React TypeScript — это мощная комбинация, которая обеспечивает безопасность типов и масштабируемость ваших приложений React. Независимо от того, новичок вы или опытный разработчик, шпаргалка часто используемых методов может оказаться невероятно полезной. В этой статье мы рассмотрим различные методы React TypeScript и приведем примеры кода, которые помогут вам повысить свои навыки разработки.

Содержание:

1. useState

2. useEffect

3. useContext

4. useReducer

5. useRef

6. useMemo

7. useCallback

8. useState с дженериками

9. useEffect с очисткой

10. useContext с несколькими контекстами

11. useReducer со сложным состоянием

12. useRef с императивными действиями

13. useMemo для оптимизации производительности

14. useCallback для запоминаемых обратных вызовов

15. Пользовательские перехватчики

16. useState:
    Хук useState позволяет добавлять состояние к функциональным компонентам. Вот пример:

import React, { useState } from 'react';
const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};
export default Counter;

1. useEffect:
   Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Вот пример:

import React, { useEffect, useState } from 'react';
const DataFetcher = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
export default DataFetcher;

1. useContext:
   Хук useContext позволяет использовать контекст в функциональных компонентах. Вот пример:

import React, { useContext } from 'react';
import { UserContext } from './UserContext';
const UserProfile = () => {
  const user = useContext(UserContext);
  return <h1>Welcome, {user.name}!</h1>;
};
export default UserProfile;

1. useReducer:
   Хук useReducer используется для управления сложным состоянием и действиями. Вот пример:

import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const increment = () => {
    dispatch({ type: 'increment' });
  };
  const decrement = () => {
    dispatch({ type: 'decrement' });
  };
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
export default Counter;

1. useRef:
   Хук useRef позволяет хранить изменяемые значения. Вот пример:

import React, { useRef } from 'react';
const TextInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const focusInput = () => {
    inputRef.current?.focus();
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};
export default TextInput;

1. useMemo:
   Хук useMemo запоминает значение, предотвращая ненужные пересчеты. Вот пример:

import React, { useMemo } from 'react';
const ExpensiveComponent = () => {
  const expensiveValue = useMemo(() => {
    // Perform expensive calculations here
    return calculateExpensiveValue();
  }, []);
  return <div>{expensiveValue}</div>;
};
export default ExpensiveComponent;

1. useCallback:
   Хук useCallback запоминает функцию обратного вызова. Вот пример:

import React, { useCallback } from 'react';
const MemoizedButton = () => {
  const handleClick = useCallback(() => {
    // Handle button click
  }, []);
  return <button onClick={handleClick}>Click me</button>;
};
export default MemoizedButton;

В этой статье мы рассмотрели несколько основных методов React TypeScript, включая useState, useEffect, useContext, useReducer, useRef, useMemo и useCallback. Мы рассмотрели каждый метод на примерах кода, чтобы продемонстрировать их использование и преимущества. Используя эту шпаргалку, вы получите удобную ссылку на часто используемые методы React TypeScript, что позволит вам писать более надежные и масштабируемые приложения.