При каком условии дочернее дерево перерисуется с нуля

При каком условии дочернее дерево перерисуется с нуля?

Краткий ответ

Дочернее дерево компонента перерисуется с нуля (пересоздается) при:

1. Изменении ключа (key) компонента - самый явный способ
2. Изменении типа компонента - например, если <A /> заменить на <B />
3. Полное изменение структуры DOM - удаление и создание нового элемента
4. Условное монтирование - если компонент был размонтирован и снова смонтирован

1. Изменение ключа (key)

Это наиболее явный и контролируемый способ:

import { useState } from 'react';

function Child() {
  const [text, setText] = useState('Hello');
  
  // Обработчик input, который сохраняет состояние
  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)}
      />
      <p>{text}</p>
    </div>
  );
}

function Parent() {
  const [count, setCount] = useState(0);
  const [resetKey, setResetKey] = useState(0);

  return (
    <div>
      {/* Компонент с изменяющимся key */}
      <Child key={resetKey} />
      
      <button onClick={() => setResetKey(prev => prev + 1)}>
        Reset Child (перерисовать с нуля)
      </button>
      
      <button onClick={() => setCount(count + 1)}>
        Parent Count: {count}
      </button>
    </div>
  );
}

Когда resetKey изменяется:

• React распознает, что элемент имеет другой ключ
• Удаляет старый компонент Child полностью
• Создает новый компонент Child с нулевым состоянием
• Состояние input в Child вернется к 'Hello'

2. Изменение типа компонента

Если заменить один компонент на другой, оба будут пересоздаваться:

import { useState } from 'react';

function ComponentA() {
  const [text, setText] = useState('A');
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Component A: {text}</p>
    </div>
  );
}

function ComponentB() {
  const [text, setText] = useState('B');
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Component B: {text}</p>
    </div>
  );
}

function Parent() {
  const [showA, setShowA] = useState(true);

  return (
    <div>
      {/* При переключении типа компонента - полная перестройка */}
      {showA ? <ComponentA /> : <ComponentB />}
      
      <button onClick={() => setShowA(!showA)}>
        Toggle Component
      </button>
    </div>
  );
}

// При клике на кнопку:
// ComponentA полностью размонтируется
// ComponentB полностью смонтируется
// State обоих компонентов потеряется

3. Условное монтирование и размонтирование

Когда компонент полностью удаляется и добавляется в DOM:

import { useState } from 'react';

function Child() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('');

  React.useEffect(() => {
    console.log('Child смонтирован');
    return () => console.log('Child размонтирован');
  }, []);

  return (
    <div>
      <input 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Введи текст"
      />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Parent() {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <Child />}
      
      <button onClick={() => setShow(!show)}>
        Toggle Child (монтирование/размонтирование)
      </button>
    </div>
  );
}

// При клике на кнопку:
// 1. show = false -> Child размонтируется
// 2. show = true -> Child создаст НОВЫЙ экземпляр
// 3. Все состояние потеряется (count, inputValue вернутся к начальным значениям)
// 4. useEffect вызовется заново

4. Замена DOM элемента на другой тип

function Parent() {
  const [useDiv, setUseDiv] = useState(true);

  return (
    <div>
      {useDiv ? (
        <div className="container">
          <Child />
        </div>
      ) : (
        <section className="container">
          <Child />
        </section>
      )}
      
      <button onClick={() => setUseDiv(!useDiv)}>
        Change Parent Element Type
      </button>
    </div>
  );
}

// При смене div на section:
// Child компонент полностью пересоздается
// Его состояние теряется

5. Использование условного оператора вместо key

function List() {
  const [items, setItems] = useState([]);

  return (
    <div>
      {/* ПЛОХО - без key */}
      {items.map((item, index) => (
        <input key={index} defaultValue={item} />
      ))}
      
      {/* ХОРОШО - с правильным key */}
      {items.map((item) => (
        <input key={item.id} defaultValue={item.name} />
      ))}
    </div>
  );
}

Vue.js: Динамические компоненты

В Vue перерисовка с нуля происходит аналогично:

<template>
  <div>
    <!-- Полная перестройка при изменении key -->
    <child-component :key="resetKey" />
    
    <!-- Полная перестройка при изменении типа компонента -->
    <component :is="currentComponent" />
    
    <!-- Полная перестройка при v-if -->
    <child-component v-if="show" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      resetKey: 0,
      currentComponent: 'ComponentA',
      show: true
    };
  },
  methods: {
    resetChild() {
      // Изменение key вызывает полную перестройку
      this.resetKey++;
    },
    toggleComponent() {
      // Изменение :is вызывает полную перестройку
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA';
    },
    toggleShow() {
      // v-if размонтирует и смонтирует компонент заново
      this.show = !this.show;
    }
  }
};
</script>

Практический пример: Форма с reset

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [formKey, setFormKey] = useState(0);

  const handleReset = () => {
    // Вариант 1: Явно очищаем состояние
    setEmail('');
    setPassword('');
    
    // Вариант 2: Используем key для полной перестройки
    setFormKey(prev => prev + 1);
  };

  return (
    <form key={formKey}>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="button" onClick={handleReset}>
        Reset Form
      </button>
      <button type="submit">Login</button>
    </form>
  );
}

// При клике Reset:
// 1. key меняется с 0 на 1
// 2. form элемент полностью пересоздается
// 3. input элементы получат новые экземпляры
// 4. email и password вернутся к исходным значениям

Когда это необходимо

Используй полную перестройку при:

1. Reset формы или состояния
2. Переключение между разными режимами интерфейса
3. Загрузка новых данных (новый пользователь, новый товар)
4. Очистка всех побочных эффектов (useEffect очищаются)

Когда этого избегать

НЕ используй полную перестройку при:

1. Обычном обновлении данных (используй setState вместо key)
2. Анимациях переходов (можешь испортить анимацию)
3. Часто изменяющихся значениях (производительность)

Заключение

Дочернее дерево перерисуется с нуля при:

1. Изменении key - самый явный способ
2. Изменении типа компонента - div -> section, ComponentA -> ComponentB
3. Условном монтировании - if/else, v-if в шаблоне
4. Замене элемента DOM - другой тип или удаление-добавление

Это полезно для reset состояния, но нужно использовать аккуратно, чтобы не испортить производительность или UX.