ΠΡ Ρ ΠΎΡΠΈΡΠ΅ Π·Π°ΠΏΡΠΎΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠΈΡΡ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅ ?
ΠΡΠΈΠ±ΠΊΠ°
ΠΠ°ΠΊΠΎΠ²ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?
Π ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π²ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΡ:
React.memo
Π’Π΅ΠΊΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.
ΠΡΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΡΡΠ΅ ΡΠ°Π³ΠΈ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΡ Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ JSFiddle (https://jsfiddle.net/Luktwrdm/) ΠΈΠ»ΠΈ CodeSandbox (https://codesandbox.io/s/new) Π½ΠΈΠΆΠ΅:
https://codesandbox.io/s/71lr16j491
ΠΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ?
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠ΅ΡΠ΅Ρ
Π²Π°ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡΠΌ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π»ΠΈ React.memo
ΠΈΠ»ΠΈ Π½Π΅Ρ.
ΠΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ React ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ / ΠΠ‘ ΠΏΠΎΠ΄Π²Π΅ΡΠΆΠ΅Π½Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅?
Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ 16.8.1
ΠΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΠ΅ - ΡΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ°.
Π― Π·Π°ΠΌΠ΅ΡΠΈΠ» ΡΡ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π² Π²Π΅ΡΡΠΈΠΈ 16.8.1
. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ Π² ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΌ Π½Π΅Ρ memoized ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΌΠ΅ΡΡΠΎΠΌ , Π³Π΄Π΅ Promise
ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡΡΡ ΠΈ Suspense
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ.
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅Ρ Π΄Π²Π° ΠΏΠ΅ΡΠ΅Ρ
Π²Π°ΡΠ° ΡΠ²Π΅ΡΡ
Ρ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠΎΡΠ΅Π½ΠΎ Promise
ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅. Π― ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ» Π²ΡΠ·ΠΎΠ², Π±ΡΠΎΡΠΈΠ² Promise
ΡΠ²Π΅ΡΡ
Ρ, Π΄ΠΎ ΠΏΠ΅ΡΠ΅Ρ
Π²Π°ΡΠ°, ΠΈ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅. ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΡΡΠ΅Π·Π°Π΅Ρ, Π΅ΡΠ»ΠΈ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Π½Π΅ Π±ΡΠ»ΠΎ Π²ΡΠ±ΡΠΎΡΠ΅Π½ΠΎ Promise
.
ΠΠ°ΠΊΠ΅Ρ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
function Component(props) {
const [state, setState] = useState()
useEffect(...)
// Promise is thrown somewhere after these two
// hooks on top, but before the return statement.
return (
...
)
}
ΠΠΎΠ³Ρ ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡΡ.
ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl