Svelte или React?

<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>
 
<button on:click={increment}>
  Счетчик: {count}
</button>
 
<style>
  button { 
    background: #ff3e00;
    color: white;
  }
</style>

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
  
  function increment() {
    setCount(count + 1);
  }
  
  return (
    <button 
      onClick={increment}
      style={{ background: '#ff3e00', color: 'white' }}
    >
      Счетчик: {count}
    </button>
  );
}
 
export default Counter;

{isLoggedIn ? <UserProfile /> : <LoginForm />}

{#if isLoggedIn}
  <UserProfile />
{:else}
  <LoginForm />
{/if}

// Пример React-компонента с виртуальным DOM
function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

<!-- Svelte-компонент без виртуального DOM -->
<script>
  export let items = [];
</script>
 
<ul>
  {#each items as item (item.id)}
    <li>{item.text}</li>
  {/each}
</ul>

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
 
<button on:click={increment}>
  Счетчик: {count}
</button>

// Упрощенная версия скомпилированного Svelte-кода
let count = 0;
const button = document.createElement('button');
button.addEventListener('click', increment);
 
function increment() {
  count += 1;
  updateDOM();
}
 
function updateDOM() {
  button.textContent = `Счетчик: ${count}`;
}
 
// Начальная отрисовка
updateDOM();
document.body.appendChild(button);

function ConditionalComponent({ condition, data }) {
  if (condition) {
    return <ComponentA data={data} />;
  }
  return <ComponentB data={data} />;
}

{#if condition}
  <ComponentA data={data} />
{:else}
  <ComponentB data={data} />
{/if}

if (condition) {
  if (!component_a_showing) {
    // Удалить ComponentB, если он отображается
    if (component_b_showing) {
      detachNode(component_b);
      component_b_showing = false;
    }
    // Создать и вставить ComponentA
    component_a = createComponentA(data);
    insertNode(component_a);
    component_a_showing = true;
  } else {
    // Обновить ComponentA, если он уже отображается
    updateComponentA(component_a, data);
  }
} else {
  // Аналогичная логика для ComponentB
  // ...
}

<script>
let myElement;
 
function focusElement() {
  myElement.focus();
}
</script>
 
<input bind:this={myElement} />
<button on:click={focusElement}>Фокус</button>

<script>
import { fade, fly } from 'svelte/transition';
let visible = true;
</script>
 
<label>
<input type="checkbox" bind:checked={visible}>
Показать
</label>
 
{#if visible}
<div 
  transition:fly={{ y: 200, duration: 2000 }}
  in:fade
>
  Появляюсь красиво!
</div>
{/if}

function Counter() {
  const [count, setCount] = useState(0);
  
  // При каждом клике весь компонент перерендеривается
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

<script>
  let count = 0;
  
  function increment() {
    count += 1; // Обновится только то, что зависит от count
  }
</script>
 
<p>Счетчик: {count}</p>
<button on:click={increment}>Увеличить</button>

import { signal, computed } from '@preact/signals-react';
 
function Counter() {
  // Создаем сигнал с начальным значением 0
  const count = signal(0);
  
  // UI обновится только там, где используется сигнал count
  return (
    <div>
      <p>Счетчик: {count.value}</p>
      <button onClick={() => count.value++}>Увеличить</button>
    </div>
  );
}

<script>
  let x = 0;
  let y = 0;
  
  // Derived value (computed)
  $: sum = x + y;
</script>
 
<input type="number" bind:value={x}>
<input type="number" bind:value={y}>
<p>Сумма: {sum}</p>

function Calculator() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  
  // Memoized value
  const sum = useMemo(() => x + y, [x, y]);
  
  return (
    <>
      <input 
        type="number" 
        value={x} 
        onChange={e => setX(Number(e.target.value))} 
      />
      <input 
        type="number" 
        value={y} 
        onChange={e => setY(Number(e.target.value))} 
      />
      <p>Сумма: {sum}</p>
    </>
  );
}

function Calculator() {
  const x = signal(0);
  const y = signal(0);
  
  // Computed signal
  const sum = computed(() => x.value + y.value);
  
  return (
    <>
      <input 
        type="number" 
        value={x.value} 
        onChange={e => x.value = Number(e.target.value)} 
      />
      <input 
        type="number" 
        value={y.value} 
        onChange={e => y.value = Number(e.target.value)} 
      />
      <p>Сумма: {sum.value}</p>
    </>
  );
}

useEffect(() => {
  console.log(`Сумма изменилась: ${sum}`);
}, [sum]);

<script>
  // ...
  $: console.log(`Сумма изменилась: ${sum}`);
</script>

// С использованием signals
effect(() => {
  console.log(`Сумма изменилась: ${sum.value}`);
});

// Пример потенциальной утечки памяти в React
function LeakyComponent({ data }) {
  // Новый массив создается при каждом рендере
  const processedData = data.map(item => ({
    ...item,
    processed: expensiveComputation(item)
  }));
  
  // Функция создается заново при каждом рендере
  const handleClick = () => {
    console.log(processedData);
  };
  
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id} onClick={handleClick}>
          {item.processed}
        </div>
      ))}
    </div>
  );
}

