{"draftJsState":{"blocks":[{"data":{"image":{"id":"62480acf1c8df127de21d3c0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"48a4t"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"e4oaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React.memo — это компонент высшего порядка React, используемый для пропуска повторных рендеров. Слово “memo” в React.memo относится к термину memoization (мемоизация).","type":"unstyled","key":"7lkas"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":25},{"key":2,"length":21,"offset":76},{"key":3,"length":15,"offset":139}],"inlineStyleRanges":[{"length":252,"offset":0,"style":"ITALIC"}],"text":"Мемоизация — это метод оптимизации, используемый в основном для ускорения компьютерных программ путем хранения результатов дорогостоящих вызовов функций и возврата кэшированного результата вычислений при повторном использовании тех же входных данных.","type":"blockquote","key":"8ooa9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При оборачивании компонента с помощью React.memo React будет использовать последнюю отрисованную версию этого компонента. Мемоизация используется в приложениях React для повышения производительности.","type":"unstyled","key":"blikc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим на нескольких простых примерах, как работает React.memo и в каких проектах его применение будет полезным.","type":"unstyled","key":"1qg44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начало работы","type":"header-three","key":"58f4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component1 = () => {\n console.log(\"Component 1 rendered\")\n return (\n

Component 1

\n )\n}\n\nconst Component2 = () => {\n console.log(\"Component 2 rendered\")\n return (\n

Component 2

\n )\n}\n\nconst MemoExample = () => {\n const [counter, setCounter] = React.useState(0)\n return (\n

Count: {counter}

\n \n \n \n

\n )\n}","type":"unstyled","key":"61rbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенном выше примере два компонента будут записываться в консоли при рендеринге и повторном рендеринге. Компонент MemoExample содержит Component1 и Component2, а также имеет переменную состояния counter (счетчика), при изменении которой оба компонента будут перерисовываться.","type":"unstyled","key":"ftnf7"},{"data":{"image":{"id":"62480afd53149161c25d80f8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eu05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После обновления счетчика до 3 на консоли будет 4 записи для каждого компонента. Одна — для начального рендеринга, а остальные 3 — для каждого изменения переменной счетчика.","type":"unstyled","key":"e49oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы Component1 не рендерился при изменении переменной counter, можно использовать React.memo.","type":"unstyled","key":"16upl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component1 = React.memo(function Component1(props) {\n console.log(\"Component 1 rendered\")\n return (\n

Component 1

\n )\n});\n\nconst Component2 = () => {\n console.log(\"Component 2 rendered\")\n return (\n

Component 2

\n )\n}\n\nconst MemoExample = () => {\n const [counter, setCounter] = React.useState(0)\n return (\n

Count: {counter}

\n \n \n \n

\n )\n}","type":"unstyled","key":"3uoj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда Component1 обернут React.memo, посмотрим, к чему это приведет.","type":"unstyled","key":"2oh3s"},{"data":{"image":{"id":"62480afd6e96966b61d7fa73"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"buq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Component1 оставляет только одну запись на консоли для первоначального рендеринга и ни одной записи после этого.","type":"unstyled","key":"25dim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства","type":"header-three","key":"5koa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мемоизированные компоненты могут получать реквизиты, как и любые другие. Если значение реквизита изменится, компонент будет рендериться как обычно.","type":"unstyled","key":"f43qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component1 = React.memo(function Component1(props) {\n console.log(\"Component 1 rendered\")\n return (\n

Component 1 count: {props.count}

\n )\n});\n\nconst Component2 = () => {\n console.log(\"Component 2 rendered\")\n return (\n

Component 2

\n )\n}\n\nconst MemoExample = () => {\n const [counter, setCounter] = React.useState(0)\n const [counter2, setCounter2] = React.useState(0)\n return (\n

Count: {counter}

Count 2: {counter2}

\n \n \n \n \n

\n )\n}","type":"unstyled","key":"7ejn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенный выше примере добавлены второй и начальный счетчики в качестве свойства Component1.","type":"unstyled","key":"235jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При увеличении значения counter должны отразиться записи на консоли для Component1. А если увеличится значение counter2, Component1 должен пропустить его рендеринг, как и раньше.","type":"unstyled","key":"f7l3t"},{"data":{"image":{"id":"62480afd9fe0ef42e56557f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"889fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Консоль показывает 2 записи для начального рендера, еще 2 после увеличения значения counter и только 1 при увеличении counter2.","type":"unstyled","key":"fcnsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В идеале мемоизированные компоненты должны быть чистыми. Рекомендуется добавлять в такой компонент только те свойства, которые редко меняются.","type":"unstyled","key":"7d4h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отправная точка","type":"header-three","key":"auu9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы попрактиковаться с React.memo, можно использовать панели приложений.","type":"unstyled","key":"cf7mq"},{"data":{"image":{"id":"62480afd3b339f26d572bd03"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2ep7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панели приложений, подобные приведенной выше, являются отличными тренировочными площадками для React.memo, поскольку состоят в основном из статичного контента.","type":"unstyled","key":"aacds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяя мемоизацию там, где можно использовать React.memo, вы сможете увеличить производительность React-приложений.","type":"unstyled","key":"5lrh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"aq0qs"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":56,"offset":0}],"inlineStyleRanges":[],"text":"Как использовать шаблон проектирования “Адаптер” в React","type":"unordered-list-item","key":"1h7cj"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":51,"offset":0}],"inlineStyleRanges":[],"text":"7 бесплатных шаблонов React для разработки проектов","type":"unordered-list-item","key":"aua70"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":28,"offset":0}],"inlineStyleRanges":[],"text":"Как галлюцинируют нейросети ","type":"unordered-list-item","key":"anbmg"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":8,"offset":14},{"key":8,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"75f5s"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":14,"offset":15},{"key":10,"length":40,"offset":31}],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Jesse Langford: What is React.memo and How Does It Work?","type":"unstyled","key":"5v0th"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"zeR0r2Hq8R16LOliAqW6"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/15532/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://en.wikipedia.org/wiki/Optimization_%28computer_science%29","url":"https://en.wikipedia.org/wiki/Optimization_%28computer_science%29"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://en.wikipedia.org/wiki/Computer_programs","url":"https://en.wikipedia.org/wiki/Computer_programs"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://en.wikipedia.org/wiki/Subroutine","url":"https://en.wikipedia.org/wiki/Subroutine"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/15479/","url":"https://nuancesprog.ru/p/15479/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://nuancesprog.ru/p/15488/","url":"https://nuancesprog.ru/p/15488/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://nuancesprog.ru/p/15158/","url":"https://nuancesprog.ru/p/15158/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://jesse-94998.medium.com/","url":"https://jesse-94998.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://betterprogramming.pub/what-is-react-memo-and-how-does-it-work-f49b031bba75","url":"https://betterprogramming.pub/what-is-react-memo-and-how-does-it-work-f49b031bba75"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}