Блог Горошко Андрея React Полное руководство по основам React

Полное руководство по основам React

goroshckogoroshcko| Нет комментария|
Рубрики:

React — это библиотека для создания пользовательских интерфейсов, которая использует концепцию виртуального DOM.

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

React также использует концепцию компонентов, которые являются переиспользуемыми блоками интерфейса. Компоненты могут быть функциональными или классовыми, а также могут принимать входные данные (пропсы) и иметь свое собственное состояние. Компоненты могут быть вложены друг в друга и образовывать иерархию.

Для создания компонентов в React используется специальный синтаксис JSX, который позволяет писать HTML-подобный код в JavaScript. JSX упрощает написание компонентов и делает код более читабельным.

Вот краткое руководство по основным особенностям React:

  1. Компоненты: React строится на компонентах — автономных логических фрагментах кода, которые описывают часть пользовательского интерфейса. Эти компоненты объединяются для создания полноценного пользовательского интерфейса.
// Пример компонента React
function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}
  1. JSX (JavaScript и XML): React использует синтаксис HTML-in-JavaScript под названием JSX. Это позволяет вам писать компоненты, которые выглядят как обычный HTML.
// Пример JSX
const element = <h1>Привет, мир!</h1>;
  1. Состояние и жизненный цикл компонентов: В React компоненты имеют состояние и жизненный цикл. Состояние позволяет компонентам управлять данными внутри себя, а жизненный цикл позволяет выполнять определенные действия в определенные моменты жизни компонента.
// Пример состояния и жизненного цикла
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Привет, мир!</h1>
        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
  1. Props: Props (сокращение от properties) — это способ передачи данных из родительских компонентов в дочерние.
// Пример использования props
function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Саша" />
      <Welcome name="Паша" />
      <Welcome name="Маша" />
    </div>
  );
}
  1. События: React имеет свою систему событий, которая очень похожа на события в обычном JavaScript. Вы можете использовать события для обработки взаимодействий пользователя с вашим приложением.
// Пример обработчика событий
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // Эта привязка обязательна для работы `this` в колбэке.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'Включено' : 'Выключено'}
      </button>
    );
  }
}
  1. Контекст: Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы через каждый уровень.
// Пример использования контекста
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
  1. Хуки: Хуки — это функции, которые позволяют вам “подцепиться” к состоянию и методам жизненного цикла React из функциональных компонентов.
// Пример использования хуков
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми на меня
      </button>
    </div>
  );
}
  1. Виртуальный DOM: React использует виртуальный DOM для эффективного обновления и рендеринга компонентов. Вместо обновления всего DOM при каждом изменении, React обновляет только те части, которые были изменены.
  2. Условный рендеринг: React позволяет вам создавать различные компоненты, которые рендерятся в зависимости от состояния вашего приложения.
// Пример условного рендеринга
function UserGreeting(props) {
  return <h1>С возвращением!</h1>;
}