<script>
  export let data;
  
  // Функция определена один раз при создании компонента
  function handleClick() {
    console.log(data);
  }
</script>
 
{#each data as item (item.id)}
  <div on:click={handleClick}>
    {expensiveComputation(item)}
  </div>
{/each}

<script>
  let items = [...]; // Большой массив объектов
  
  function updateItem(index, newValue) {
    // Это не вызовет обновление UI!
    items[index].value = newValue;
    
    // Нужно сделать так, чтобы Svelte заметил изменение
    items = items;
    
    // Или использовать иммутабельный подход
    // items = [...items.slice(0, index), 
    //   { ...items[index], value: newValue }, 
    //   ...items.slice(index + 1)];
  }
</script>

// Пример компонента на React Native
import React from 'react';
import { View, Text, Button } from 'react-native';
 
function CounterComponent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <View>
      <Text>Счетчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(count + 1)} />
    </View>
  );
}

<!-- Пример компонента на Svelte Native -->
<page>
  <actionBar title="Счетчик"/>
  <stackLayout>
    <label text="Счетчик: {count}" />
    <button text="Увеличить" on:tap={() => count++} />
  </stackLayout>
</page>
 
<script>
  let count = 0;
</script>

// Типичные ошибки новичков в React
function BuggyComponent() {
  // Ошибка: хуки вызываются по условию
  if (someCondition) {
    const [state, setState] = useState(initialValue);
  }
  
  // Ошибка: неправильная обработка асинхронных обновлений
  const handleClick = () => {
    setState(state + 1);
    console.log(state); // Выведет старое значение!
  };
  
  // Ошибка: бесконечный цикл из-за неправильных зависимостей
  useEffect(() => {
    fetchData();
  });
}

<script>
  let count = 0;
  
  function increment() {
    count += 1; // Просто меняем переменную!
  }
</script>
 
<button on:click={increment}>
  Кликов: {count}
</button>

<input bind:value={username} />
<p>Привет, {username}!</p>

function Form() {
  const [username, setUsername] = useState('');
  
  return (
    <>
      <input 
        value={username} 
        onChange={(e) => setUsername(e.target.value)}
      />
      <p>Привет, {username}!</p>
    </>
  );
}

// Пример использования Material-UI в React
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
 
function DeleteButton() {
  return (
    <Button 
      variant="contained" 
      color="secondary" 
      startIcon={<DeleteIcon />}
    >
      Удалить
    </Button>
  );
}

<script>
  import { writable } from 'svelte/store';
  
  const count = writable(0);
  
  function increment() {
    count.update(n => n + 1);
  }
</script>
 
<button on:click={increment}>
  Значение: {$count}
</button>

// Next.js - статическая генерация с данными
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    // Обновлять каждые 10 минут
    revalidate: 600
  };
}
 
function ProductPage({ data }) {
  return <div>{data.title}</div>;
}

<!-- SvelteKit - +page.js -->
export async function load({ fetch }) {
  const response = await fetch('/api/products');
  const products = await response.json();
  
  return { products };
}
 
<!-- +page.svelte -->
<script>
  export let data;
  const { products } = data;
</script>
 
<ul>
  {#each products as product}
    <li>{product.title}</li>
  {/each}
</ul>

// SvelteKit - +page.js
export const prerender = true; // Статическая генерация
// или
export const ssr = false; // Только клиентский рендеринг
// или просто без опций для SSR

// Next.js - динамические пути для SSG
export async function getStaticPaths() {
  const products = await fetchProducts();
  
  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking' // Или true/false
  };
}

// Next.js - pages/api/products.js
export default async function handler(req, res) {
  const products = await fetchProducts();
  res.status(200).json(products);
}

// SvelteKit - /routes/api/products/+server.js
export async function GET() {
  const products = await fetchProducts();
  return new Response(JSON.stringify(products));
}

// React принуждает к явному управлению состоянием
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

