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

Метод 1: Базовый функциональный компонент

import React from 'react';
const MyComponent = () => {
  return (
    <div>
      {/* Component JSX */}
    </div>
  );
};
export default MyComponent;

Метод 2: Компонент функции стрелки

import React from 'react';
const MyComponent = () => (
  <div>
    {/* Component JSX */}
  </div>
);
export default MyComponent;

Метод 3: Деструктуризация реквизита

import React from 'react';
const MyComponent = ({ prop1, prop2 }) => (
  <div>
    <h1>{prop1}</h1>
    <p>{prop2}</p>
  </div>
);
export default MyComponent;

Метод 4: использование React.memo

import React from 'react';
const MyComponent = React.memo(() => {
  return (
    <div>
      {/* Component JSX */}
    </div>
  );
});
export default MyComponent;

Метод 5: использование хуков

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    // Fetch data
    setData(dataFromAPI);
  }, []);
  return (
    <div>
      {/* Component JSX */}
    </div>
  );
};
export default MyComponent;

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