В чем разница между функцией функциональной и декларативной?

Разница между функциональной и декларативной функцией

Вопрос может быть немного запутанным, потому что есть перекрытие терминов. Давай разберёмся в двух основных интерпретациях: функциональный стиль (functional) vs декларативный стиль (declarative), и функциональная компонента vs декларативная компонента.

Интерпретация 1: Функциональный vs Декларативный стили программирования

Это два разных парадигма программирования.

Декларативный подход

Декларативный - это когда ты описываешь ЧТО должно произойти, но не КАК.

// ДЕКЛАРАТИВНЫЙ: описываем что хотим
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// В React (декларативный)
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Характеристики декларативного подхода:

• Описываешь конечный результат
• Браузер/интерпретатор решает как это реализовать
• Код читается как инструкция: "покажи этот список"
• Легче понять намерение

Функциональный подход

Функциональный - это когда код состоит из чистых функций, без состояния и побочных эффектов.

// ФУНКЦИОНАЛЬНЫЙ: используем функции как первоклассные объекты
const double = (n: number) => n * 2;
const add = (a: number, b: number) => a + b;
const compose = (f: Function, g: Function) => (x: any) => f(g(x));

const addAndDouble = compose(double, (x) => x + 1);
console.log(addAndDouble(5)); // ((5 + 1) * 2) = 12

// Чистые функции (без побочных эффектов)
const sum = (arr: number[]): number => {
  return arr.reduce((acc, val) => acc + val, 0);
};

// Не функциональный пример (побочный эффект)
let total = 0;
const addToTotal = (n: number) => {
  total += n; // побочный эффект!
  return total;
};

Характеристики функционального подхода:

• Чистые функции (одинаковый вход -> одинаковый выход)
• Нет побочных эффектов
• Функции как значения
• Композиция функций
• Неизменяемость данных (immutability)

Пример с реальным кодом

// ДЕКЛАРАТИВНЫЙ стиль
function getFilteredUsers(users, filter) {
  return users.filter(user => {
    return user.age > filter.minAge && user.status === filter.status;
  });
}

const result = getFilteredUsers(users, { minAge: 18, status: 'active' });

// ФУНКЦИОНАЛЬНЫЙ стиль (с использованием функций высшего порядка)
const byAge = (minAge) => (user) => user.age > minAge;
const byStatus = (status) => (user) => user.status === status;
const and = (predicate1, predicate2) => (item) => predicate1(item) && predicate2(item);

const getFilteredUsers = (users, minAge, status) => {
  const predicate = and(byAge(minAge), byStatus(status));
  return users.filter(predicate);
};

const result = getFilteredUsers(users, 18, 'active');

Интерпретация 2: Функциональная компонента vs Классовая компонента

Возможно, вопрос касается React компонент.

Функциональная компонента

Это JavaScript функция, которая возвращает JSX.

// Функциональная компонента - самый современный подход
function UserCard(props: { name: string; age: number }) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      {isExpanded && <p>Дополнительная информация</p>}
      <button onClick={() => setIsExpanded(!isExpanded)}>
        Toggle
      </button>
    </div>
  );
}

// Или со стрелочной функцией
const UserCard = (props: { name: string; age: number }) => (
  <div className="card">
    <h2>{props.name}</h2>
    <p>Age: {props.age}</p>
  </div>
);

Характеристики функциональной компоненты:

• Просто функция
• Использует Hooks (useState, useEffect, и т.д.)
• Современный стандарт в React
• Легче тестировать

Классовая компонента (устарело)

Это класс, наследующий React.Component.

// Классовая компонента - старый подход (НЕ рекомендуется)
class UserCard extends React.Component<{ name: string; age: number }> {
  state = { isExpanded: false };
  
  render() {
    return (
      <div className="card">
        <h2>{this.props.name}</h2>
        <p>Age: {this.props.age}</p>
        {this.state.isExpanded && <p>Дополнительная информация</p>}
        <button onClick={() => this.setState({ isExpanded: !this.state.isExpanded })}>
          Toggle
        </button>
      </div>
    );
  }
}

