tgoop.com/React_lib/680
Create:
Last Update:
Last Update:
π― ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ΅ΡΠ΅Π½Π΄Π΅ΡΠΎΠ² Π² React ΡΠ΅ΡΠ΅Π· ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°ΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π·Π½Π°ΡΡ ΠΏΡΠΎ React.memo
, Π½ΠΎ ΡΠ°ΡΡΠΎ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΏΡΠΎ useCallback β ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π»ΠΈΡΠ½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π½Π΄Π΅ΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΠΏΠΈΡΠΊΠ°Ρ
ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
.
π ΠΡΠΎΠ±Π»Π΅ΠΌΠ°:
const handleClick = () => {
console.log('Clicked');
};
<MyButton onClick={handleClick} />
Π’Π°ΠΊΠΎΠΉ
handleClick
ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠ΅. ΠΡΠ»ΠΈ MyButton
ΠΌΠ΅ΠΌΠΎΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ (React.memo
), ΡΡΠΎ ΡΠ»ΠΎΠΌΠ°Π΅Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ β ΠΏΡΠΎΠΏΡΡ-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ!β Π Π΅ΡΠ΅Π½ΠΈΠ΅:
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
π ΠΡΠΎΡΠΈΡ: Π€ΡΠ½ΠΊΡΠΈΡ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π½Π΄Π΅ΡΠ°ΠΌΠΈ,
MyButton
Π½Π΅ ΡΠ΅ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡΡ Π±Π΅Π· ΠΏΡΠΈΡΠΈΠ½Ρ.π§ ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ:
* ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π² ΡΠΏΠΈΡΠΊΠ°Ρ (
map
)* ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΈΡΠ»ΠΎΠΌ ΠΊΠΎΠ»Π»Π±Π΅ΠΊΠΎΠ²
* ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ UI (ΡΠ°Π±Π»ΠΈΡΡ, Π΄Π°ΡΠ±ΠΎΡΠ΄Ρ, Π³ΡΠ°ΡΠΈΠΊΠΈ)
π‘ ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ eslint-ΠΏΠ»Π°Π³ΠΈΠ½
react-hooks/exhaustive-deps
β ΠΎΠ½ Π½Π΅ Π΄Π°ΡΡ Π·Π°Π±ΡΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ.βοΈ @React_lib
BY React

Share with your friend now:
tgoop.com/React_lib/680