🚂 🕴🏻 🙅🏾 Réagir 17: Rien de nouveau? 🚣 👨🏼‍🌾 🚳

Disclamer

Ceci est une traduction gratuite de l'article original du blog officiel. Pourquoi gratuit? Plutôt parce que l'original contient trop d'eau et fait référence aux raisons de certaines décisions prises dans le passé.

Rien de nouveau?

La dix-septième version de React est inhabituelle en raison du manque de nouvelles fonctionnalités et / ou fonctionnalités. Cette version est axée sur l'ajout de la possibilité de mettre à jour progressivement les projets pour les prochaines versions majeures de la bibliothèque à l'avenir , ce qui est pertinent pour les projets avec une grande base de code.

Le mode concurrent prometteur ne sera pas introduit dans la version 17, ainsi que d'autres innovations sur lesquelles l'équipe travaille activement. La prochaine version fait partie d'une stratégie de mise à jour progressive (partielle) .

Mises à jour progressives

Au cours des 7 dernières années, les mises à jour de React ont été tout ou rien. Soit nous mettons à niveau vers la nouvelle version, soit nous restons sur l'ancienne. Parfois, il était nécessaire de changer quelque chose dans la base de code, comme, par exemple, avec l'API contextuelle obsolète, qui ne peut pas être transférée automatiquement.

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

, , .

La nouvelle version de React comprend également 5 changements dans React, 37 changements dans React Dom, quelques changements dans React DOM Server, un changement dans React Test Rerender.

Qu'en est-il du mode simultané?

Ce mode est encore expérimental. Dans le 17 ^e React, de nombreux bogues ont été corrigés, certaines unstable_méthodes ont été supprimées et en ont ajouté de nouvelles. Bien qu'il soit trop tôt pour l'utiliser pour la production, il est certainement possible et nécessaire de le pousser. Par exemple, il existe une bibliothèque pour travailler avec Firebase, reactfire , dont les développeurs ont rendu la version principale dépendante du mode simultané. Malheureusement, le référentiel semble être abandonné depuis quelques mois. J'espère que cela sera corrigé.

Réagir 17: Rien de nouveau?