src/
├── components/
│   ├── TaskForm.jsx
│   ├── TaskItem.jsx
│   ├── TaskList.jsx
│   ├── TaskFilters.jsx
│   └── ThemeToggle.jsx
├── hooks/
│   ├── useLocalStorage.js
│   └── useTasks.js
├── context/
│   └── ThemeContext.js
├── App.jsx
└── index.js

// src/hooks/useLocalStorage.js
import { useState, useEffect } from 'react';
 
export function useLocalStorage(key, initialValue) {
  // Получаем значение из localStorage или используем initialValue
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
 
  // Синхронизируем с localStorage при изменении
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);
 
  return [storedValue, setStoredValue];
}

// src/hooks/useTasks.js
import { useState, useCallback } from 'react';
import { useLocalStorage } from './useLocalStorage';
 
export function useTasks() {
  const [tasks, setTasks] = useLocalStorage('tasks', []);
  const [filter, setFilter] = useState('all');
 
  // Добавление новой задачи
  const addTask = useCallback((title) => {
    if (!title.trim()) return false;
    
    const newTask = {
      id: Date.now(),
      title,
      completed: false,
      createdAt: new Date()
    };
    
    setTasks(prevTasks => [...prevTasks, newTask]);
    return true;
  }, [setTasks]);
 
  // Обновление существующей задачи
  const updateTask = useCallback((id, updates) => {
    setTasks(prevTasks => 
      prevTasks.map(task => 
        task.id === id ? { ...task, ...updates } : task
      )
    );
  }, [setTasks]);
 
  // Удаление задачи
  const deleteTask = useCallback((id) => {
    setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
  }, [setTasks]);
 
  // Переключение статуса выполнения
  const toggleComplete = useCallback((id) => {
    setTasks(prevTasks => 
      prevTasks.map(task => 
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  }, [setTasks]);
 
  // Получение отфильтрованных задач
  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true; // 'all'
  });
 
  return {
    tasks: filteredTasks,
    addTask,
    updateTask,
    deleteTask,
    toggleComplete,
    filter,
    setFilter
  };
}

// src/components/TaskForm.jsx
import React, { useState, useEffect } from 'react';
 
export function TaskForm({ addTask }) {
  const [title, setTitle] = useState('');
  const [error, setError] = useState('');
  
  // Валидация в реальном времени
  useEffect(() => {
    if (!title) {
      setError('');
    } else if (title.length < 3) {
      setError('Название задачи должно содержать минимум 3 символа');
    } else if (title.length > 50) {
      setError('Название задачи не должно превышать 50 символов');
    } else {
      setError('');
    }
  }, [title]);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!error && title.trim()) {
      const success = addTask(title);
      if (success) {
        setTitle('');
      }
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="task-form">
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Добавить новую задачу..."
        className={error ? 'error' : ''}
      />
      {error && <div className="error-message">{error}</div>}
      <button type="submit" disabled={!!error || !title.trim()}>
        Добавить
      </button>
    </form>
  );
}

// src/components/TaskItem.jsx
import React, { useState } from 'react';
 
export function TaskItem({ task, onToggle, onDelete, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editTitle, setEditTitle] = useState(task.title);
  
  const handleEdit = () => {
    if (editTitle.trim() && editTitle !== task.title) {
      onUpdate(task.id, { title: editTitle });
    }
    setIsEditing(false);
  };
  
  return (
    <li className={`task-item ${task.completed ? 'completed' : ''}`}>
      <div className="task-item-content">
        <input
          type="checkbox"
          checked={task.completed}
          onChange={() => onToggle(task.id)}
        />
        
        {isEditing ? (
          <input
            type="text"
            value={editTitle}
            onChange={(e) => setEditTitle(e.target.value)}
            onBlur={handleEdit}
            onKeyPress={(e) => e.key === 'Enter' && handleEdit()}
            autoFocus
          />
        ) : (
          <span 
            onClick={() => setIsEditing(true)}
            className="task-title"
          >
            {task.title}
          </span>
        )}
      </div>
      
      <button 
        className="delete-btn"
        onClick={() => onDelete(task.id)}
      >
        Удалить
      </button>
    </li>
  );
}

// src/components/TaskList.jsx
import React, { memo } from 'react';
import { TaskItem } from './TaskItem';
 
export const TaskList = memo(function TaskList({ 
  tasks, 
  onToggle, 
  onDelete, 
  onUpdate 
}) {
  if (tasks.length === 0) {
    return <p className="empty-list">Нет задач для отображения</p>;
  }
  
  return (
    <ul className="task-list">
      {tasks.map(task => (
        <TaskItem
          key={task.id}
          task={task}
          onToggle={onToggle}
          onDelete={onDelete}
          onUpdate={onUpdate}
        />
      ))}
    </ul>
  );
});

