{"draftJsState":{"blocks":[{"data":{"image":{"id":"6326da95e7192016d34710a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3bgo3"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"119po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В процессе работы многие фрагменты кода увеличиваются настолько, что над ними легко потерять контроль. Речь идет о компонентах React. Обрастание компонента множеством функций, JSX и конфигураций становится одной из главных проблем для тех, кто начинает изучать React. Рассмотрим, как ее избежать.","type":"unstyled","key":"7mtda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмем в качестве примера один из компонентов пользовательского интерфейса — table. Попробуем оптимизировать его объем, используя для этого 3 приема.","type":"unstyled","key":"dhsbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент table будет иметь несколько функций, которые можно расширить в дальнейшем.","type":"unstyled","key":"eu499"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение заголовков и строк в качестве параметров и рендеринг таблицы.","type":"unordered-list-item","key":"5fhb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение сортировщиков в качестве параметра, определяющего, какой заголовок подлежит сортировке.","type":"unordered-list-item","key":"92ms4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переключение заголовка таблицы будет вызывать сортировку по возрастанию и убыванию.","type":"unordered-list-item","key":"csrlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приложение будет выглядеть так:","type":"unstyled","key":"49pkg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from 'react'\nimport Table from './components/Table'\n\nfunction App() {\n const headers = {\n name: 'Name',\n origin: 'Origin',\n largestCountry: 'Largest Exporter',\n productionInBillions: 'Pruduction (BLN)',\n }\n\n const rows = [\n {\n name: 'Apple',\n origin: 'Spain',\n largestCountry: 'India',\n productionInBillions: '1.5',\n },\n {\n name: 'Mango',\n origin: 'India',\n largestCountry: 'India',\n productionInBillions: '1.9',\n },\n {\n name: 'Avocados',\n origin: 'America',\n largestCountry: 'America',\n productionInBillions: '1.9',\n },\n {\n name: 'PassionFruit',\n origin: 'America',\n largestCountry: 'America',\n productionInBillions: '1.7',\n },\n ]\n\n const sorters = {\n name: true,\n origin: true,\n productionInBillions: true,\n }\n return \n}\n\nexport default App","type":"unstyled","key":"473sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изначально табличный компонент будет выглядеть вот так. Позже мы его оптимизируем.","type":"unstyled","key":"1ji8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"table {\n font-family: arial, sans-serif;\n border-collapse: collapse;\n width: 100%;\n}\ntd,\nth {\n border: 1px solid #dddddd;\n text-align: left;\n padding: 8px;\n}\n\ntr:nth-child(even) {\n background-color: #dddddd;\n}\n\n.sort-icon {\n display: inline;\n}","type":"unstyled","key":"dsum9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { FunctionComponent, useEffect, useState } from 'react'\nimport './Table.css'\n\ninterface TableProps {\n headers: Record\n sorters?: Record\n rows: Record[]\n}\n\nconst Table: FunctionComponent = ({ headers, rows, sorters }) => {\n const isSortable = Boolean(sorters)\n const [displayedRows, setDisplayedRows] = useState(rows)\n const [sortersData, setSortersData] = useState(sorters)\n const [currentSort, setCurrentSort] = useState('')\n\n useEffect(() => {\n if (!isSortable || currentSort === '') {\n return\n }\n\n const sortedRows = rows.sort(\n (a: Record, b: Record) => {\n if (sortersData![currentSort]) {\n return a[currentSort] < b[currentSort] ? 1 : -1\n } else if (!sortersData![currentSort]) {\n return a[currentSort] > b[currentSort] ? 1 : -1\n }\n\n return 0\n },\n )\n setDisplayedRows([...sortedRows])\n }, [sortersData])\n\n const handleSortToggled = (headerKey: string, isAsc: boolean) => {\n if (!isSortable) {\n return\n }\n\n const newIsAsc = !isAsc\n sortersData![headerKey] = newIsAsc\n setCurrentSort(headerKey)\n setSortersData({ ...sortersData })\n }\n\n return (\n <>\n

\n \n \n {Object.keys(headers).map((headerKey: string, index: number) => (\n \n ))}\n \n \n \n {displayedRows.map((row: Record, index: number) => (\n \n {Object.values(row).map((cell: string, cellIndex: number) => (\n \n ))}\n \n ))}\n \n

\n {headers[headerKey]}\n {isSortable && sortersData![headerKey] !== undefined && (\n \n handleSortToggled(headerKey, sortersData![headerKey])\n }\n >\n {sortersData![headerKey] ? <>∧ : <>∨}\n \n )}\n
{cell}

\n \n )\n}\n\nexport default Table","type":"unstyled","key":"8mgps"},{"data":{"image":{"id":"6326daada34758090f9a308b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1vouq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Возможности пространства имен","type":"header-three","key":"96ees"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В компонентах React часто увеличивается количество типов (интерфейсов, перечислений) и констант. В первом методе мы будем использовать пространства имен. Файл конфигурации может хранить константы, типы и даже чистые вспомогательные функции, поэтому их не нужно оставлять внутри компонента. Рассмотрим подробнее:","type":"unstyled","key":"bvrjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export namespace TableConfig {\n export type Row = Record\n export type Header = Record\n export type Sorter = Record\n\n export interface TableProps {\n headers: Header\n rows: Row[]\n sorters?: Sorter\n }\n}","type":"unstyled","key":"47inu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем можно будет обновить тип реквизита (props) компонента table:","type":"unstyled","key":"38a9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...\nimport { TableConfig } from './TableConfig'\n\nconst Table: FunctionComponent = ({\n...","type":"unstyled","key":"632vq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"BOLD"}],"text":"2. Разделение на субкомпоненты и совместное использование состояния","type":"header-three","key":"2oe88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данный момент мы знаем, куда можно переместить типы, константы и вспомогательные функции. Теперь разбираемся, что делать с субкомпонентами. Это маленькие дочерние компоненты, на которые разделяются основные большие компоненты. Следует учитывать две особенности.","type":"unstyled","key":"fghkh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всегда создавайте дочерние компоненты вне тела основного компонента: либо в том же файле, либо в других файлах. В противном случае возникнет проблема с производительностью, и при каждом обновлении состояния будут создаваться дочерние компоненты.","type":"ordered-list-item","key":"5hvj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте context, если хотите поделиться состоянием основного компонента, чтобы избежать перегрузки свойств.","type":"ordered-list-item","key":"t03l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим это на примере:","type":"unstyled","key":"79mlc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, {\n createContext,\n FunctionComponent,\n useContext,\n useEffect,\n useState,\n} from 'react'\nimport './Table.css'\nimport { TableConfig } from './TableConfig'\n\nconst TableContext = createContext>({})\n\nconst Header: FunctionComponent<{ headerKey: string }> = ({ headerKey }) => {\n const { headers, isSortable, sortersData, handleSortToggled } = useContext(\n TableContext,\n )\n\n return (\n \n {headers[headerKey]}\n {isSortable && sortersData![headerKey] !== undefined && (\n handleSortToggled(headerKey, sortersData![headerKey])}\n >\n {sortersData![headerKey] ? <>∧ : <>∨}\n \n )}\n \n )\n}\n\nconst Row: FunctionComponent<{ row: TableConfig.Row }> = ({ row }) => {\n return (\n \n {Object.values(row).map((cell: string, cellIndex: number) => (\n {cell}\n ))}\n \n )\n}\n\nconst Table: FunctionComponent = ({\n headers,\n rows,\n sorters,\n}) => {\n const isSortable = Boolean(sorters)\n const [displayedRows, setDisplayedRows] = useState(rows)\n const [sortersData, setSortersData] = useState(sorters)\n const [currentSort, setCurrentSort] = useState('')\n\n useEffect(() => {\n if (!isSortable || currentSort === '') {\n return\n }\n\n const sortedRows = rows.sort(\n (a: Record, b: Record) => {\n if (sortersData![currentSort]) {\n return a[currentSort] < b[currentSort] ? 1 : -1\n } else if (!sortersData![currentSort]) {\n return a[currentSort] > b[currentSort] ? 1 : -1\n }\n\n return 0\n },\n )\n setDisplayedRows([...sortedRows])\n }, [sortersData])\n\n const handleSortToggled = (headerKey: string, isAsc: boolean) => {\n if (!isSortable) {\n return\n }\n\n const newIsAsc = !isAsc\n sortersData![headerKey] = newIsAsc\n setCurrentSort(headerKey)\n setSortersData({ ...sortersData })\n }\n\n return (\n <>\n \n \n \n \n {Object.keys(headers).map((headerKey: string, index: number) => (\n

\n ))}\n

\n \n \n {displayedRows.map((row: Record, index: number) => (\n \n ))}\n \n

\n \n \n )\n}\n\nexport default Table","type":"unstyled","key":"ai3nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"3. Пользовательские хуки для масштабирования и читаемости","type":"header-three","key":"bgrr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы можем масштабировать типы и JSX. Остался последний элемент, который нужно переместить. Это состояние и методы, работающие с состоянием. Лучше всего просто переместить их в пользовательский хук. Посмотрим, как это выглядит:","type":"unstyled","key":"dciq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, {\n createContext,\n FunctionComponent,\n useContext,\n useEffect,\n useState,\n} from 'react'\nimport './Table.css'\nimport { TableConfig } from './TableConfig'\nimport { useSorter } from './useSorter'\n\nconst TableContext = createContext>({})\n\nconst Header: FunctionComponent<{ headerKey: string }> = ({ headerKey }) => {\n const { headers, isSortable, sortersData, handleSortToggled } = useContext(\n TableContext,\n )\n\n return (\n \n {headers[headerKey]}\n {isSortable && sortersData![headerKey] !== undefined && (\n handleSortToggled(headerKey, sortersData![headerKey])}\n >\n {sortersData![headerKey] ? <>∧ : <>∨}\n \n )}\n \n )\n}\n\nconst Row: FunctionComponent<{ row: TableConfig.Row }> = ({ row }) => {\n return (\n \n {Object.values(row).map((cell: string, cellIndex: number) => (\n {cell}\n ))}\n \n )\n}\n\nconst Table: FunctionComponent = ({\n headers,\n rows,\n sorters,\n}) => {\n const [displayedRows, setDisplayedRows] = useState(rows)\n const [sortedRows, isSortable, sortersData, sortToggled] = useSorter(\n rows,\n sorters,\n )\n\n useEffect(() => {\n setDisplayedRows([...sortedRows])\n }, [sortedRows])\n\n const handleSortToggled = (headerKey: string, isAsc: boolean) => {\n sortToggled(headerKey, isAsc)\n }\n\n return (\n <>\n \n \n \n \n {Object.keys(headers).map((headerKey: string, index: number) => (\n

\n ))}\n

