反応する。JS 17 :新機能と新しいJSX変換

反応するとき.JS 17は10月20日に利用可能になりました、それは新しい開発者が機能に直面していないため、いくつかの混乱を引き起こした.
代わりに、反応コアチームは、将来的に自己アップグレードに反応ライブラリを作ることに焦点を当てた.これは、あなたのアプリケーションが反応17を実行している場合、あなたが18に反応するいくつかの機能をアップグレードする必要がある場合、あなたは18と18に反応するアプリケーションコアを移動することができますことを意味しますlazily load どんな問題もないレガシーコード.
もちろん、あなたはまだ反応チームによって推奨バージョンです一度にあなたの全体のアプリの新しいバージョンをアップグレードすることができます.

インストール

NPMとの反応17をインストールするには、次のコマンドを実行します.

npm install [email protected] [email protected]

反応17を糸でインストールするには

yarn add [email protected] [email protected]

内部改善

新しいJSX変換

つは、最大の内部の改善17反応している新しいJSXの変換です.反応17の前に、JSXコードを書くとき、それはAに変えられましたReact.createElement コール.
それで、こんな感じです.

import React from 'react'

const App = () => {
  return <h1>Hello World</h1>
}

に変換された:

import React from 'react'

const App = () => {
  return React.createElement('h1', null, 'Hello World')
}

反応17を起動すると、必要はありませんimport React from 'react' もう.代わりに、2つの新しいエントリポイントは、BabelやTypesScriptのようなコンパイラだけで使用されることを意図した反応パッケージに追加されました.上記のJSXコードでは、出力は少し異なります.

import { jsx a _jsx } from 'react/jsx-runtime'

const App = () => {
  return _jsx('h1', { children: 'Hello world' })
}

だから、あなたのアプリをする必要はありませんimport React from 'react' もう.代わりにJSXコードを直接書くことができます.

const App = () => {
  return React.createElement('h1', null, 'Hello World')
}

Next.js フックの下で、それが反応するので、上記を許すことは知られていました.しかし、彼らは彼らのこれを変えました9.5.3 新しい変換を使用するためにリリースします.

Eslintルールの更新

あなたが使用しているなら eslint-plugin-react パッケージは、問題を生成する反応をインポートしないことに気づくかもしれません.そのためには、それらのルールを削除しながら、これらのルールを無効にすることができます.
エスライントラック.JSON

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

未使用の反応輸入品の除去

幸運にも、反応チームはあなたの古い反応輸入を取り除くために動くことができるCodemodをつくりました.これを実行するには、プロジェクトディレクトリに新しいターミナルを開き、次のスクリプトを実行します.

npx react-codemod update-react-imports

新しいイベント代表制

段階的な更新を有効にするには、反応チームは内部イベントのデリゲートシステムを変更しました.
反応17の前に、すべてのイベントハンドラはdocument フックの下のレベルdocument.addEventListener() ほとんどのイベント.
17反応した後、すべてのイベントハンドラをルート要素に添付しますrootNode.addEventListener() 代わりに.
新しいイベント委任制度がどのように機能するかをよりよく理解するために、この図を見てください.

あなたは上の段階的な更新のデモを見ることができますexample repository 一緒に反応チームに入れてください.

その他の変更

がうまくいけば、アプリケーションに影響を与えない他のマイナーな破壊の変更があります.それらはほとんど内部的な変化ですonScroll もはや泡はなくなった.onFocus and onBlur イベントの切り替えfocusin and focusout フックの下で、古いイベントプーリング最適化を取り除き、効果的なクリーンアップタイミングをより一貫したものにします.
これらの他の破壊的な変化に深く行くために、あなたはReact v17 RC Breaking Changes .
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、またはコンサルティング、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、訪問thisdotlabs.com .
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶthisdot.co .