почему мой заголовок рендеринга каждый раз уже использует React.memo? - PullRequest
Новая
       8

почему мой заголовок рендеринга каждый раз уже использует React.memo?

2 голосов
/ 23 апреля 2020

Не могли бы вы сказать мне why my header render every time already use React.memo ? У меня есть два раздела my app and user, когда я перехожу с my apps на user header, перерисовать почему?

вот мой код

https://codesandbox.io/s/fancy-microservice-gl734?file= / src / header. js

import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";

const Header = React.memo(function() {
  console.log("HeaderHeaderHeaderHeaderHeader");

  return <div>header</div>;
});

export default withRouter(Header);

, когда вы запускаете приложение, оно показывает apps, но когда вы нажимаете user, оно показывает user стр .. см. Заголовок консоли перерисовывается

Я пытался с pure component все еще та же проблема 

import React, { PureComponent } from "react";

class Header extends PureComponent {
  render() {
    console.log("HeaderHeaderHeaderHeader");
    return <div>header</div>;
  }
}

export default Header;

https://codesandbox.io/s/fancy-microservice-gl734?file= / src / test . js: 0-202

1 Ответ

2 голосов
/ 23 апреля 2020

К сожалению, вы пытаетесь сделать не так, как работает React.

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

Так что в случае вашего react-router, когда вы переключаете маршруты, каждый компонент будет перерисован. DOM может по-прежнему избегать ненужных обновлений, но ваши функции рендеринга будут по-прежнему вызываться.

Если вы вытащите компонент <Header/> вверх в дереве, вы сможете избежать повторных рендерингов.

...