\n \n \n {displayedRows.map((row: Record, index: number) => (\n \n ))}\n \n

\n \n \n )\n}\n\nexport default Table","type":"unstyled","key":"fkihb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useEffect, useState } from 'react'\nimport { TableConfig } from './TableConfig'\n\ntype SorterProps = [\n TableConfig.Row[],\n boolean,\n TableConfig.Sorter | undefined,\n (headerKey: string, isAsc: boolean) => void,\n]\n\nexport const useSorter = (\n rows: TableConfig.Row[],\n sorters?: TableConfig.Sorter,\n): SorterProps => {\n const isSortable = Boolean(sorters)\n const [sortedRows, setSortedRows] = useState(rows)\n const [sortersData, setSortersData] = useState(sorters)\n const [currentSort, setCurrentSort] = useState('')\n\n useEffect(() => {\n if (!isSortable || currentSort === '') {\n return\n }\n\n const sortedRows = rows.sort(\n (a: Record, b: Record) => {\n if (sortersData![currentSort]) {\n return a[currentSort] < b[currentSort] ? 1 : -1\n } else if (!sortersData![currentSort]) {\n return a[currentSort] > b[currentSort] ? 1 : -1\n }\n\n return 0\n },\n )\n setSortedRows([...sortedRows])\n }, [sortersData])\n\n const sortToggled = (headerKey: string, isAsc: boolean) => {\n if (!isSortable) {\n return\n }\n const newIsAsc = !isAsc\n sortersData![headerKey] = newIsAsc\n setCurrentSort(headerKey)\n setSortersData({ ...sortersData })\n }\n\n return [sortedRows, isSortable, sortersData, sortToggled]\n}","type":"unstyled","key":"5rgnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нам удалось уменьшить размер компонента почти на 40%! При этом можно достичь еще большего результата, если переместить дочерний компонент из файла.","type":"unstyled","key":"717p7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"e4qct"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":38,"offset":0}],"inlineStyleRanges":[],"text":"Как сократить ошибки в базе кода React","type":"unordered-list-item","key":"2nsqc"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":38,"offset":0}],"inlineStyleRanges":[],"text":"Почему программисты не бросают работу?","type":"unordered-list-item","key":"5mk5r"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":77,"offset":0}],"inlineStyleRanges":[],"text":"Как обеспечить возможность обнаружения для совместно используемых компонентов","type":"unordered-list-item","key":"6jr6i"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"9rm7d"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":16,"offset":15},{"key":7,"length":71,"offset":33}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Vitalii Shevchuk: Top 3 React Tricks Pros \uD83D\uDE0E like to Use to Reduce the Size of a Component","type":"unstyled","key":"ef4uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"1LU5LK0kyqdYV37xwnMA"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/16204/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/16138/","url":"https://nuancesprog.ru/p/16138/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/2322/","url":"https://nuancesprog.ru/p/2322/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/4171/","url":"https://nuancesprog.ru/p/4171/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://easy-web.medium.com/","url":"https://easy-web.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://levelup.gitconnected.com/top-3-react-tricks-pros-like-to-use-to-reduce-the-size-of-component-980900370505","url":"https://levelup.gitconnected.com/top-3-react-tricks-pros-like-to-use-to-reduce-the-size-of-component-980900370505"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}