רעאַקט באַטשט ופּדאַטעס

באַטשעד דערהייַנטיקונגען פון React.js

איר שוין וויסן אַז ווען איר דערהייַנטיקן די שטאַט פון אַ קאָמפּאָנענט, די דיפיטינג אַלגערידאַם פון React וועט דעטעקט ענדערונגען אין די ווירטועל DOM און מאַכן דיין קאָמפּאָנענט אין די פאַקטיש DOM. אָבער קען דאָס טאַקע פּאַסירן פֿאַר יעדער שטאַט-דערהייַנטיקן? אָדער קען React צושטעלן אַ פּעקל פון די דערהייַנטיקונגען, אַזוי אַז קייפל שטאַט מיוטיישאַנז זענען קאַמביינד אין אַ איין רופן?

סינטעטיש געשעענישן לאָזן באַטשאַז דערהייַנטיקונגען

ריאַקט 17 און נידעריקער גיט אַ מעקאַניזאַם צו פּעקל די דערהייַנטיקונגען. איר טאָן ניט טאַקע האָבן צו טראַכטן וועגן אים בשעת איר קאָדירן, אָבער צו וויסן ווי React קען אַפּטאַמייז דיין קאָד איז נאָך אַ גרויס לערנען.

דאָ ס וואָס כאַפּאַנז.

• קייפל שטאַט מיוטיישאַנז זענען גערופֿן ין אַ קאַללבאַקק
• אויב די קאַללבאַקק איז אַטאַטשט צו אַ סינטעטיש געשעעניש, React וועט פּעקל די מיוטיישאַנז
• ווען מיוטיישאַנז זענען באַטשט, בלויז אַ איין רענדער רופן איז דורכגעקאָכט
• אַנדערש, יעדער מיוטיישאַן פירט צו אַ נייַע רענדערינג

צו געבן באַטשאַז, דיין שטאַט מיוטיישאַנז מוזן זיין גערופֿן ין אַ סינטעטיש רעאַקט געשעעניש. ווי אַ שנעל דערמאָנונג, סינטעטיש רעאַקט events זענען בייסיקלי בלויז אַ ראַפּער אַרום געבוירן HTML events פֿאַר דער זעלביקער פאַנגקשאַנאַליטי אין אַלע בראַוזערז. יעדער סינטעטיש געשעעניש האַנדלער קענען זיין צוגעשטעלט גלייך צו אַ קאָמפּאָנענט ווי אַ אָנשפּאַר.

צו זען אַלץ אין קאַמף, דאָ איז אַ ביישפּיל קאָד וואָס אַלאַוז React צו פאַרבינדן אַלע שטאַט מיוטיישאַנז אין אַ איין ופפירן אַנשטאָט פון איין ופפירן פּער מיוטיישאַן.

function Component() {
  const [id, setId] = useState(0);
  const [date, setDate] = useState(new Date());
  const [random, setRandom] = useState(Math.random());

  // A lame callback, but it's just for
  // the demo. Note that clicking on the
  // button will only lead to a single
  // re-render!
  //
  // This is b/c the callback is provided to
  // 'onClick', a synthetic event.
  const onButtonClick = () => {
    setDate(new Date());
    setId(prevId => prevId + 1);
  }
  
  console.log("Render:", id, date);

  return (
    <div>
      <button 
        onClick={onButtonClick}>
        Update state
      </button>
    </div>
  );
}

//
// Almost the same as the previous
// example, but this time w/o
// a batched upate call.
//

function Component() {
  const [id, setId] = useState(0);
  const [date, setDate] = useState(new Date());
  const [random, setRandom] = useState(Math.random());

  // No batching, as the state
  // mutations happend inside
  // a setTimeout - even though
  // the timeout is inside a 
  // synthetic event.
  const onButtonClick = () => {
    setTimeout(() => {
      setDate(new Date());
      setId(prevId => prevId + 1);
    }, 0);
  }
  
  console.log("Render:", id, date);

  return (
    <div>
      <button 
        onClick={onButtonClick}>
        Update state
      </button>
    </div>
  );
}

באַטטשעד דערהייַנטיקונגען פֿאַר React 18 און שפּעטער

מיט דער ווייַטער ווערסיע פון React (לפּחות בשעת איך שרייבן דאָס), די באַטשאַנינג מעקאַניזאַם וועט זיין פיל ימפּרוווד. אַנשטאָט בלויז מעגלעך אין סינטעטיש events, אנדערע טייפּס פון קאַללבאַקקס זענען אויך נוציק.

• טיימאַוץ
• הבטחות
• געבוירן געשעעניש האַנדלערס

די ענדערונג וועט מיסטאָמע פירן צו אַ בעסער פאָרשטעלונג פון דיין אַפּ, ווייַל ווייניקער רענדערינג וועט זיין אויטאָמאַטיש דורכגעקאָכט.

ויסמיידן באַטשעד דערהייַנטיקונגען אין רעאַקט 18 און שפּעטער

סטאַרטינג מיט רעאַקט 18, איר וועט האָבן די עקספּרעסלי צינגל פון אַ נייַ רענדערז מיט יעדער שטאַט מיוטיישאַן, אַזוי ויסמיידן אַ באַטשעד דערהייַנטיקן. דאָס וועט מיסטאָמע בלויז זיין געוויינט אין ברעג קאַסעס, אָבער פונדעסטוועגן עס איז טשיקאַווע צו וויסן.

//  
// This example is almost
// 1:1 from Dan Abramov's
// example.
//
// Use 'flushSync' from the
// 'react-dom'-package.
import { flushSync } from 'react-dom'; 

function handleClick() {
  flushSync(() => {
    setId(prevId => prevId + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setDate(new Date());
  });
  // React has updated the DOM by now
}