📋 محتويات الصفحة
📖 الوصف
Valtio هي مكتبة لإدارة الحالة في React تستخدم Proxies لجعل state reactive تلقائياً. تعتمد على `proxy` و `useSnapshot` لإنشاء state يُحدّث الواجهة تلقائياً عند التغيير. من فريق pmndrs (نفس فريق Zustand، Jotai، وDrei). Valtio تُقدم نهج "mutate to update" – تُغيّر state مباشرة مثل Vue 3 reactivity وال...
🎯 يستخدم في
مجالات استخدام هذه الأداة
State management في React
State mutations مباشرة (مثل Vue)
State sharing بين components
بديل لـ MobX/Recoil
Applications تحتاج لـ simple reactive state
✨ المميزات
أبرز مميزات هذه الأداة
Proxy-based reactive state
API بسيط جداً (proxy + useSnapshot)
Performance ممتاز (fine-grained updates)
TypeScript support ممتاز
مُعدى (mutable) مثل Vue/MobX
DevTools integration
Lightweight (~2KB)
Works مع React و vanilla JS
⚠️ العيوب
نقاط يجب مراعاتها
محدود لـ React (عبر useSnapshot)
Proxy overhead في بعض الحالات
أقل middleware من Redux
أقل شهرة من Zustand
قد يكون صعب debugging
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import { proxy, useSnapshot, subscribe } from 'valtio';
// Create reactive state
const state = proxy({
count: 0,
todos: [],
user: { name: 'Ahmed', age: 25 },
});
// Mutate directly
function increment() {
state.count++;
}
function addTodo(text: string) {
state.todos.push({ id: Date.now(), text, completed: false });
}
// React component
function Counter() {
const snap = useSnapshot(state);
return (
<div>
<p>العدد: {snap.count}</p>
<button onClick={increment}>زيادة</button>
</div>
);
}
// Derived values (computed)
import { derived } from 'valtio/utils';
const doubledCount = derived((get) => get(state).count * 2);
function Counter() {
const snap = useSnapshot(state);
const doubleSnap = useSnapshot(doubledCount);
return (
<div>
<p>العدد: {snap.count}</p>
<p>المضاعف: {doubleSnap}</p>
</div>
);
}
// Subscribe outside React
const unsubscribe = subscribe(state, () => {
console.log('State changed:', state.count);
});📚 أدوات أخرى في State-Management
قد يعجبك أيضاً
Effector
مكتبة إدارة حالة reactive (Reactive State Management)
Jotai
⭐مكتبة إدارة حالة ذرية (Atomic State Management)
MobX
⭐مكتبة إدارة حالة تفاعلية (Reactive State Management)
Nano Stores
مكتبة إدارة حالة خفيفة (Tiny State Manager)
NgRx
⭐مكتبة إدارة الحالة لـ Angular (Angular State Management)
Pinia
⭐مكتبة إدارة الحالة الرسمية لـ Vue (Vue State Management)