🕋 ➰ 📦 Reaktion 17: Nichts Neues? 😃 🤭 🕡

Disclamer

Dies ist eine kostenlose Übersetzung des Originalartikels aus dem offiziellen Blog. Warum kostenlos? Eher, weil das Original zu viel Wasser enthält und auf die Gründe für bestimmte Entscheidungen in der Vergangenheit verweist.

Nichts Neues?

Die siebzehnte Version von React ist ungewöhnlich, da neue Features und / oder Funktionen fehlen. Diese Version konzentriert sich auf die Möglichkeit, Projekte für die nächsten Hauptversionen der Bibliothek in Zukunft schrittweise zu aktualisieren , was für Projekte mit einer großen Codebasis relevant ist.

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

, , .

Die neue Version von React enthält außerdem 5 Änderungen in React, 37 Änderungen in React Dom, einige Änderungen in React DOM Server und eine Änderung in React Test Rerender.

Was ist mit dem gleichzeitigen Modus?

Dieser Modus ist noch experimentell. Im 17. - ^ten viele Bugs behoben React, entfernt einige unstable_Methoden und neue hinzugefügt. Es ist zwar zu früh, um es für die Produktion zu verwenden, aber es ist definitiv möglich und notwendig, es zu stupsen. Zum Beispiel gibt es eine Bibliothek für die Arbeit mit Firebase, reactfire , deren Entwickler die Hauptversion vom Concurrent Mode abhängig gemacht haben. Leider scheint das Repository in den letzten Monaten verlassen worden zu sein. Hoffe das wird behoben.

Reaktion 17: Nichts Neues?