Voici quelques concepts et terminologies React plus avancés :
12. API de contexte
L'API Context fournit un moyen de transmettre des données via l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau. Il est utile pour les données globales telles que les thèmes, l'authentification ou les données utilisateur.
Exemple :
const ThemeContext = React.createContext('light'); function ThemedButton() { return ( <ThemeContext.Consumer> {theme => <button className={theme}>I am styled by {theme} theme!</button>} </ThemeContext.Consumer> ); } function App() { return ( <ThemeContext.Provider value="dark"> <ThemedButton /> </ThemeContext.Provider> ); }
13. Réfs
Les références fournissent un moyen d'accéder aux nœuds DOM ou aux éléments React créés dans la méthode de rendu. Il est souvent utilisé pour modifier directement un élément DOM ou gérer le focus.
Exemple :
import { useRef } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { inputEl.current.focus(); }; return ( <div> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </div> ); }
14. Composant d'ordre supérieur (HOC)
Un HOC est une fonction qui prend un composant et renvoie un nouveau composant. Il est souvent utilisé pour réutiliser la logique des composants.
Exemple :
function withLogger(WrappedComponent) { return function WithLogger(props) { console.log('Rendering component'); return <WrappedComponent {...props} />; }; } const EnhancedComponent = withLogger(MyComponent);
15. React.memo
React.memo est un composant d'ordre supérieur qui permet d'optimiser les performances en mémorisant un composant. Si les accessoires n'ont pas changé, le composant ignorera le nouveau rendu.
Exemple :
const MyComponent = React.memo(function MyComponent(props) { return <div>{props.text}</div>; });
16. utiliser le crochet réducteur
Le hook useReducer est une alternative à useState. C'est utile pour gérer une logique d'état plus complexe, en particulier lorsque l'état dépend de valeurs précédentes.
Exemple :
import { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <div> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <span>{state.count}</span> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </div> ); }
17. Réagir aux fragments
React Fragments vous permet de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM.
Exemple :
function Table() { return ( <> <tr> <td>Row 1</td> </tr> <tr> <td>Row 2</td> </tr> </> ); }
18. Portails
Les portails fournissent un moyen de restituer les enfants dans un nœud DOM qui existe en dehors de la hiérarchie du composant parent.
Exemple :
import ReactDOM from 'react-dom'; function Modal({ children }) { return ReactDOM.createPortal( <div className="modal">{children}</div>, document.getElementById('modal-root') ); }
19. Limites d'erreur
Les limites d'erreur sont des composants React qui détectent les erreurs JavaScript n'importe où dans leur arborescence de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de secours.
Exemple :
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } }
20. Chargement paresseux
React prend en charge le chargement paresseux des composants, ce qui signifie que les composants peuvent être chargés de manière asynchrone lorsqu'ils sont requis, améliorant ainsi les performances des applications volumineuses.
Exemple :
import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> ); }
21. Mode strict
StrictMode est un outil permettant de mettre en évidence les problèmes potentiels dans une application. Il ne restitue aucune interface utilisateur visible mais vérifie les problèmes tels que les méthodes de cycle de vie obsolètes.
Exemple :
function App() { return ( <React.StrictMode> <MyComponent /> </React.StrictMode> ); }
22. Composants contrôlés ou non contrôlés
Composants contrôlés : éléments de formulaire dont la valeur est contrôlée par l'état React.
Composants non contrôlés : éléments de formulaire dont la valeur est gérée par le DOM.
Example of Controlled Component: function ControlledInput() { const [value, setValue] = useState(''); return ( <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> ); } Example of Uncontrolled Component: function UncontrolledInput() { const inputRef = useRef(null); return <input type="text" ref={inputRef} />; }
23. Forage d'hélices
Le Prop Drilling se produit lorsque les données sont transmises à travers plusieurs niveaux de composants pour atteindre un enfant profondément imbriqué. Cela peut être évité en utilisant l'API Context ou des bibliothèques de gestion d'état.
Example of Prop Drilling: function Grandparent() { const name = "John"; return <Parent name={name} />; } function Parent({ name }) { return <Child name={name} />; } function Child({ name }) { return <p>{name}</p>; }
24. Cycle de vie du rendu
Les composants React ont un cycle de vie avec des méthodes qui sont invoquées à différentes étapes, telles que le montage, la mise à jour et le démontage.
Méthodes de cycle de vie (composants de classe) :
Exemple :
class MyComponent extends React.Component { componentDidMount() { console.log('Component mounted'); } componentDidUpdate() { console.log('Component updated'); } componentWillUnmount() { console.log('Component will unmount'); } render() { return <div>Hello!</div>; } }
25. utiliserRef Hook
Le hook useRef est utilisé pour conserver les valeurs à travers les rendus sans provoquer de nouveau rendu. Il est couramment utilisé pour accéder aux éléments DOM ou stocker des valeurs mutables.
Exemple :
function Timer() { const countRef = useRef(0); useEffect(() => { const intervalId = setInterval(() => { countRef.current += 1; console.log(countRef.current); }, 1000); return () => clearInterval(intervalId); }, []); return <p>Check the console to see the timer.</p>; }
Ces concepts supplémentaires vous aideront à approfondir votre compréhension de React et à aborder des scénarios plus avancés !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!