web:javascript:react:toc
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
web:javascript:react:toc [2019/07/09 04:14] – [Fetch data] sgariepy | web:javascript:react:toc [2022/02/02 00:42] – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 213: | Ligne 213: | ||
* [[https:// | * [[https:// | ||
+ | |||
+ | |||
+ | ====== Hooks ====== | ||
+ | |||
+ | Les hooks permet de ne pas avoir besoin de créer des composants de classes, ces derniers ayant pour désavantage de complexifier le code. | ||
+ | |||
+ | ===== useState ===== | ||
+ | |||
+ | Utilisation de base: | ||
+ | |||
+ | <code javascript> | ||
+ | const [state, setState] = useState(initialState); | ||
+ | setState(newState); | ||
+ | </ | ||
+ | ===== useEffect ===== | ||
+ | |||
+ | -> [[https:// | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | useEffect(() => { | ||
+ | // Équivalent à componentDidMount | ||
+ | window.addEventListener(' | ||
+ | return () => { | ||
+ | // Équivalent à componentWillUnmount | ||
+ | window.removeEventListener(' | ||
+ | } | ||
+ | }, []) | ||
+ | </ | ||
+ | ===== useRef ===== | ||
+ | |||
+ | <code javascript> | ||
+ | import React, { useRef } from ' | ||
+ | |||
+ | const ImageToggle = ({ primaryImg, secondaryImg }) => { | ||
+ | const imageRef = useRef(null); | ||
+ | |||
+ | return ( | ||
+ | <img | ||
+ | onMouseOver={() => imageRef.current.src = secondaryImg} | ||
+ | onMouseOut={() => imageRef.current.src = primaryImg} | ||
+ | src={primaryImg} | ||
+ | alt="" | ||
+ | /> | ||
+ | ); | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====== Références et sources ====== | ||
+ | |||
+ | * [[https:// | ||
web/javascript/react/toc.txt · Dernière modification : 2023/10/03 21:20 de sgariepy