"Oh non… mon état est encore une fois en désordre."
Lorsque vous gérez l'état avec React, avez-vous déjà rencontré des problèmes comme ceux-ci ?
"N'y a-t-il pas un moyen plus simple de gérer l'état ?"
C'est pourquoi j'ai créé F-Box React.
Avec F-Box React, vous pouvez vous libérer du modèle de gestion d'état et garder votre code simple !
Commençons par examiner des exemples de code concrets pour comprendre comment utiliser F-Box React. Dans cette section, nous comparerons useState avec useRBox en utilisant une simple application de compteur comme exemple.
import { useState } from "react"
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
export default Counter
Cette approche classique utilise useState pour gérer le décompte.
import { useRBox, set } from "f-box-react"
function Counter() {
const [count, countBox] = useRBox(0) // Create an RBox with initial value 0
const setCount = set(countBox) // Get a convenient updater function for the RBox
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
export default Counter
Ici, nous implémentons le compteur en utilisant useRBox. Puisque useRBox renvoie une paire [value, RBox], elle peut être utilisée de manière très similaire à useState.
import { RBox } from "f-box-core"
const numberBox = RBox.pack(0)
// Subscribe to changes and log updates
numberBox.subscribe((newValue) => {
console.log(`Updated numberBox: ${newValue}`)
})
// Change the value, which notifies subscribers reactively
numberBox.setValue((prev) => prev + 1) // Updated numberBox: 1
numberBox.setValue((prev) => prev + 10) // Updated numberBox: 11
Comme indiqué ci-dessus, RBox ne dépend pas de React, elle peut donc être utilisée pour la gestion réactive des données dans n'importe quel code TypeScript.
import React, { createContext, useContext, useState } from "react"
const CounterContext = createContext()
function CounterProvider({ children }) {
const [count, setCount] = useState(0)
return (
<CounterContext.Provider value={{ count, setCount }}>
{children}
</CounterContext.Provider>
)
}
function CounterDisplay() {
const { count } = useContext(CounterContext)
return <p>Count: {count}</p>
}
function CounterButton() {
const { setCount } = useContext(CounterContext)
return <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
}
function App() {
return (
<CounterProvider>
<CounterDisplay />
<CounterButton />
</CounterProvider>
)
}
export default App
Cette méthode utilise useContext pour partager l'état, mais elle a tendance à rendre le code verbeux.
import { RBox } from "f-box-core"
import { useRBox } from "f-box-react"
// Define a global RBox
const counterBox = RBox.pack(0)
function CounterDisplay() {
const [count] = useRBox(counterBox)
return <p>Count: {count}</p>
}
function CounterButton() {
return (
<button onClick={() => counterBox.setValue((prev) => prev + 1)}>+1</button>
)
}
function App() {
return (
<div>
<CounterDisplay />
<CounterButton />
</div>
)
}
export default App
Ici, nous définissons une RBox globale et utilisons useRBox dans chaque composant pour partager l'état. Cela évite d'avoir recours à useContext ou à des fournisseurs, tout en gardant le code simple.
import { useReducer } from "react"
type State = {
name: string
age: number
}
type Action =
| { type: "incremented_age" }
| { type: "changed_name"; nextName: string }
function reducer(state: State, action: Action): State {
switch (action.type) {
case "incremented_age": {
return {
name: state.name,
age: state.age + 1,
}
}
case "changed_name": {
return {
name: action.nextName,
age: state.age,
}
}
}
}
const initialState = { name: "Taylor", age: 42 }
export default function Form() {
const [state, dispatch] = useReducer(reducer, initialState)
function handleButtonClick() {
dispatch({ type: "incremented_age" })
}
function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
dispatch({
type: "changed_name",
nextName: e.target.value,
})
}
return (
<>
<input value={state.name} onChange={handleInputChange} />
<button onClick={handleButtonClick}>Increment age</button>
<p>
Hello, {state.name}. You are {state.age}.
</p>
</>
)
}
import { useRBox, set } from "f-box-react"
function useUserState(_name: string, _age: number) {
const [name, nameBox] = useRBox(_name)
const [age, ageBox] = useRBox(_age)
return {
user: { name, age },
changeName(e: React.ChangeEvent<HTMLInputElement>) {
set(nameBox)(e.target.value)
},
incrementAge() {
ageBox.setValue((prev) => prev + 1)
},
}
}
export default function Form() {
const { user, changeName, incrementAge } = useUserState("Taylor", 42)
return (
<>
<input value={user.name} onChange={changeName} />
<button onClick={incrementAge}>Increment age</button>
<p>
Hello, {user.name}. You are {user.age}.
</p>
</>
)
}
En utilisant useRBox, vous pouvez gérer l'état sans définir de réducteurs ni de types d'action, ce qui simplifie le code.
Jusqu'à présent, nous avons présenté l'utilisation de base de F-Box React à travers des exemples de code. Ensuite, nous couvrirons les informations détaillées suivantes :
Ces points sont cruciaux pour une compréhension plus approfondie de F-Box React.
À l'origine, j'ai développé F-Box (f-box-core) uniquement comme une bibliothèque polyvalente pour la programmation fonctionnelle. F-Box fournit des abstractions telles que Box, Maybe, Everyone et Task pour simplifier les transformations de données, les effets secondaires et les calculs asynchrones.
Au sein de F-Box, un conteneur réactif nommé RBox a été introduit. RBox surveille les changements de sa valeur et permet une gestion réactive de l'état.
Après avoir créé RBox, je me suis dit : "Et si j'intégrais cette box réactive dans React ? Cela pourrait simplifier la gestion des états dans les applications React." Sur la base de cette idée, j'ai développé F-Box React (f-box-react)—une collection de hooks qui facilitent l'utilisation de RBox dans les composants React.
En conséquence, F-Box React s'est avéré étonnamment convivial, fournissant un outil puissant pour gérer l'état dans React de manière simple et flexible.
Les éléments clés de F-Box React sont :
RBox
Un conteneur qui permet la gestion de l'état réactif. Il peut observer et gérer les changements d'état indépendamment de React.
useRBox
Un hook personnalisé pour utiliser facilement RBox dans les composants React. Il fournit une API intuitive similaire à useState, vous permettant de récupérer et de mettre à jour les valeurs réactives.
Ces éléments signifient que :
On dirait useState
La gestion de l'état est aussi intuitive qu'avec useState.
Partager sans effort l'état entre plusieurs composants
Vous pouvez facilement partager l'état entre plusieurs composants.
RBox peut également être utilisé en dehors de React
Parce qu'il ne dépend pas de React, il est également utilisable dans des environnements non-React.
Cela rend la gestion de l'état extrêmement simple.
Pour intégrer F-Box React dans votre projet, exécutez la commande suivante en utilisant npm ou Yarn. Puisque F-Box React dépend de f-box-core, vous devez installer les deux simultanément :
import { useState } from "react"
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
export default Counter
Après l'installation, vous pouvez importer et utiliser des hooks comme useRBox comme indiqué dans les exemples précédents :
import { useRBox, set } from "f-box-react"
function Counter() {
const [count, countBox] = useRBox(0) // Create an RBox with initial value 0
const setCount = set(countBox) // Get a convenient updater function for the RBox
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
export default Counter
Assurez-vous également que f-box-core est installé, car il fournit les conteneurs essentiels comme RBox :
import { RBox } from "f-box-core"
const numberBox = RBox.pack(0)
// Subscribe to changes and log updates
numberBox.subscribe((newValue) => {
console.log(`Updated numberBox: ${newValue}`)
})
// Change the value, which notifies subscribers reactively
numberBox.setValue((prev) => prev + 1) // Updated numberBox: 1
numberBox.setValue((prev) => prev + 10) // Updated numberBox: 11
Avec cette configuration, vous pouvez désormais gérer l'état à l'aide de F-Box React.
En utilisant F-Box React, la gestion des états dans React devient considérablement plus simple :
Intuitif comme useState
Transmettez simplement une valeur initiale à useRBox et commencez à l'utiliser immédiatement.
RBox fonctionne en dehors de React
Parce qu'il ne dépend pas de React, vous pouvez l'utiliser côté serveur ou dans d'autres environnements.
Partage d'état facile
Définissez une RBox globale et utilisez useRBox partout où vous en avez besoin pour partager l'état entre plusieurs composants. Cela élimine le besoin de configurations complexes avec useContext ou Redux.
Si vous cherchez un moyen plus simple de gérer l'état, essayez F-Box React !
Nous avons présenté ici l'utilisation de base et la commodité de F-Box React, mais F-Box offre bien plus de fonctionnalités. Il peut gérer des opérations asynchrones, la gestion des erreurs et des scénarios plus complexes.
Pour plus de détails, consultez la documentation F-Box.
J'espère que F-Box React rendra votre développement React et TypeScript plus agréable et plus simple !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
