العودة للمقالات

إدارة الحالة الحديثة في React: ما وراء Redux

Majd Muhtaseb03‏/06‏/20258 دقيقة

مقدمة

لطالما كانت Redux المكتبة المفضلة لإدارة الحالة في تطبيقات React. ومع ذلك، يمكن أن يكون نموذجها الأساسي وتعقيدها في بعض الأحيان مربكًا، خاصة بالنسبة للمشاريع الصغيرة. لحسن الحظ، يقدم نظام React البيئي العديد من البدائل الممتازة التي توفر طرقًا أبسط وأكثر كفاءة لإدارة حالة التطبيق. تستكشف هذه المقالة ثلاثة خيارات شائعة: Zustand و Jotai و Recoil.

Zustand: بسيط وغير متحيز

Zustand هو حل لإدارة الحالة صغير وسريع وقابل للتطوير. يستخدم واجهة برمجة تطبيقات مبسطة تعتمد على hooks ، مما يجعل من السهل للغاية تعلمها ودمجها في المشاريع الحالية.

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>نقصان</button>
    </div>
  );
}

Zustand هو خيار رائع عندما تحتاج إلى حل بسيط وفعال لإدارة الحالة دون تعقيد غير ضروري.

Jotai: إدارة الحالة الذرية

Jotai هي مكتبة لإدارة الحالة الذرية مستوحاة من Recoil ولكن مع تنفيذ أبسط وحجم أصغر. يعتمد على مفهوم "الذرات"، وهي وحدات حالة مستقلة يمكن دمجها واشتقاقها بسهولة.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
      <button onClick={() => setCount(count - 1)}>نقصان</button>
    </div>
  );
}

يتألق Jotai عندما تحتاج إلى تحكم دقيق في تحديثات الحالة وتريد تجنب إعادة العرض غير الضرورية.

Recoil: إدارة الحالة التفاعلية من Facebook

Recoil هي مكتبة لإدارة الحالة تم تطويرها بواسطة Facebook خصيصًا لـ React. يقدم مفاهيم الذرات (وحدات الحالة) و المحددات (الحالة المشتقة). يوفر Recoil جلبًا فعالًا للبيانات واشتراكات دقيقة، مما يحسن الأداء للتطبيقات المعقدة.

import { atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
      <button onClick={() => setCount(count - 1)}>نقصان</button>
    </div>
  );
}

يعتبر Recoil مناسبًا تمامًا للتطبيقات الكبيرة والمعقدة حيث يكون الأداء وقابلية التوسع أمرًا بالغ الأهمية. ومع ذلك، فإنه يحتوي على منحنى تعليمي أكثر حدة مقارنة بـ Zustand و Jotai.

خاتمة

يعتمد اختيار حل إدارة الحالة المناسب على الاحتياجات المحددة لمشروعك. في حين أن Redux تظل خيارًا قويًا، فإن Zustand و Jotai و Recoil تقدم بدائل مقنعة يمكن أن تبسط التطوير وتحسن الأداء. ضع في اعتبارك مدى تعقيد تطبيقك، والمنحنى التعليمي لكل مكتبة، والمستوى المطلوب من التحكم عند اتخاذ قرارك.