- Ýaýradylan senesi
Salam React, Salam useEffect (Ýarabberden gelen bolup, şeýle bolsun)
- Awtorlar
- Ady
- Imamuzzaki Abu Salam
- https://x.com/ImBIOS_Dev
Bu makalada, React-y useEffect-i köpçülik halatynda nähili çalyşdyrmagyňyzy görkezerin.
David Khoursid-iň "Hoşlaş, useEffect" atly wideosyna seredip, 🤯 meniň başym aýlanýar 😀 gowy tarapdan. Men useEffect-iň köp ulanylýandygyny we kodymyzy arassa we saklamaga kyn bolýan edýändigini kabul edýärin. Men uzak wagtlap useEffect-i ulanyp gelýärin we ony ýalňyş ulanmagyňda günäkärdirim. Ýakyn wagtda kodymy arassa we saklamaga ýeňil boljak React-da funksiýalar bar, munyň subutnamasynyň bolmagyna ynanýaryn.
useEffect näme?
useEffect funksiýa komponentlerinde ýanaşyk täsirleri etmäge mümkinçilik berýän bir kancadır. Ol componentDidMount, componentDidUpdate we componentWillUnmount-y bir API-de birleşdirýär. Bu bizä köp zat etmäge mümkinçilik berýän täsirli bir kancadır. Emma ol şol bir wagtda köp käýinçleri döredýän ýaramaz bir kancadır.
Näme üçin useEffect ýaramaz?
Gelin aşakdaky mysala seredip göreliň:
import React, { useEffect, useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setCount((c) => c + 1)
}, 1000)
return () => clearInterval(interval)
}, [])
return <div>{count}</div>
}
Bu her sekuntda artyp gidýän ýönekeý bir sanawdyr. Ol interval bellikleriň döredilmegi üçin useEffect-i ulanypdyr. Şeýle-de ol komponent ýok edilende, interval bellikleriň ýatyrylmagy üçin useEffect-i ulanypdyr. Ýokarky kod bölegi useEffect üçin giňden ýaýran ulanyş mysalydyr. Bu ýönekeý bir mysal, emma ol şol bir wagtda gaty ýaramaz bir mysal.
Bu mysalda problem, interval bellikleriň komponent täzeden görkezilýän her gezek döredilýändir. Eger komponent näme üçin bolsa-da täzeden görkezilse, interval bellikleri täzeden döredilir. Interval bellikleri sekuntda iki gezek çagyrylar. Bu ýönekeý mysalda problem däl, emma interval bellikleri has çylşyran wagtda uly problem bolup biler. Ol şeýle-de ýadyňyň ýitmegini döredip biler.
Nähili düzetmeli?
Bu problemi çözmek üçin köp usullar bar. Bir usul, interval bellikleri saklamak üçin useRef-i ulanmakdyr.
import React, { useEffect, useRef, useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
const intervalRef = useRef()
useEffect(() => {
intervalRef.current = setInterval(() => {
setCount((c) => c + 1)
}, 1000)
return () => clearInterval(intervalRef.current)
}, [])
return <div>{count}</div>
}
Ýokarky kod öňki mysaldan has gowydyr. Ol komponent täzeden görkezilýän her gezek interval bellikleriň döredilmegini etmän. Emma ol henizem kämilleşdirilmäge mätäçdir. Ol henizem biraz çylşyran. We ol henizem gaty ýaramaz bir kanca bolan useEffect-i ulanypdyr.
useEffect täsirler üçin däl
Biz useEffect-iň componentDidMount, componentDidUpdate we componentWillUnmount-y bir API-de birleşdirýändigini bilýäris. Gelin munuň mysallarny berip göreliň:
useEffect(() => {
// componentDidMount?
}, [])
useEffect(() => {
// componentDidUpdate?
}, [something, anotherThing])
useEffect(() => {
return () => {
// componentWillUnmount?
}
}, [])
Bu ýeňil düşünilýär. useEffect komponent ýerleşdirilende, täzeden görkezilende we ýok edilende ýanaşyk täsirleri etmäge ulanylýar. Emma ol diňe ýanaşyk täsirleri etmäge ulanylmaýar. Ol komponent täzeden görkezilende, ýanaşyk täsirleri etmäge-de ulanylýar. Komponent täzeden görkezilende ýanaşyk täsirleri etmäge ýaramasa gerek. Ol köp käýinçleri döredip biler. Komponent täzeden görkezilende ýanaşyk täsirleri etmäge başga kancalary ulanmak has gowydyr.
import React, { useState, useEffect } from 'react'
const Example = () => {
const [value, setValue] = useState('')
const [count, setCount] = useState(-1)
useEffect(() => {
setCount(count + 1)
})
const onChange = ({ target }) => setValue(target.value)
return (
<div>
<input type="text" value={value} onChange={onChange} />
<div>Üýtgeşmeleriň sany: {count}</div>
</div>
)
}
useEffect ýagdaýy düzetmek üçin däl
import React, { useState, useEffect } from 'react'
const Example = () => {
const [count, setCount] = useState(0)
// componentDidMount we componentDidUpdate ýaly:
useEffect(() => {
// Braýzer API ulanyp dokument başlygyny üýtgediň
document.title = `Siz ${count} gezek basdyňyz`
}) // <-- problem şol ýerdedir, 😱 baglylyk massiwi ýok
return (
<div>
<p>Siz {count} gezek basdyňyz</p>
<button onClick={() => setCount(count + 1)}>Mäni basyň</button>
</div>
)
}
Men şu dokumentasiýany okamaga maslahat berýärin: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
Emri we Beýan ediş
Emri: Bir zat bolanda, şu täsiri ýerine ýetiriň.
Beýan ediş: Bir zat bolanda, bu ýagdaýy üýtgedip, ýagdaýyň haýsy böleginiň üýtgedigine (baglylyk massiwi) baglylykda şu täsiri ýerine ýetiriň, emma diňe bir şert ýerine ýetirilende. We React onuň üçin ýönekeý bir sebäpden bir wagtda görkezmek üçin ýene-de bir gezek ýerine ýetirip biler.
Konsepsiýa we Ýerine ýetiriliş
Konsepsiýa:
useEffect(() => {
doSomething()
return () => cleanup()
}, [whenThisChanges])
Ýerine ýetiriliş:
useEffect(() => {
if (foo && bar && (baz || quo)) {
doSomething()
} else {
doSomethingElse()
}
// üýtgeşmeleriň ýatyrylmagyny unudypdyr
}, [foo, bar, baz, quo])
Dünýäde ulanyş:
useEffect(() => {
if (isOpen && component && containerElRef.current) {
if (React.isValidElement(component)) {
ionContext.addOverlay(overlayId, component, containerElRef.current!);
} else {
const element = createElement(component as React.ComponentClass, componentProps);
ionContext.addOverlay(overlayId, element, containerElRef.current!);
}
}
}, [component, containerElRef.current, isOpen, componentProps]);
useEffect(() => {
if (removingValue && !hasValue && cssDisplayFlex) {
setCssDisplayFlex(false)
}
setRemovingValue(false)
}, [removingValue, hasValue, cssDisplayFlex])
Bu kody ýazmak gorkunçdyr. Ýene-de, bu kodymyzda normal bolup we ýaman bolup biler. 😱🤮
Täsirler haýsy ýere barýar?
React 18 täsirleri ýerleşdirilende iki gezek ýerine ýetiriň (ýokary rejimde). Ýerleşdirmek/täsir (╯°□°)╯︵ ┻━┻ -> Ýok etmek (şekillendirmek)/ýatyrylmak ┬─┬ /( º _ º /) -> Täzeden ýerleşdirmek/täsir (╯°□°)╯︵ ┻━┻
Ol komponentden daşarda bolmalymy? Ähli ýerinde ulanylýan useEffect? Hmm... gowy däl. Hmm... 🤔 Biz onuň görkezme bölümine goýup bilmedik, çünki ol ýerde hiç hili ýanaşyk täsirler bolmagyna ýol berilmeýär, çünki görkezme bölümi matematik deňlemeň sag tarapy ýalydyr. Ol diňe hasaplamanyň netijesi bolmalydyr.
useEffect näme üçin?
Sinkronizasiýa
useEffect(() => {
const sub = createThing(input).subscribe((value) => {
// value bilen bir zat edip göreliň
})
return sub.unsubscribe
}, [input])
useEffect(() => {
const handler = (event) => {
setPointer({ x: event.clientX, y: event.clientY })
}
elRef.current.addEventListener('pointermove', handler)
return () => {
elRef.current.removeEventListener('pointermove', handler)
}
}, [])
Täsirleriň işleýş we hereket işleýşleri
Ot ýakyp ýatyryň Sinkronlaşdyrylan
(Hereket işleýşleri) (İşleýş işleýşleri)
0 ---------------------- ----------------- - - -
o o | A | o o | A | A
o o | | | o o | | | |
o o | | | o o | | | |
o o | | | o o | | | |
o o | | | o o | | | |
o o | | | o o | | | |
o o V | V o o V | V |
o-------------------------------------------------------------------------------->
Ýok etmek Täzeden ýerleşdirmek
Hereket işleýşleri haýsy ýere barýar?
Waka beýan edişleri. Birneme.
<form
onSubmit={(event) => {
// 💥 ýanaşyk täsir!
submitData(event)
}}
>
{/* ... */}
</form>
Beta React.js-de gaty gowy maglumat bar. Ony okamaga maslahat berýärin. Aýratyn-da "Waka beýan edişlerinde ýanaşyk täsirler bolup bilermi?" bölümini okaň.
Elbetde! Waka beýan edişleri ýanaşyk täsirler üçin iň gowy ýerdir.
Men ýatladyp geçmek isleýän başga bir gowy çeşme Ýanaşyk täsirleri ýerine ýetirip biljek ýerler
React-da ýanaşyk täsirler adatça waka beýan edişlerinde bolýar.
Eger siz ähli beýleki mümkinçilikleri ulanyp, ýanaşyk täsirlere ýaraýan dogry waka beýan edişini tapa bilmeseňiz, siz onuň komponentden gaýdyp gelen JSX-ine useEffect çagyryşy bilen goşup bilersiňiz. Bu React-a täsirleri ýerine ýetirmäge rugsat berilende, görkezmeden soňra, soňra ýerine ýetirmek üçin aýdýar. Emma, şu ýörelge siziň soňky mümkinçiligiňiz bolmalydyr.
"Täsirler görkezmeden daşarda bolýar" - David Khoursid.
(state) => UI
(state, event) => nextState // 🤔 Täsirler?
UI ýagdaýyň funksiýasydyr. ähli häzirki ýagdaýlar görkezilende, ol häzirki UI-i döreder. Şeýle-de, bir waka bolanda, ol täze bir ýagdaý döreder. We ýagdaý üýtgeşende, ol täze bir UI gurýar. Şu paradigma React-yň esasy bölegi.
Täsirler haýsy wagt bolýar?
Ortaçylyk? 🕵️ Çagyryşlar? 🤙 Sagalar? 🧙♂️ Reaksiýalar? 🧪 Suw ýygnaýjylar? 🚰 Monadlar(?) 🧙♂️ Nähili wagt? 🤷♂️
Ýagdaýyň üýtgeşmeleri. Her wagt.
(state, event) => nextState
|
V
(state, event) => (nextState, effect) // Şol ýerde
![Täzeden görkezmek şekili](https://media.slid.es/uploads/174419/images/9663683/CleanShot_2022-06-22_at_20.24.08_2x.png align="left")
Hereket işleýşleri haýsy ýere barýar? Waka beýan edişleri. Ýagdaýyň üýtgeşmeleri.
Olaryň waka beýan edişleri bilen bir wagtda ýerine ýetirilýändigini ýatda saklaň.
Täsirler gerek bolmaýan ýagdaýlar
Biz useEffect-i ulanyp bilerdik, çünki şu problemy çözüp biljek React-da öňünden gurulan API bar ýa-da ýokdugyny bilmedik.
Şu temada okamaga gowy çeşme: Täsir gerek bolmaýan ýagdaýlar
Maglumatlary özgertmek üçin useEffect gerek däl.
useEffect ➡️ useMemo (köpchülik halatynda useMemo gerek bolmasa-da)
const Cart = () => {
const [items, setItems] = useState([])
const [total, setTotal] = useState(0)
useEffect(() => {
setTotal(items.reduce((total, item) => total + item.price, 0))
}, [items])
// ...
}
Bir gezekem okaň we ýene bir gezekem ýatda saklaň 🧐.
const Cart = () => {
const [items, setItems] = useState([])
const total = useMemo(() => {
return items.reduce((total, item) => total + item.price, 0)
}, [items])
// ...
}
useEffect-i ulanyp umuma ýetirmegi hasaplamakdan başga, biz useMemo-ny ulanyp umuma ýetirmegi saklap bileris. Hatta eger üýtgeýji gymmat hasaplama däl bolsa-da, biz useMemo-ny ulanyp ony saklap bilmeris, çünki biz ýerine ýetirilişiň tizligine memory-nyň ornuny berýäris.
useEffect-de setState-ni görkezmekde, ony ýeňilleşdirip biljekdigimiziň alamaty.
Daşarky dükanlar bilen täsirler? useSyncExternalStore
useEffect ➡️ useSyncExternalStore
❌ Dogry däl ýol:
const Store = () => {
const [isConnected, setIsConnected] = useState(true)
useEffect(() => {
const sub = storeApi.subscribe(({ status }) => {
setIsConnected(status === 'connected')
})
return () => {
sub.unsubscribe()
}
}, [])
// ...
}
✅ Iň gowy ýol:
const Store = () => {
const isConnected = useSyncExternalStore(
// 👇 abone bolmak
storeApi.subscribe,
// 👇 anlyga almak
() => storeApi.getStatus() === 'connected',
// 👇 serwer anlygyny almak
true
)
// ...
}
Ata bilen habarlaşmak üçin useEffect gerek däl.
useEffect ➡️ waka beýan ediş
❌ Dogry däl ýol:
const ChildProduct = ({ onOpen, onClose }) => {
const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
if (isOpen) {
onOpen()
} else {
onClose()
}
}, [isOpen])
return (
<div>
<button
onClick={() => {
setIsOpen(!isOpen)
}}
>
Tiz görmäge açmak/ýapmak
</button>
</div>
)
}
📈 Has gowy ýol:
const ChildProduct = ({ onOpen, onClose }) => {
const [isOpen, setIsOpen] = useState(false)
const handleToggle = () => {
const nextIsOpen = !isOpen;
setIsOpen(nextIsOpen)
if (nextIsOpen) {
onOpen()
} else {
onClose()
}
}
return (
<div>
<button
onClick={}
>
Tiz görmäge açmak/ýapmak
</button>
</div>
)
}
✅ Iň gowy ýol özleşdirilen kanca döretmek:
const useToggle({ onOpen, onClose }) => {
const [isOpen, setIsOpen] = useState(false)
const handleToggle = () => {
const nextIsOpen = !isOpen
setIsOpen(nextIsOpen)
if (nextIsOpen) {
onOpen()
} else {
onClose()
}
}
return [isOpen, handleToggle]
}
const ChildProduct = ({ onOpen, onClose }) => {
const [isOpen, handleToggle] = useToggle({ onOpen, onClose })
return (
<div>
<button
onClick={handleToggle}
>
Tiz görmäge açmak/ýapmak
</button>
</div>
)
}
Global ýekelikleri başlamak üçin useEffect gerek däl.
useEffect ➡️ justCallIt
❌ Dogry däl ýol:
const Store = () => {
useEffect(() => {
storeApi.authenticate() // 👈 Bu iki gezek ýerine ýetiriler!
}, [])
// ...
}
🔨 Düzeltmek:
const Store = () => {
const didAuthenticateRef = useRef()
useEffect(() => {
if (didAuthenticateRef.current) return
storeApi.authenticate()
didAuthenticateRef.current = true
}, [])
// ...
}
➿ Başga bir ýol:
let didAuthenticate = false
const Store = () => {
useEffect(() => {
if (didAuthenticate) return
storeApi.authenticate()
didAuthenticate = true
}, [])
// ...
}
🤔 Eger:
storeApi.authenticate()
const Store = () => {
// ...
}
🍷 SSR, ha?
if (typeof window !== 'undefined') {
storeApi.authenticate()
}
const Store = () => {
// ...
}
🧪 Synag?
const renderApp = () => {
if (typeof window !== 'undefined') {
storeApi.authenticate()
}
appRoot.render(<Store />)
}
Biz ähli zatlary komponentden içerde goýmaga gerek däl.
Maglumatlary almaga useEffect gerek däl.
useEffect ➡️ renderAsYouFetch (SSR) ýa-da useSWR (CSR)
❌ Dogry däl ýol:
const Store = () => {
const [items, setItems] = useState([])
useEffect(() => {
let isCanceled = false
getItems().then((data) => {
if (isCanceled) return
setItems(data)
})
return () => {
isCanceled = true
}
})
// ...
}
💽 Remix ýoly:
import { useLoaderData } from '@renix-run/react'
import { json } from '@remix-run/node'
import { getItems } from './storeApi'
export const loader = async () => {
const items = await getItems()
return json(items)
}
const Store = () => {
const items = useLoaderData()
// ...
}
export default Store
⏭️🧹 Next.js (appDir) async/await ulanyp Serwer Komponentinde:
// app/page.tsx
async function getData() {
const res = await fetch('https://api.example.com/...')
// Gaýdyp gelen bahasy *seriallaşdyrylmaýar*
// Siz Sana, Map, Set, ş.m. gaýdyp bilersiňiz.
// Maslahat: Käýinçleri işleň
if (!res.ok) {
// Bu iň ýakyn `error.js` Käýinç Çäklendirişini işjeňleşdirer
throw new Error('Maglumatlary almak başartmady')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}
⏭️💁 Next.js (appDir) useSWR ulanyp Miş Komponentinde:
// app/page.tsx
import useSWR from 'swr'
export default function Page() {
const { data, error } = useSWR('/api/data', fetcher)
if (error) return <div>Maglumatlary almak başartmady</div>
if (!data) return <div>Ýüklenýär...</div>
return <div>Salam {data}!</div>
}
⏭️🧹 Next.js (pagesDir) SSR usulynda:
// pages/index.tsx
import { GetServerSideProps } from 'next'
export const getServerSideProps: GetServerSideProps = async () => {
const res = await fetch('https://api.example.com/...')
const data = await res.json()
return {
props: {
data,
},
}
}
export default function Page({ data }) {
return <div>Salam {data}!</div>
}
⏭️💁 Next.js (pagesDir) CSR usulynda:
// pages/index.tsx
import useSWR from 'swr'
export default function Page() {
const { data, error } = useSWR('/api/data', fetcher)
if (error) return <div>Maglumatlary almak başartmady</div>
if (!data) return <div>Ýüklenýär...</div>
return <div>Salam {data}!</div>
}
🍃 React Query (SSR usuly):
import { getItems } from './storeApi'
import { useQuery } from 'react-query'
const Store = () => {
const queryClient = useQueryClient()
return (
<button
onClick={() => {
queryClient.prefetchQuery('items', getItems)
}}
>
Şaýlary görmek
</button>
)
}
const Items = () => {
const { data, isLoading, isError } = useQuery('items', getItems)
// ...
}
⁉️ Hakykatdan-da ⁉️ Näme ulanmaly? useEffect? useQuery? useSWR?
ýa-da... diňe use() 🤔
use() bu wagtyňça bir wagda döredilen React funksiýasydyr, ol düşünje taýdan bir wagda döredilen wagtyňça bahalardan ýaly, awagt bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda döredilen bahalardan ýaly, bir wagda dö