القائمة الرئيسية

الصفحات

 Improving React with Reactivity



مع تغطية أساسيات البرمجة التفاعلية ، فلنلقِ نظرة على مثال في React ونحسنه بجعله أكثر تفاعلًا. ضع في اعتبارك تطبيقًا به عدادان وجزء من الحالة المشتقة يعتمد على أحد العدادات
With the basics of reactive programming covered let's look at an example in React and improve upon it by making it more reactive.      Consider an app with two counters and a piece of derived state that depends on one of the counters.
const App = () => {
    const [countOnesetCountOne] = useState(0);
    const [countTwosetCountTwo] = useState(0);
  
    const countTwoDoubled = useMemo(() => {
      return countTwo * 2;
    }, [countTwo]);
  
    return (
      <div>
        <button
          onClick={() => {
            setCountOne((prev=> prev + 1);
          }}
        >
          Increment Count One: {countOne}
        </button>
        <button
          onClick={() => {
            setCountTwo((prev=> prev + 1);
          }}
        >
          Increment Count Two: {countTwo}
        </button>
        <p>Count Two Doubled: {countTwoDoubled}</p>
      </div>
    );
  };

هنا لدينا منطق لمضاعفة قيمة countTwo في كل تصيير ، ولكن إذا وجد useMemo أن countTwo يحمل نفس القيمة التي حصل عليها في التصيير السابق ، فلن تتم إعادة اشتقاق القيمة المضاعفة في هذا التصيير.
Here we have logic to double the value of countTwo on each render, but if useMemo finds that countTwo holds the same value that it did on the previous render, then the doubled value will not be re-derived on that render.
بدمج أفكارنا السابقة ، يمكننا سحب مسؤوليات الدولة من React وبدلاً من ذلك نضع حالتنا كرسم بياني للملاحظات في دالة منشئ.
Combining our earlier ideas, we can pull state responsibilities out of React and instead set up our state as a graph of observables in a constructor function.
ستقوم الملاحظات بإخطار المكون كلما تغير قابل للملاحظة حتى يعرف أنه يعيد العرض.
The observables will notify the component whenever an observable changes so that it knows to re-render.
const App = createComponent(({ setState }) => {
    // This is a constructor layer that only runs once.
    // Create observables to hold our counter state.
    const countOne$ = observable(0);
    const countTwo$ = observable(0);
    const countTwoDoubled$ = derived(countTwo$, (countTwo=> {
      return countTwo * 2;
    });
  
    observe(
      [countOne$countTwo$countTwoDoubled$],
      (countOnecountTwocountTwoDoubled=> {
        setState({
          countOne,
          countTwo,
          countTwoDoubled
        });
      }
    );
  
    // The constructor returns the render function.
    return (propsstate=> (
      <div>
        <button
          onClick={() => {
            countOne$.set((prev=> prev + 1);
          }}
        >
          Increment Count One: {state.countOne}
        </button>
        <button
          onClick={() => {
            countTwo$.set((prev=> prev + 1);
          }}
        >
          Increment Count Two: {state.countTwo}
        </button>
        <p>Count Two Doubled: {state.countTwoDoubled}</p>
      </div>
    );
  });
في المثال أعلاه ، تتوفر الملاحظات التي نقوم بإنشائها في المُنشئ في وظيفة التقديم عبر الإغلاق ، مما يسمح لنا بتعيين قيمها استجابةً لنقر الأحداث. doubleCountTwo $ يلاحظ countTwo $ ويضاعف قيمته فقط عندما تتغير قيمة countTwo $. لاحظ كيف أننا لا نشتق العدد المضاعف أثناء التصيير ، ولكن قبله. أخيرًا ، نستخدم وظيفة المراقبة لإعادة تقديم مكوننا في أي وقت يتغير فيه أي من العناصر المرصودة.
In the above example, the observables we create in the constructor are available in the render function via closure, which allows us to set their values in response to click events. doubledCountTwo$ observes countTwo$ and doubles its value only when the value of countTwo$ changes.      Notice how we don't derive the doubled count during the render, but prior to it. Lastly, we use the observe function to re-render our component any time that any of the observables change.
هل اعجبك الموضوع :

تعليقات