function GuestGreeting(props) {
  return <h1>Пожалуйста, войдите.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
  1. Списки и ключи: React предоставляет удобные инструменты для работы со списками и массивами.
// Пример списка и ключей
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

  1. Refs: Refs предоставляют способ доступа к DOM-узлам или элементам React, созданным в методе render().
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
  1. Фрагменты: Фрагменты позволяют группировать список дочерних компонентов, не создавая дополнительных узлов в DOM.
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
  1. Higher-Order Components (HOC): HOC — это функция, которая принимает компонент и возвращает новый компонент. HOC позволяют повторно использовать логику компонентов.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
  1. Интеграция с другими библиотеками: React может быть интегрирован с другими библиотеками, такими как jQuery, D3, Canvas и другими.
  2. React и CSS: React поддерживает все стандартные способы стилизации с использованием CSS, а также дополнительные инструменты, такие как CSS-in-JS через библиотеки стилей.
  3. React Developer Tools: React Developer Tools — это расширение браузера, которое помогает отладить приложения React и отслеживать их состояние и пропсы.
  1. Refs: Refs предоставляют способ доступа к DOM-узлам или элементам React, созданным в методе render().
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
  1. Фрагменты: Фрагменты позволяют группировать список дочерних компонентов, не создавая дополнительных узлов в DOM.
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
  1. Higher-Order Components (HOC): HOC — это функция, которая принимает компонент и возвращает новый компонент. HOC позволяют повторно использовать логику компонентов.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
  1. Интеграция с другими библиотеками: React может быть интегрирован с другими библиотеками, такими как jQuery, D3, Canvas и другими1.
  2. React и CSS: React поддерживает все стандартные способы стилизации с использованием CSS, а также дополнительные инструменты, такие как CSS-in-JS через библиотеки стилей2.
  3. React Developer Tools: React Developer Tools — это расширение браузера, которое помогает отладить приложения React и отслеживать их состояние и пропсы.
  1. Redux: Redux — это библиотека для управления состоянием приложения, которая часто используется вместе с React1. Он предоставляет централизованный контейнер для хранения всего состояния приложения и позволяет управлять его с помощью действий и редукторов.
// Пример использования Redux
import { createStore } from 'redux';

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

let store = createStore(counter);

store.subscribe(() => console.log(store.getState()));

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });
  1. React Router: React Router — это стандартная библиотека для маршрутизации в React. Она позволяет вам создавать многопользовательские приложения с несколькими представлениями и связывать различные компоненты приложения с URL-адресами.
// Пример использования React Router
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </div>
    </Router>
  );
}
  1. React и серверный рендеринг: React поддерживает серверный рендеринг с помощью библиотеки ReactDOMServer. Это позволяет вам генерировать HTML на сервере, что может улучшить производительность и SEO вашего приложения.
  2. React и мобильные приложения: С помощью React Native вы можете создавать нативные мобильные приложения с использованием того же декларативного подхода к интерфейсу, что и в React.
  3. React и виртуальная реальность: С помощью React 360 вы можете создавать приложения виртуальной реальности, используя тот же подход к компонентам, что и в React.

Конечно, продолжим с примерами:

  1. React.memo: React.memo — это функция высшего порядка, которая аналогична PureComponent, но для функциональных компонентов. React.memo оборачивает компонент и предотвращает повторный рендеринг, если пропсы не изменились.
const MyComponent = React.memo(function MyComponent(props) {
  /* рендеринг с использованием пропсов */
});
  1. useEffect: useEffect — это хук, который позволяет выполнять побочные эффекты в функциональных компонентах. Он может заменить методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.
useEffect(() => {
  // Обновляем заголовок документа, используя API браузера
  document.title = `Вы нажали ${count} раз`;
});
  1. useContext: useContext — это хук, который позволяет вам использовать контекст без оборачивания компонента в Context.Consumer.
const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

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

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      Я стилизован темой из контекста!
    </button>
  );
}
  1. useReducer: useReducer — это хук, который позволяет вам управлять сложным состоянием логики с помощью редуктора.
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Счет: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
  1. React.lazy и Suspense: React.lazy позволяет вам лениво загружать компоненты, что может помочь улучшить производительность вашего приложения, особенно при загрузке больших библиотек или компонентов. Suspense позволяет вам отображать запасной контент во время ожидания загрузки компонента.
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <React.Suspense fallback={<div>Загрузка...</div>}>
        <OtherComponent />
      </React.Suspense>
    </div>
  );
}
  1. Error Boundaries: Error Boundaries — это компоненты React, которые перехватывают ошибки JavaScript в любом месте их дочернего дерева компонентов, регистрируют эти ошибки и выводят запасной UI вместо того, чтобы сломать всё приложение.
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }

    return this.props.children; 
  }
}
  1. Portals: Portals предоставляют первоклассный способ рендеринга дочерних элементов в DOM-узел, который существует вне DOM-иерархии родительского компонента.
ReactDOM.createPortal(child, container)
  1. Profiler: Profiler — это компонент React, который помогает собирать информацию о времени рендеринга каждого компонента, зарегистрированного в его дереве. Это помогает идентифицировать медленные части приложения.
<Profiler id="Navigation" onRender={callback}>
  <Navigation {...props} />
</Profiler>

Средний рейтинг
Еще нет оценок

Добавить комментарий