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

إدارة الحالة الحديثة في React: Recoil مقابل Zustand مقابل Jotai

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

مقدمة

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

Recoil

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

import { atom, selector, useRecoilState } from 'recoil';

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

const textLengthState = selector({
  key: 'textLengthState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);
  const length = useRecoilValue(textLengthState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>الطول: {length}</p>
    </div>
  );
}

الإيجابيات: تحديثات دقيقة ، تكامل سهل ، جيد لتبعيات البيانات المعقدة. السلبيات: يمكن أن يكون أكثر تفصيلاً من الحلول الأبسط.

Zustand

Zustand هي مكتبة صغيرة وسريعة وقابلة للتطوير لإدارة الحالة تستخدم نهج تدفق مبسط. يستخدم "المخازن" للاحتفاظ بالحالة وتوفير الإجراءات لتحديثها. إنها غير متحيزة ولا تتطلب موفري سياق React.

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>
      <p>العدد: {count}</p>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>إنقاص</button>
    </div>
  );
}

الإيجابيات: واجهة برمجة تطبيقات بسيطة للغاية ، الحد الأدنى من التعليمات البرمجية المعيارية ، أداء ممتاز. السلبيات: يمكن أن يصبح أقل تنظيمًا في التطبيقات الكبيرة جدًا.

Jotai

تؤكد Jotai على الحالة الذرية والقيم المشتقة باستخدام React Context تحت الغطاء. مثل Recoil ، يركز على التحديثات الفعالة ، ولكن مع واجهة برمجة تطبيقات أبسط. يستخدم الذرات كوحدة أساسية للحالة.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

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

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

الإيجابيات: واجهة برمجة تطبيقات بسيطة ، أداء جيد ، سهلة التعلم. السلبيات: تبعية React Context ، قد لا تتوسع Recoil بشكل جيد مثل Recoil للحالات المعقدة للغاية.

خاتمة

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