Dans cet article, nous allons explorer ce qu’est la liaison de données et pourquoi elle est importante dans React.
La liaison de données est un processus de connexion de données entre un composant et sa représentation d’interface utilisateur. Cela signifie que toute modification apportée aux données sera automatiquement reflétée dans l’interface utilisateur, et vice versa. Ceci est crucial dans le développement Web moderne, car cela permet de synchroniser les données et l’interface utilisateur, ce qui facilite la création d’applications dynamiques et réactives.
Dans React, la liaison de données est réalisée via l’état et les accessoires. L’état est les données internes d’un composant qui peuvent changer au fil du temps, tandis que les props sont des données externes qui sont transmises à un composant depuis son parent.
Lorsque l’état ou les accessoires changent, React restitue automatiquement le composant, mettant à jour l’interface utilisateur pour refléter les nouvelles données.
Liaison de données unidirectionnelle
Il lie les données de l’état du composant à l’interface utilisateur. Cela signifie que toute modification apportée à l’état du composant se reflétera automatiquement dans l’interface utilisateur, mais pas l’inverse.
Dans React, la liaison de données unidirectionnelle est réalisée à l’aide de JSX. Les données de l’état du composant sont accessibles à l’aide d’accolades dans le code JSX et affichées dans l’interface utilisateur :
class ItemList extends React.Component {
state = {
items: ['item 1', 'item 2', 'item 3']
}
render() {
return (
<ul>
{this.state.items.map((item, index) => {
return <li key={index}>{item}</li>
})}
</ul>
)
}
}Dans cet exemple, le ItemList Le composant a un état qui contient un tableau d’éléments. Le render La méthode mappe les éléments de l’état et affiche chacun d’eux dans un élément de liste dans un ul élément.
Liaison de données bidirectionnelle
Il s’agit de données contraignantes de les deux l’état du composant et l’interface utilisateur. Cela signifie que les modifications apportées à l’état du composant ou à l’interface utilisateur se refléteront automatiquement dans l’autre.
Dans React, la liaison de données bidirectionnelle est obtenue à l’aide de la onChange événement sur les éléments de formulaire, tels que input, selectet textarea. Le onChange permet au composant de mettre à jour l’état avec la valeur actuelle de l’élément de formulaire :
class ItemForm extends React.Component {
state = {
newItem: ''
}
handleChange = (event) => {
this.setState({
newItem: event.target.value
})
}
handleSubmit = (event) => {
event.preventDefault()
this.props.addItem(this.state.newItem)
this.setState({
newItem: ''
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.newItem} onChange={this.handleChange} />
<button type="submit">Add Item</button>
</form>
)
}
}Ici:
- Le
ItemFormLe composant a un état qui contient la valeur actuelle de l’entrée de formulaire. - Le
handleChangeLa méthode met à jour l’état avec la valeur actuelle de l’entrée du formulaire à chaque fois qu’elle change. - Le
handleSubmitLa méthode est appelée lorsque le formulaire est soumis, ajoutant le nouvel élément à la liste et effaçant l’entrée du formulaire.
useRef pour la liaison de données
useRef est un crochet qui vous permet d’accéder à la valeur d’un élément DOM ou d’une instance de composant React. Le useRef hook renvoie un objet avec un current propriété, qui peut être utilisée pour stocker des valeurs qui persistent à travers les cycles de rendu.
Une façon d’utiliser useRef pour la liaison de données consiste à stocker la valeur d’un formulaire de saisie dans le current propriété d’une réf.
Cela vous permet de lier directement les données entre le formulaire et l’état du composant sans utiliser de gestionnaire d’événements :
function InputForm() {
const inputRef = useRef(null)
const [value, setValue] = useState('')
const handleSubmit = (event) => {
event.preventDefault()
setValue(inputRef.current.value)
}
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
<p>{value}</p>
</form>
)
}Ici le useRef hook est utilisé pour créer une référence à l’élément d’entrée dans le formulaire. Le handleSubmit La méthode est appelée lorsque le formulaire est soumis, mettant à jour l’état du composant avec la valeur de l’entrée.
L’état du composant est alors affiché dans un p élément.
useReducer pour la liaison de données
useReducer est un crochet qui vous permet de gérer des transitions d’état complexes dans vos composants. Le useReducer hook prend une fonction de réduction et un état initial, et renvoie un tableau avec l’état actuel et une fonction de répartition qui peut être utilisée pour mettre à jour l’état.
Une façon d’utiliser useReducer pour la liaison de données est de gérer l’état d’un panier.
La fonction reducer peut être utilisée pour mettre à jour l’état en fonction de l’action en cours, et la fonction dispatch peut être utilisée pour déclencher la mise à jour :
function shoppingCartReducer(state, action) {
switch (action.type) {
case 'ADD_ITEM':
return [...state, action.item]
case 'REMOVE_ITEM':
return state.filter((item, index) => index !== action.index)
default:
return state
}
}
function ShoppingCart() {
const [cart, dispatch] = useReducer(shoppingCartReducer, [])
const addItem = (item) => {
dispatch({ type: 'ADD_ITEM', item })
}
const removeItem = (index) => {
dispatch({ type: 'REMOVE_ITEM', index })
}
return (
<div>
<button onClick={() => addItem('item 1')}>Add Item 1</button>
<button onClick={() => addItem('item 2')}>Add Item 2</button>
<ul>
{cart.map((item, index) => {
return (
<li key={index}>
{item}
<button onClick={() => removeItem(index)}>Remove</button>
</li>
)
})}
</ul>
</div>
) }Ici le useReducer hook est utilisé pour gérer l’état du panier.
La fonction de réducteur, shoppingCartReducer, prend l’état actuel et une action, et renvoie l’état mis à jour en fonction du type de l’action. La fonction dispatch est utilisée pour déclencher la mise à jour en transmettant un objet action.
Le composant contient deux boutons permettant d’ajouter des articles au panier et une liste d’articles du panier pouvant être supprimés.
Qu’est-ce que la méthode de cycle de vie React ?
La méthode du cycle de vie de réaction fait référence à la séquence d’événements qui se produisent dans un composant React, de sa création à sa destruction.
Il est nécessaire de connaître les méthodes de cycle de vie dans React car elles jouent un rôle crucial dans la gestion de la liaison de données et la fluidité du flux de données entre l’état du composant et l’interface utilisateur.
Les méthodes de cycle de vie les plus courantes dans React sont :
componentDidMount: Cette méthode est appelée après le rendu du composant à l’écran. C’est un endroit idéal pour effectuer des appels d’API, configurer des écouteurs d’événements ou effectuer toute autre action nécessitant le rendu complet du composant.shouldComponentUpdate: Cette méthode est appelée avant qu’un rendu ne soit déclenché. Il vous permet de contrôler quand un composant doit être rendu à nouveau. Par défaut, cette méthode retournetrue, ce qui signifie que le composant sera restitué chaque fois qu’il y a un changement d’état ou d’accessoires. Toutefois, si vous souhaitez optimiser les performances, vous pouvez utiliser cette méthode pour éviter les nouveaux rendus inutiles.componentDidUpdate: Cette méthode est appelée après la mise à jour d’un composant. Vous pouvez l’utiliser pour effectuer toutes les actions supplémentaires qui doivent être prises après un rendu.componentWillUnmount: Cette méthode est appelée juste avant qu’un composant ne soit supprimé du DOM. Vous pouvez l’utiliser pour effectuer toutes les actions de nettoyage qui doivent être prises lorsqu’un composant n’est plus nécessaire.
En termes de liaison de données, les méthodes de cycle de vie peuvent jouer un rôle crucial pour garantir que l’état du composant est correctement lié à l’interface utilisateur.
Par exemple, vous souhaiterez peut-être mettre à jour l’état du composant en réponse à un événement, tel qu’un clic sur un bouton.
Dans ce cas, vous utiliserez le componentDidUpdate pour vérifier les changements d’état et déclencher un nouveau rendu si nécessaire.
Conclusion
Dans l’ensemble, comprendre la liaison de données et le cycle de vie de React est essentiel pour créer des applications dynamiques et efficaces.
Si vous souhaitez en savoir plus sur React, de nombreuses ressources sont disponibles en ligne, notamment la documentation officielle sur le site Web de React, des didacticiels et des cours en ligne.