// src/components/TaskFilters.jsx
import React from 'react';
 
export function TaskFilters({ filter, setFilter }) {
  return (
    <div className="task-filters">
      <button 
        className={filter === 'all' ? 'active' : ''} 
        onClick={() => setFilter('all')}
      >
        Все
      </button>
      <button 
        className={filter === 'active' ? 'active' : ''} 
        onClick={() => setFilter('active')}
      >
        Активные
      </button>
      <button 
        className={filter === 'completed' ? 'active' : ''} 
        onClick={() => setFilter('completed')}
      >
        Завершенные
      </button>
    </div>
  );
}

// src/context/ThemeContext.js
import React, { createContext, useState, useContext, useEffect } from 'react';
 
const ThemeContext = createContext();
 
export function ThemeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(() => {
    const saved = localStorage.getItem('darkMode');
    return saved ? JSON.parse(saved) : false;
  });
  
  useEffect(() => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
    document.body.classList.toggle('dark-mode', darkMode);
  }, [darkMode]);
  
  const toggleTheme = () => {
    setDarkMode(prev => !prev);
  };
  
  return (
    <ThemeContext.Provider value={{ darkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
export function useTheme() {
  return useContext(ThemeContext);
}

// src/App.jsx
import React from 'react';
import { TaskForm } from './components/TaskForm';
import { TaskList } from './components/TaskList';
import { TaskFilters } from './components/TaskFilters';
import { ThemeToggle } from './components/ThemeToggle';
import { useTasks } from './hooks/useTasks';
import { ThemeProvider } from './context/ThemeContext';
 
function App() {
  const { 
    tasks, 
    addTask, 
    updateTask, 
    deleteTask, 
    toggleComplete, 
    filter, 
    setFilter 
  } = useTasks();
  
  return (
    <ThemeProvider>
      <div className="app-container">
        <header>
          <h1>Управление задачами</h1>
          <ThemeToggle />
        </header>
        
        <TaskForm addTask={addTask} />
        
        <TaskFilters filter={filter} setFilter={setFilter} />
        
        <TaskList
          tasks={tasks}
          onToggle={toggleComplete}
          onDelete={deleteTask}
          onUpdate={updateTask}
        />
      </div>
    </ThemeProvider>
  );
}
 
export default App;

src/
├── components/
│   ├── TaskForm.svelte
│   ├── TaskItem.svelte
│   ├── TaskList.svelte
│   ├── TaskFilters.svelte
│   └── ThemeToggle.svelte
├── stores/
│   ├── tasks.js
│   └── theme.js
├── App.svelte
└── main.js

// src/stores/tasks.js
import { writable, derived } from 'svelte/store';
 
// Загрузка задач из localStorage
const storedTasks = localStorage.getItem('tasks');
const initialTasks = storedTasks ? JSON.parse(storedTasks) : [];
 
// Создание основного хранилища
export const tasks = writable(initialTasks);
 
// Создание хранилища для фильтра
export const filter = writable('all');
 
// Производное хранилище для отфильтрованных задач
export const filteredTasks = derived(
[tasks, filter],
([$tasks, $filter]) => {
  if ($filter === 'active') return $tasks.filter(task => !task.completed);
  if ($filter === 'completed') return $tasks.filter(task => task.completed);
  return $tasks; // 'all'
}
);
 
// Синхронизация с localStorage при изменении
tasks.subscribe($tasks => {
localStorage.setItem('tasks', JSON.stringify($tasks));
});
 
// Функции для работы с задачами
export function addTask(title) {
if (!title.trim()) return false;
 
const newTask = {
  id: Date.now(),
  title,
  completed: false,
  createdAt: new Date()
};
 
tasks.update($tasks => [...$tasks, newTask]);
return true;
}
 
export function updateTask(id, updates) {
tasks.update($tasks =>
  $tasks.map(task =>
    task.id === id ? { ...task, ...updates } : task
  )
);
}
 
export function deleteTask(id) {
tasks.update($tasks => $tasks.filter(task => task.id !== id));
}
 
export function toggleComplete(id) {
tasks.update($tasks =>
  $tasks.map(task =>
    task.id === id ? { ...task, completed: !task.completed } : task
  )
);
}

// src/stores/theme.js
import { writable } from 'svelte/store';
 
// Загрузка темы из localStorage
const storedTheme = localStorage.getItem('darkMode');
const initialValue = storedTheme ? JSON.parse(storedTheme) : false;
 
// Создание хранилища
export const darkMode = writable(initialValue);
 
// Синхронизация с localStorage и обновление класса body
darkMode.subscribe(value => {
localStorage.setItem('darkMode', JSON.stringify(value));
document.body.classList.toggle('dark-mode', value);
});
 
// Функция для переключения темы
export function toggleTheme() {
darkMode.update(value => !value);
}

<!-- src/components/TaskForm.svelte -->
<script>
import { addTask } from '../stores/tasks';
 
let title = '';
let error = '';
 
// Реактивное выражение для валидации
$: {
  if (!title) {
    error = '';
  } else if (title.length < 3) {
    error = 'Название задачи должно содержать минимум 3 символа';
  } else if (title.length > 50) {
    error = 'Название задачи не должно превышать 50 символов';
  } else {
    error = '';
  }
}
 
function handleSubmit() {
  if (!error && title.trim()) {
    const success = addTask(title);
    if (success) {
      title = '';
    }
  }
}
</script>
 
<form on:submit|preventDefault={handleSubmit} class="task-form">
  <input
    type="text"
    bind:value={title}
    placeholder="Добавить новую задачу..."
    class:error={!!error}
  />
  {#if error}
    <div class="error-message">{error}</div>
  {/if}
  <button type="submit" disabled={!!error || !title.trim()}>
    Добавить
  </button>
</form>

<!-- src/components/TaskItem.svelte -->
<script>
import { updateTask, deleteTask, toggleComplete } from '../stores/tasks';
 
export let task;
 
let isEditing = false;
let editTitle = task.title;
 
function handleEdit() {
  if (editTitle.trim() && editTitle !== task.title) {
    updateTask(task.id, { title: editTitle });
  }
  isEditing = false;
}
</script>
 
<li class="task-item" class:completed={task.completed}>
  <div class="task-item-content">
    <input
      type="checkbox"
      checked={task.completed}
      on:change={() => toggleComplete(task.id)}
    />
    
    {#if isEditing}
      <input
        type="text"
        bind:value={editTitle}
        on:blur={handleEdit}
        on:keypress={(e) => e.key === 'Enter' && handleEdit()}
        use:focus
      />
    {:else}
      <span 
        on:click={() => isEditing = true}
        class="task-title"
      >
        {task.title}
      </span>
    {/if}
  </div>
  
  <button 
    class="delete-btn"
    on:click={() => deleteTask(task.id)}
  >
    Удалить
  </button>
</li>
 
<script context="module">
// Директива для автофокуса
function focus(node) {
  node.focus();
  return {};
}
</script>

<!-- src/components/TaskList.svelte -->
<script>
import { filteredTasks, updateTask, deleteTask, toggleComplete } from '../stores/tasks';
import TaskItem from './TaskItem.svelte';
</script>
 
{#if $filteredTasks.length === 0}
  <p class="empty-list">Нет задач для отображения</p>
{:else}
  <ul class="task-list">
    {#each $filteredTasks as task (task.id)}
      <TaskItem
        {task}
        />
    {/each}
  </ul>
{/if}

<!-- src/components/TaskFilters.svelte -->
<script>
import { filter } from '../stores/tasks';
</script>
 
<div class="task-filters">
  <button 
    class:active={$filter === 'all'} 
    on:click={() => $filter = 'all'}
  >
    Все
  </button>
  <button 
    class:active={$filter === 'active'} 
    on:click={() => $filter = 'active'}
  >
    Активные
  </button>
  <button 
    class:active={$filter === 'completed'} 
    on:click={() => $filter = 'completed'}
  >
    Завершенные
  </button>
</div>

<!-- src/components/ThemeToggle.svelte -->
<script>
import { darkMode, toggleTheme } from '../stores/theme';
</script>
 
<button class="theme-toggle" on:click={toggleTheme}>
  {$darkMode ? 'Светлая тема' : 'Темная тема'}
</button>

<!-- src/App.svelte -->
<script>
import TaskForm from './components/TaskForm.svelte';
import TaskList from './components/TaskList.svelte';
import TaskFilters from './components/TaskFilters.svelte';
import ThemeToggle from './components/ThemeToggle.svelte';
</script>
 
<div class="app-container">
  <header>
    <h1>Управление задачами</h1>
    <ThemeToggle />
  </header>
  
  <TaskForm />
  <TaskFilters />
  <TaskList />
</div>

// src/main.js
import App from './App.svelte';
 
const app = new App({
target: document.body
});
 
export default app;