Функция React memo с isEqual

У меня есть компонент React.memo, который я хочу отобразить, только если свойства не меняются при отправке второго аргумента функции isEqual. Когда я console.log компонент оболочки и запомненный компонент, я вижу, что он отображается с одними и теми же реквизитами .. Что я делаю не так?

Мой компонент-оболочка

export const WrapperComponent= props => {
    console.log('MemoizeComponent', props);
    return (
       <MemoizeComponent name="memo"/>
    );
}

export const WrapperComponent;

Мой запомненный компонент

export const Component = props => {
    console.log('component: ', props.name)
    return (
       <div>{props.name}</div>
    );
}

function isEqual(prevProps, nextProps) {
    console.log(prevProps.name);
    console.log(nextProps.name);
    return prevProps.name === nextProps.name;
};

export const MemoizeComponent = React.memo(Component, isEqual);

вывод консоли:

memo
memo
component:memo
memo
memo
component:memo

reactjs memo
person LilacEilim    schedule 27.11.2019    source источник
comment
I want to render only if the props doesn't change with sending a second argument isEqual function это звучит как противоположность тому, что делает React.memo - предотвращение повторного рендеринга, если свойства не изменились.   -  person Clarity    schedule 27.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Не уверен, в чем ваш вопрос, но ваш код как есть, работает правильно:

const { useState, memo, useRef } = React;
const useRendered = () => {
  const rendered = useRef(0);
  rendered.current++;
  return rendered.current;
};
function App() {
  const [, setRender] = useState();
  const rendered = useRendered();
  return (
    <div>
      <div>rendered {rendered} times</div>
      <button onClick={() => setRender({})}>
        re render
      </button>
      <WrapperComponent name="memo" />
    </div>
  );
}

const WrapperComponent = props => {
  return <MemoizeComponent name="memo" />;
};
const Component = props => {
  const rendered = useRendered();
  return (
    <div>
      {props.name} rendered {rendered} times
    </div>
  );
};

function isEqual(prevProps, nextProps) {
  return prevProps.name === nextProps.name;
}

const MemoizeComponent = memo(Component, isEqual);

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

person HMR    schedule 27.11.2019
comment
И если компонент-оболочка снова отобразится. Будет ли он снова отображать запомненный компонент, даже если props.name не изменилось? - person LilacEilim; 27.11.2019
comment
Обертка @LilacEilim всегда будет повторно отрисовываться, потому что это функциональный компонент. Компонент, переданный в React.memo, будет повторно отображаться только в случае изменения свойств, вы могли видеть это в примере - person HMR; 27.11.2019