Характеристики классовой компоненты:

• Класс с методом render()
• Использует this.state и this.props
• Lifecycle методы (componentDidMount, etc)
• Более сложна для понимания
• Не рекомендуется для новых проектов

Возможно вопрос про: Декларативная компонента?

Если это о декларативности компоненты, то это о том, как компонента описывает UI.

Декларативная компонента

// ДЕКЛАРАТИВНАЯ: описываем что показать
function ProductList() {
  return (
    <div>
      <h1>Products</h1>
      <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
      </ul>
    </div>
  );
}

Императивная компонента

// ИМПЕРАТИВНАЯ: описываем как делать
function ProductList() {
  useEffect(() => {
    const ul = document.createElement('ul');
    const h1 = document.createElement('h1');
    h1.textContent = 'Products';
    
    const products = ['Product 1', 'Product 2', 'Product 3'];
    products.forEach(product => {
      const li = document.createElement('li');
      li.textContent = product;
      ul.appendChild(li);
    });
    
    const container = document.getElementById('root');
    container.appendChild(h1);
    container.appendChild(ul);
  }, []);
  
  return <div id="root"></div>;
}

Различия:

• Декларативная: пишешь JSX и браузер делает
• Императивная: вручную манипулируешь DOM

Таблица различий (все интерпретации)

Практический пример: Фильтр списка

ФУНКЦИОНАЛЬНЫЙ + ДЕКЛАРАТИВНЫЙ (ХОРОШО)

function UserFilter({ users }) {
  const [filter, setFilter] = useState('');
  
  const filtered = users.filter(user =>
    user.name.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filtered.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}

КЛАССОВЫЙ + ИМПЕРАТИВНЫЙ (ПЛОХО)

class UserFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { filter: '', filtered: [] };
  }
  
  componentDidMount() {
    this.updateFiltered();
  }
  
  updateFiltered() {
    const filtered = [];
    for (let user of this.props.users) {
      if (user.name.toLowerCase().includes(this.state.filter.toLowerCase())) {
        filtered.push(user);
      }
    }
    this.setState({ filtered });
  }
  
  render() {
    const items = [];
    for (let user of this.state.filtered) {
      items.push(
        React.createElement('li', { key: user.id }, user.name)
      );
    }
    
    return React.createElement(
      React.Fragment,
      null,
      React.createElement('input', {
        value: this.state.filter,
        onChange: (e) => {
          this.setState({ filter: e.target.value }, () => {
            this.updateFiltered();
          });
        },
      }),
      React.createElement('ul', null, items)
    );
  }
}

Best Practices

1. Используй функциональные компоненты

// ХОРОШО
function Component() { }
const Component = () => { }

// ПЛОХО (старый стиль)
class Component extends React.Component { }

2. Пиши декларативный код

// ХОРОШО: описываешь что
function List({ items }) {
  return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

// ПЛОХО: описываешь как
function List({ items }) {
  useEffect(() => {
    const ul = document.querySelector('ul');
    items.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item.name;
      ul.appendChild(li);
    });
  }, [items]);
  return <ul></ul>;
}

3. Используй функциональный стиль

// ХОРОШО: чистые функции
const double = (n) => n * 2;
const sum = (a, b) => a + b;

// ПЛОХО: побочные эффекты
let total = 0;
const add = (n) => { total += n; return total; };

Вывод

В контексте React:

• Функциональная компонента - это функция (новый стандарт)
• Декларативная компонента - описывает что показать (идеально в React)
• Функциональный стиль - использует чистые функции и композицию
• Декларативный стиль - описывает результат, не процесс

Современный React используют все три подхода одновременно: функциональные компоненты с декларативным стилем и функциональной парадигмой программирования. Это лучшая практика!