ΠΡ Ρ ΠΎΡΠΈΡΠ΅ Π·Π°ΠΏΡΠΎΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠΈΡΡ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅ ?
ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ° . π
ΠΠ°ΠΊΠΎΠ²ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?
ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΈ Ρ
ΡΠΊΠΈ useContext
ΠΊΠ°ΠΆΡΡΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΡΡΡΠΈΠΌΠΈ, ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΎΡΠΊΠ»ΠΎΠ½ΡΡΡΡΡ.
ΠΠ°ΠΊΠΎΠ΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?
ΠΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ value
.
ΠΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ React ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ / ΠΠ‘ ΠΏΠΎΠ΄Π²Π΅ΡΠΆΠ΅Π½Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅?
18.8.0-alpha.1
(ΡΠ°ΠΊΠΆΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π° 16.7.0-alpha.0
)chrome 71
ΠΡΠΈ ΠΎΡΠΈΡΡΠΊΠ΅ "ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ" localStorage,
Π― ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΡΠΌΠ΅ΡΠ°ΡΡ 2 ΡΡΠ°ΡΡΠΈ ( [1]
& [2]
) ΠΈΠ· ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΡΠ΅Π°ΠΊΡΠΈΠΈ, Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ
ΡΠΊΠΎΠ², Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡ
ΠΎΠΆΠ΅, Π½Π΅ ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΡ.
Π― ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ» ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π° codeandbox [3]
.
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ - ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠ°ΡΠ° ΡΡΡΠΎΠΊ (ΡΠ°Π·Π±ΠΎΡ ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JSON).
ΠΠ±Ρ ΠΎΠ΄Π½ΡΠ΅ ΠΏΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°ΡΠ΅Π»:
setValue
, ΠΎΠ½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.[1]
ΠΎΠ± ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.componentDidUpdate
Π²ΠΌΠ΅ΡΡΠΎ useEffect
.ΠΡΡΡ Π»ΠΈ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ, ΡΡΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅? ΡΡΡΠ΅ΠΊΡ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ,
Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠ΅Π±Π»ΡΡΡΠΈΡ
ΡΠ΅ΡΠ΅Π· Π»ΠΎΠ²ΡΡΠΊΡ. ΡΠΌ. ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ΄ [3]
const createLocalStorage = key => {
const initialValue = localStorage.getItem(key)
const ValueContext = createContext(initialValue)
const SetterContext = createContext(() => {})
const useStorage = () => [ValueContext, SetterContext].map(useContext)
const Provider = ({children}) => {
const [value, setValue] = useState(initialValue)
useEffect(
() => {
console.log('effect', value)
localStorage.setItem(key, value)
},
[value],
)
return (
<ValueContext.Provider value={value}>
<SetterContext.Provider value={setValue}>
{children}
</SetterContext.Provider>
</ValueContext.Provider>
)
}
return [Provider, useStorage]
}
[1]
: https://reactjs.org/docs/hooks-faq.html#how -to-ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅-ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ-ΠΎΠ±ΡΠ°ΡΠ½ΡΡ
Π²ΡΠ·ΠΎΠ²ΠΎΠ²-Π²Π½ΠΈΠ·
[2]
: https://reactjs.org/docs/context.html#updating -context-from-a-nested-component
[3]
: https://codesandbox.io/s/0yzjr8vnrv
Π― ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ» ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π° codeandbox [3].
ΠΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π²Π°ΡΠΈ Π²ΡΠ·ΠΎΠ²Ρ useContext
Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅, ΡΡΠΎ ΠΈ Provider
. Π ΡΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΠΎΠ½ΠΈ ΡΠΈΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π΄ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠΌ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅ΡΠ° Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ Π½Π΅ ΠΏΡΡΠ°Π»ΠΈΡΡ ΠΎΠ±ΠΌΠ°Π½ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Ρ
ΡΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π° ΡΠΈΠΏΠ° [A, B].map(useContext)
Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΡΠΎ ΡΠ°Π½ΡΡΠ΅ ;-)
ΠΏΡΠΈΠ²Π΅Ρ ΠΡΠ½! ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π±ΡΡΡΡΡΠΉ ΠΎΡΠ²Π΅Ρ (: ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΠ».
ΠΡΡΠ°ΡΠΈ: useContext
(ΡΠ΅ΡΠ΅Π· useStorage
) Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ App
, ΡΡΠΎ _is_ Π²Π½ΡΡΡΠΈ Provider
Π² ΡΡΠ½ΠΊΡΠΈΠΈ ReactDOM.render
. (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΡΠ΄Π΅Π»Π°Π» ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅).
ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ :
Π― ΠΏΡΠΎΡΡΠΎ ΡΠ΅ΡΠΈΠ» ΡΡΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΡΡ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΡ ΡΡΡΠΎΠΊΡ .map
: Ρ ΠΏΡΠΎΠΏΡΡΡΠΈΠ» ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ observedBits
, ΠΊΠΎΡΠΎΡΡΠΉ Π² ΠΈΡΠΎΠ³Π΅ Π±ΡΠ» ΠΏΠ΅ΡΠ΅Π΄Π°Π½, Ρ ΡΠΈΡΠ°Π» ΠΎΠ± ΡΡΠΎΠΌ Π·Π΄Π΅ΡΡ Π² Issues / PR, Π½ΠΎ Π·Π°Π±ΡΠ» ΠΎΠ± ΡΡΠΎΠΌ ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΈΡΠΏΠΎΡΡΠΈΠ» ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠ°Π°, ΡΡ ΠΏΡΠ°Π², Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΠ» ΡΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠ° observedBits
Π·Π΄Π΅ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Π»ΠΎΠ²ΡΡΠΊΡ, Π½ΠΎ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ useContext
Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ, ΡΠ°ΠΊ ΡΡΠΎ ..
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π²Π°ΡΠΈ Π²ΡΠ·ΠΎΠ²Ρ
useContext
Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅, ΡΡΠΎ ΠΈProvider
. Π ΡΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΠΎΠ½ΠΈ ΡΠΈΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π΄ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠΌ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅ΡΠ° Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ Π½Π΅ ΠΏΡΡΠ°Π»ΠΈΡΡ ΠΎΠ±ΠΌΠ°Π½ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Ρ ΡΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π° ΡΠΈΠΏΠ°
[A, B].map(useContext)
Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΡΠΎ ΡΠ°Π½ΡΡΠ΅ ;-)