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

Метод 1: родительские и дочерние компоненты
Первый метод предполагает использование родительского компонента для управления состоянием и дочернего компонента для визуализации пользовательского интерфейса. Такой подход разделяет задачи логики и рендеринга, что позволяет лучше оптимизировать производительность.

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

Метод 2: PureComponent/React.memo
React предоставляет встроенные оптимизации для функциональных компонентов, использующих React.memo, и компонентов классов, использующих PureComponent. Эти оптимизации предотвращают ненужный повторный рендеринг компонентов, когда реквизиты остаются прежними.

// FunctionalComponent.js
import React from 'react';
const FunctionalComponent = React.memo(({ prop1, prop2 }) => {
  // Component rendering logic
});
export default FunctionalComponent;
// ClassComponent.js
import React, { PureComponent } from 'react';
class ClassComponent extends PureComponent {
  render() {
    // Component rendering logic
  }
}
export default ClassComponent;

Метод 3: useMemo и useCallback
Хуки useMemoи useCallbackможно использовать для запоминания дорогостоящих вычислений или функций соответственно. Запоминая значения или функции, мы можем предотвратить ненужные перерасчеты и оптимизировать рендеринг.

import React, { useMemo, useCallback } from 'react';
const ExpensiveComponent = ({ prop1, prop2 }) => {
  const memoizedValue = useMemo(() => computeExpensiveValue(prop1), [prop1]);
  const memoizedCallback = useCallback(() => {
    performExpensiveOperation(prop2);
  }, [prop2]);
  // Component rendering logic using memoizedValue and memoizedCallback
};
export default ExpensiveComponent;

Метод 4: React.lazy и Suspense
Для больших или редко используемых компонентов мы можем использовать разделение кода и отложенную загрузку с помощью функции React.lazyи компонента Suspense.. Это оптимизирует начальное время загрузки приложения за счет загрузки компонентов по требованию.

import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};
export default App;

Используя двухкомпонентную систему и такие методы, как родительско-дочерние компоненты, PureComponent/React.memo, useMemo, useCallback и React.lazy с Suspense, вы можете значительно повысить производительность своих приложений React. Поэкспериментируйте с этими методами и выберите те, которые лучше всего подходят для ваших конкретных случаев использования, чтобы обеспечить более плавное и оптимизированное взаимодействие с пользователем.