Реагирующий функциональный компонент повторно отображает весь компонент, если он определен в другом функциональном компоненте. - PullRequest
Новая
       36

Реагирующий функциональный компонент повторно отображает весь компонент, если он определен в другом функциональном компоненте.

0 голосов
/ 30 марта 2020 

const List = props => {
  const SubList = (number, key) => <p key={number}>{number}</p>;

  const WholeList = () => props.numbers.map(SubList);

  // method 1 return (<WholeList/>)
  // method 2 return props.numbers.map(SubList);
};

function App() {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);

  return (
    <>
      <button onClick={() => setNumbers([...numbers, numbers.length + 1])}>
        Plus one
      </button>
      <List numbers={numbers} />
    </>
  );
}

Метод 1 и 2 визуализирует в точности одно и то же, за исключением того, что их поведение при повторном рендеринге отличается.

В методе 1, когда я нажимаю на Plus One и проверяю DOM, я обнаружил, что весь список повторно оказаны. Если вместо этого я использую метод 2, только новые добавленные номера вставляются в DOM. Я обнаружил, что у обоих есть свои варианты использования, но я не уверен в поведении. Кто-нибудь может пролить свет на это поведение? Может ли путаница возникнуть из-за того, что я никогда раньше не использовал компонент класса в React?

У меня есть пример codesandbox здесь!

1 Ответ

0 голосов
/ 15 апреля 2020

Я обнаружил, что мой вопрос является дубликатом Почему React отбрасывает все поддерево DOM и воссоздает его с нуля?

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

React, однако, может посмотреть на изменение реквизита и решить, следует ли перерисовать функциональный компонент.

В моем первоначальном вопросе const WholeList = () => props.numbers.map(SubList); определено в List, поэтому оно воссоздается каждый раз при повторном воспроизведении List. React не может достоверно сказать, изменился ли WholeList или нет, и, таким образом, его повторно отображает.

В случае 2 результат рендеринга будет определен c, который представляет собой список <p>. React может сравнить предыдущий и новый результат. Пожалуйста, смотрите реакцию Примирение .

...