{"draftJsState":{"blocks":[{"data":{"image":{"id":"648f6d930df751368e6f4738"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cag1f"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"460ak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. useMount","type":"header-three","key":"9m2pb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше я часто писала код в таком стиле (см. ниже), и когда компонент впервые рендерился, мне нужно было отправить запрос или выполнить какую-то другую логику.","type":"unstyled","key":"449sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {\n // запрос fetch...\n}, [])","type":"blockquote","key":"9hvih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":50,"style":"ITALIC"}],"text":"Довольно просто, но есть один большой недостаток: семантика не достаточно ясна, даже если передается пустой массив.","type":"unstyled","key":"1e99d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому следует настроить хук под названием useMount. Тогда функция обратного вызова будет выполняться только при первом рендеринге компонента.","type":"unstyled","key":"6dhsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Исходный код","type":"header-three","key":"s9hs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const useMount = (callback) => {\n React.useEffect(callback, [])\n}","type":"blockquote","key":"c79ap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Пример","type":"header-three","key":"d5fe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const UseMountDemo = () => {\n const [count, setCount] = React.useState(0)\n \n useMount(() => {\n console.log(\"useMount\")\n })\n \n return (\n

\n count: { count }\n \n

\n )\n}","type":"blockquote","key":"2vkes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда компонент рендерится повторно, useMount не выполняется снова.","type":"unstyled","key":"eai5e"},{"data":{"image":{"id":"648f6dcef205df6eb70bfadb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8eod"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/embed/poaZZrq","type":"unstyled","key":"3l777"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. useUnmount","type":"header-three","key":"auoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда компонент “размонтирован” и нужно запустить некоторую логику, например очистить таймер, используется подобный код:","type":"unstyled","key":"jk0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React.useEffect(() => {\n return () => {\n //Запускать, когда компонент размонтирован\n }\n}, [])","type":"blockquote","key":"6fs00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очевидно, что невозможно напрямую увидеть процесс выполнения, когда компонент выгружен.","type":"unstyled","key":"bsrhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно разработать хук useUnmount, чтобы указать, что функция обратного вызова выполняется, когда компонент размонтирован.","type":"unstyled","key":"bv2j4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Исходный код","type":"header-three","key":"1tdcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Действительно ли все так просто? Посмотрим, как правильно использовать этот хук.","type":"unstyled","key":"46rnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const useUnmount = (callback) => {\n React.useEffect(() => {\n return callback\n }, [])\n}","type":"blockquote","key":"3ra6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Пример","type":"header-three","key":"2b5av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Child = () => {\n const [ count, setCount ] = useState(0)\n \n useUnmount(() => {\n // Мы ожидаем вывод значения num, когда компонент будет размонтирован\n console.log('useUnmount', count)\n })\n return (\n

\n count: {count}\n \n

\n )\n}\n\nconst UseUnmountedDemo = () => {\n const [showChild, setShowChild] = React.useState(true);\n // Мы используем \"showChild\" для управления отображением и скрытием дочернего компонента\n return (\n

\n { !!showChild && }\n \n

\n )\n}","type":"blockquote","key":"321iu"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/embed/bGLjxYP","type":"unstyled","key":"83k7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда компонент Child удаляется, функция обратного вызова useUnmount выполняется, но обнаруживается, что count — это начальное значение 0, а не 10. Что вызывает такой неправильный результат?","type":"unstyled","key":"190jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Причина этого кроется в механизме закрытия в useEffect, потому что функция передается при выгрузке компонента для первого рендеринга. Чтобы получить состояние в реальном времени, нужно использовать useRef.","type":"unstyled","key":"347id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const useUnmount = (callback) => {\n const callbackRef = React.useRef(callback)\n \n callbackRef.current = callback\n \n React.useEffect(() => {\n return () => {\n callbackRef.current()\n }\n }, [])\n}","type":"blockquote","key":"6ns3g"},{"data":{"image":{"id":"648f6dce85c3654e551d81ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dauif"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/pen/RwQBeWm","type":"unstyled","key":"bku0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь при удалении компонента получаем правильное значение count.","type":"unstyled","key":"93f1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. useUpdateEffect","type":"header-three","key":"qv8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда необходимо выполнять логический код только после изменения зависимости. Можно ли мы достичь этой цели, используя такой подход?","type":"unstyled","key":"f4bau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function UseUpdateEffectDemo() {\n const [count, setCount] = React.useState(0)\n \n React.useEffect(() => {\n console.log('count changed', count)\n }, [ count ])\n \n return (\n

\n count: {count}\n \n

\n )\n}","type":"blockquote","key":"au7ga"},{"data":{"image":{"id":"648f6dcecdc3c01bccfd462d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"24dgo"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/pen/XWZOEYz","type":"unstyled","key":"eucho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако count выведет 0, как только компонент будет смонтирован. Как можно выполнить функцию обратного вызова после изменения count?","type":"unstyled","key":"623bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const useUpdateEffect = function (effectCallback, deps = []) {\n const isFirstMount = React.useRef(false)\n \n React.useEffect(() => {\n return () => {\n isFirstMount.current = false\n }\n }, [])\n React.useEffect(() => {\n // Не выполняйте effectcallback для первого раза\n if (!isFirstMount.current) {\n isFirstMount.current = true\n } else {\n return effectCallback()\n }\n }, deps)\n}\n\nfunction UseUpdateEffectDemo() {\n const [count, setCount] = React.useState(0)\n \n useUpdateEffect(() => {\n console.log('Count changed', count)\n }, [ count ])\n \n return (\n

\n count: {count}\n \n

\n )\n}","type":"blockquote","key":"aa62u"},{"data":{"image":{"id":"648f6dce413f4373a73ee35a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8lsdk"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/pen/dydamQa","type":"unstyled","key":"et3b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. useSetState","type":"header-three","key":"7phpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При написании компонента class обычно используется this.setState для манипулирования данными компонента. Между тем setState зачастую более удобен при работе с объектными типами данных.","type":"unstyled","key":"5v2kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [ person, setPerson ] = React.useState({\n name: 'fatfish',\n age: 100\n})\n// Изменяем имя\nsetPerson({\n ...person,\n name: 'medium'\n})\n// Изменяем возраст\nsetPerson({\n ...person,\n age: 1000\n})\n// Используем setState для изменения имени\nsetState({\n name: 'medium'\n})\n// Используем setState для изменения возраста\nsetState({\n age: 1000\n})","type":"blockquote","key":"740vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно ли реализовать хук useSetState, чтобы упростить работу с setPerson? Это очень легко сделать: просто выполните обертку вокруг useState.","type":"unstyled","key":"eda9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const useSetState = (initState) => {\n const [ state, setState ] = React.useState(initState)\n \n const setMergeState = (value) => {\n setState((prevValue) => {\n const newValue = typeof value === 'function' ? value(prevValue) : value\n return newValue ? { ...prevValue, ...newValue } : prevValue\n })\n }\n \n return [ state, setMergeState ]\n}","type":"blockquote","key":"a14fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Пример","type":"header-three","key":"alsuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function useSetStateDemo() {\n const [ person, setPerson ] = useSetState({\n name: 'fatfish',\n age: 100\n })\n // Изменение значения person в обычном режиме настройки\n const onSetName = () => {\n setPerson({ name: 'medium' })\n }\n // Используем функцию обратного вызова для изменения значения person\n const onSetAge = () => {\n setPerson(() => {\n return {\n age: 1000\n }\n })\n }\n return (\n

name: { person.name }

age: { person.age }

\n \n \n

\n )\n}","type":"blockquote","key":"fkghn"},{"data":{"image":{"id":"648f6dce85c3654e551d81eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dih7v"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"https://codepen.io/qianlong/pen/poaGLYP","type":"unstyled","key":"a1ajj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"d504p"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":46,"offset":0}],"inlineStyleRanges":[],"text":"7 методов оптимизации производительности React","type":"unordered-list-item","key":"bh6uv"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"Веб-разработка: основы статического сайта","type":"unordered-list-item","key":"dmrel"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":64,"offset":0}],"inlineStyleRanges":[],"text":"Как уменьшить размер компонента React: 3 профессиональных приема","type":"unordered-list-item","key":"d4en5"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":14},{"key":11,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"b3k3n"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":7,"offset":15},{"key":13,"length":48,"offset":24}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи fatfish: 4 Custom React Hooks Every Developer Should Know","type":"unstyled","key":"ehtl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Zwy0Ya5ejnilHoOIPC4y"}],"entityMap":{"11":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://fatfish.medium.com/","url":"https://fatfish.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://fatfish.medium.com/4-custom-react-hooks-every-developer-should-know-9aeeab0a3a85","url":"https://fatfish.medium.com/4-custom-react-hooks-every-developer-should-know-9aeeab0a3a85"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/17763/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://codepen.io/qianlong/embed/poaZZrq?","url":"https://codepen.io/qianlong/embed/poaZZrq?"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://codepen.io/qianlong/embed/bGLjxYP","url":"https://codepen.io/qianlong/embed/bGLjxYP"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://codepen.io/qianlong/pen/RwQBeWm","url":"https://codepen.io/qianlong/pen/RwQBeWm"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://codepen.io/qianlong/pen/XWZOEYz","url":"https://codepen.io/qianlong/pen/XWZOEYz"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://codepen.io/qianlong/pen/dydamQa","url":"https://codepen.io/qianlong/pen/dydamQa"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://codepen.io/qianlong/pen/poaGLYP","url":"https://codepen.io/qianlong/pen/poaGLYP"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/17497/","url":"https://nuancesprog.ru/p/17497/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/14478/","url":"https://nuancesprog.ru/p/14478/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/16204/","url":"https://nuancesprog.ru/p/16204/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}