🕟 🐳 👨‍👨‍👧‍👦 رد فعل 17: لا جديد؟ 🥓 🎭 🍃

تنصل

هذه ترجمة مجانية للمقال الأصلي من المدونة الرسمية. لماذا مجاني؟ بدلاً من ذلك ، لأن الأصل يحتوي على الكثير من الماء وإشارات إلى أسباب بعض القرارات التي اتخذت في الماضي.

لا جديد؟

يعد الإصدار السابع عشر من React غير معتاد بسبب نقص الميزات و / أو الوظائف الجديدة. يركز هذا الإصدار على إضافة القدرة على تحديث المشاريع تدريجيًا للإصدارات الرئيسية التالية من المكتبة في المستقبل ، وهو أمر مناسب للمشاريع ذات قاعدة الرموز الكبيرة.

Concurrent Mode 17 , , . () .

7 React " ". , . , - , , Context API, .

React 17 . React 17. .

: . . , (React 18, React 19), - lazy- React 17.

, (lazy-load) React. React 17.0.0-rc.0, , , React 16.8

React 17

, onClick, DOM-. document. , .

, , React , jQuery, . event.stopPropagation(): (propagation) , . React. Atom .

, document:

const rootNode = document.getElementById('root'); // <--  
ReactDOM.render(<App />, rootNode);

(SyntheticEvent Even Pooling)

17^- , .

function handleChange(event) {
  //    16 React    event.persist()
  setData(data => ({
    ...data,
    // This crashes in React 16 and earlier:
    text: event.target.value
  }));
}

, event.persist()

. Facebook . , - !

. React .

onScroll , ;
onFocus onBlur " " focusin focusout;
onClickCapture Capture- .

useEffect()

useEffect(() => {
  // This is the effect itself.
  return () => {
    // This is its cleanup.
  };
});

, , componentWillUnmount(), , , , , .

, - useLayoutEffect(), .

undefined

, .

undefined , React.forwardRef React.memo.

let Button = forwardRef(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

let Button = memo(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

, stack trace . , , .

, Button , React- .

17^- React , React-, , production-.

— , . , React Native for Web , .

17^- React . - , , .

ReactTestUtils.SimulateNative . , .

Changelog

, , .

يتضمن الإصدار الجديد من React أيضًا 5 تغييرات في React ، و 37 تغييرًا في React Dom ، واثنين من التغييرات في React DOM Server ، وتغيير واحد في React Test Rerender.

ماذا عن الوضع المتزامن؟

هذا الوضع لا يزال تجريبيًا. في رد الفعل ^{السابع عشر ،} تم إصلاح العديد من الأخطاء ، وإزالة بعض unstable_الطرق ، وإضافة طرق جديدة. في حين أنه من السابق لأوانه استخدامه للإنتاج ، فمن المؤكد أنه من الممكن والضروري لكزها. على سبيل المثال ، توجد مكتبة للعمل مع Firebase ، وإعادة إطلاق النار ، والتي جعل مطوروها الإصدار الرئيسي يعتمد على الوضع المتزامن. لسوء الحظ ، يبدو أن المستودع قد تم التخلي عنه خلال الأشهر القليلة الماضية. أتمنى أن يتم إصلاح هذا.

رد فعل 17: لا جديد؟