diff --git a/content/blog/2020-10-20-react-v17.md b/content/blog/2020-10-20-react-v17.md
new file mode 100644
index 000000000..d001a56ee
--- /dev/null
+++ b/content/blog/2020-10-20-react-v17.md
@@ -0,0 +1,169 @@
+---
+title: "React v17.0"
+author: [gaearon,rachelnabors]
+---
+
+Today, we are releasing React 17! We've written at length about the role of the React 17 release and the changes it contains in [the React 17 RC blog post](/blog/2020/08/10/react-v17-rc.html). This post is a brief summary of it, so if you've already read the RC post, you can skip this one.
+
+## No New Features
+
+The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on **making it easier to upgrade React itself**.
+
+In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.
+
+It also makes it easier to embed React into apps built with other technologies.
+
+## Gradual Upgrades
+
+**React 17 enables gradual React upgrades.** When you upgrade from React 15 to 16 (or, this time, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn’t actively maintained. And while it’s possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events.
+
+We’re fixing many of those problems with React 17. This means that **when React 18 and the next future versions come out, you will now have more options**. The first option will be to upgrade your whole app at once, like you might have done before. But you will also have an option to upgrade your app piece by piece. For example, you might decide to migrate most of your app to React 18, but keep some lazy-loaded dialog or a subroute on React 17.
+
+This doesn't mean you *have to* do gradual upgrades. **For most apps, upgrading all at once is still the best solution.** Loading two versions of React -- even if one of them is loaded lazily on demand -- is still not ideal. However, for larger apps that aren't actively maintained, this option makes sense to consider, and React 17 lets those apps not get left behind.
+
+We've prepared an [example repository](https://github.com/reactjs/react-gradual-upgrade-demo/) demonstrating how to lazy-load an older version of React if necessary. This demo uses Create React App, but it should be possible to follow a similar approach with any other tool. We welcome demos using other tooling as pull requests.
+
+>Note
+>
+>We've **postponed other changes** until after React 17. The goal of this release is to enable gradual upgrades. If upgrading to React 17 were too difficult, it would defeat its purpose.
+
+## Changes to Event Delegation
+
+To enable gradual updates, we've needed to make some changes to the React event system. React 17 is a major release because these changes are potentially breaking. You can check out our [versioning FAQ](/docs/faq-versioning.html#breaking-changes) to learn more about our commitment to stability.
+
+In React 17, React will no longer attach event handlers at the `document` level under the hood. Instead, it will attach them to the root DOM container into which your React tree is rendered:
+
+```js
+const rootNode = document.getElementById('root');
+ReactDOM.render(
``` @@ -116,8 +115,8 @@ Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt, hogy a nem Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra**, amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be: ```js - - + + ``` Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja, hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). @@ -185,7 +184,7 @@ Gratulálunk! Ezzel **beállítottad a JSX publikálásra kész** használatát Készíts egy `src` nevű mappát és futtasd az alábbi parancsot a terminálodban: ``` -npx babel --watch src --out-dir . --presets react-app/prod +npx babel --watch src --out-dir . --presets react-app/prod ``` >Megjegyzés diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index c56bab2f4..09934ff76 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -9,18 +9,18 @@ next: release-channels.html A React és a ReactDOM egyaránt elérhető CDN-en keresztül. ```html - - + + ``` A fenti verziók csak a fejlesztésre értendőek, és nem megfelelőek éles környezetben való használathoz. A React kicsinyített és optimalizált változatai a következő helyen érhetőek el: ```html - - + + ``` -A `react` és a `react-dom` adott verziójának betöltéséhez cseréld ki a `16`-ot a verziószámra. +A `react` és a `react-dom` egy adott verziójának betöltéséhez cseréld ki a `17`-et a kívánt verziószámra. ### Miért szükséges a `crossorigin` attribútum? {#why-the-crossorigin-attribute} diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index 18fdfe117..d3aa6f7f8 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -289,9 +289,6 @@ class Searchbox extends React.Component { } handleChange(e) { - // React pools events, so we read the value before debounce. - // Alternately we could call `event.persist()` and pass the entire event. - // For more info see reactjs.org/docs/events.html#event-pooling this.emitChangeDebounced(e.target.value); } diff --git a/content/docs/legacy-event-pooling.md b/content/docs/legacy-event-pooling.md new file mode 100644 index 000000000..7514469b1 --- /dev/null +++ b/content/docs/legacy-event-pooling.md @@ -0,0 +1,37 @@ +--- +id: legacy-event-pooling +title: Esemény pooling +permalink: docs/legacy-event-pooling.html +--- + +>Megjegyzés +> +>Ez az oldal csak a React 16 és korábbi veziókra, valamint React Native-re vonatkozik. +> +>A React 17 a weben **nem használ** esemény pooling-ot. +> +>Erről a React 17 változásról [többet itt olvashatsz](/blog/2020/08/10/react-v17-rc.html#no-event-pooling). + +A [`SyntheticEvent`](/docs/events.html) objektumok egy közös készletben vannak. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. Ez például nem fog működni: + +```javascript +function handleChange(e) { + // Ez nem fog műküdni, mert az esemény objektumok újra fel lesznek használva. + setTimeout(() => { + console.log(e.target.value); // Túl késő! + }, 100); +} +``` + +Ha szeretnél egy esemény tulajdonságaihoz azután hozzáférni hogy az eseménykezelő lefutott, meg kell hogy hívd az `e.persist()` metódust: + +```javascript +function handleChange(e) { + // Megakadályozza a Reactet a tulajdonságok visszaállításában: + e.persist(); + + setTimeout(() => { + console.log(e.target.value); // Ez működik + }, 100); +} +``` diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 72041f332..a3270959c 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -43,8 +43,8 @@ Remember that this is only necessary before deploying to production. For normal We offer production-ready versions of React and React DOM as single files: ```html - - + + ``` Remember that only React files ending with `.production.min.js` are suitable for production. @@ -75,10 +75,10 @@ For the most efficient Browserify production build, install a few plugins: ``` # If you use npm -npm install --save-dev envify terser uglifyify +npm install --save-dev envify terser uglifyify # If you use Yarn -yarn add --dev envify terser uglifyify +yarn add --dev envify terser uglifyify ``` To create a production build, make sure that you add these transforms **(the order matters)**: @@ -379,7 +379,7 @@ function updateColorMap(colormap) { } ``` -This feature was added to JavaScript in ES2018. +This feature was added to JavaScript in ES2018. If you're using Create React App, both `Object.assign` and the object spread syntax are available by default. diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 479644645..e3f6bc7f6 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -34,36 +34,11 @@ string type > Megjegyzés: > -> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben. - -### Események összegyűjtése {#event-pooling} - -A `SyntheticEvent` egy közös készletben van. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. -Ez a teljesítmény növelése érdekében történik. -Így az eseményhez nem férhetsz aszinkron módon. - -```javascript -function onClick(event) { - console.log(event); // => kinullázott objektum. - console.log(event.type); // => "click" - const eventType = event.type; // => "click" - - setTimeout(function() { - console.log(event.type); // => null - console.log(eventType); // => "click" - }, 0); - - // Nem fog működni. A this.state.clickEvent csak null értékeket fog tartalmazni. - this.setState({clickEvent: event}); - - // Az esemény értékeket még így is ki tudod exportálni. - this.setState({eventType: event.type}); -} -``` +> A React 17-től kezdve az `e.persist()` nem csinál semmit, mivel a `SyntheticEvent` többé nincs ["összegyűtjve"](/docs/legacy-event-pooling.html). > Megjegyzés: > -> Ha szeretnél az események tulajdonságaihoz aszinkron módon hozzáférni, meg kell hogy hívd az `event.persist()` metódust az eseményen, ami eltávolítja a szintetikus eseményt a medencéből és lehetővé teszi az eseményre mutató hivatkozások megtartását felhasználói kóddal. +> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben. ## Támogatott események {#supported-events} @@ -72,13 +47,15 @@ A React normalizálja az eseményeket annak érdekében, hogy a tulajdonságaik Az alábbi eseménykezelők egy esemény által lettek elindítva a "bubbling" fázisban. Egy eseménykezelő regisztrálásához a "capture" fázisban add hozzá a `Capture` szót az esemény nevéhez; például az `onClick` helyett használd az `onClickCapture`-t kattintási események kezeléséhez a capture fázisban. - [Áttekintés {#overview}](#áttekintés-overview) - - [Események összegyűjtése {#event-pooling}](#események-összegyűjtése-event-pooling) - [Támogatott események {#supported-events}](#támogatott-események-supported-events) - [Referencia {#reference}](#referencia-reference) - [Vágólapesemények {#clipboard-events}](#vágólapesemények-clipboard-events) - [Kompozíció-események {#composition-events}](#kompozíció-események-composition-events) - [Billentyűzet-események {#keyboard-events}](#billentyűzet-események-keyboard-events) - [Fókuszálás-események {#focus-events}](#fókuszálás-események-focus-events) + - [onFocus](#onfocus) + - [onBlur](#onblur) + - [Fókuszálás és fókuszálás elvesztésének detektálása](#fókuszálás-és-fókuszálás-elvesztésének-detektálása) - [Űrlapesemények {#form-events}](#űrlapesemények-form-events) - [Általános események {#generic-events}](#általános-események-generic-events) - [Egéresemények {#mouse-events}](#egéresemények-mouse-events) @@ -171,10 +148,85 @@ Ezek a fókuszálás-események minden elemen működnek a React DOM-ban, nem cs Tulajdonságok: -```javascript +```js DOMEventTarget relatedTarget ``` +#### onFocus + +Az `onFocus` esemény akkor van meghívva, amikor az elem (vagy valamelyik elem azon belül) fókuszálva van. Például amikor a felhasználó egy szöveg beivteli mezőre kattint. + +```javascript +function Example() { + return ( + { + console.log('Fókuszálva a beviteli mezőre'); + }} + placeholder="Az onFocus meg lesz hívva, ha erre a beviteli mezőre kattintasz." + /> + ) +} +``` + +#### onBlur + +Az `onBlur` esemény akkor van meghívva, amikor a fókuszálás elhagyta az elemet (vagy valamelyik elemet azon belül). Például akkor, amikor a felhasználó egy fókuszált szöveg beviteli mezőn kívülre kattint. + +```javascript +function Example() { + return ( + { + console.log('Meghívva, mivel a beviteli mező elvesztette a fókuszt'); + }} + placeholder="Az onBlur meg lesz hívva, ha erre a beviteli mezőre kattintasz, majd utána ezen kívülre." + /> + ) +} +``` + +#### Fókuszálás és fókuszálás elvesztésének detektálása + +You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree. +Használhatod a `currentTarget` és `releatedTarget`-et, hogy meg tudd különböztetni, hogy a fókuszálás vagy fókuszálás elvesztésének eseménye a szülő komponensen _kívülről_ jön-e. Itt egy demo amit kimásolhatsz és beilleszthetsz, ami megmutatja hogyan detektálj fókuszálást egy gyermek elemre, magára az elemre, és fókuszálást vagy fókuszálás elvesztést a teljes alfára. + +```javascript +function Example() { + return ( +
+ ); +} +``` + + * * * ### Űrlapesemények {#form-events} @@ -310,6 +362,10 @@ Eseménynevek: onScroll ``` +>Megjegyzés +> +>A React 17-től kezdve az `onScroll` esemény **nem használ "bubbling"-et**. Ez megegyezik a böngésző viselkedésével és meggátolja hogy egymásba ágyazott görgethető elemek eseményeket generáljanak egy távoli szülő elemen. + Tulajdonságok: ```javascript diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index 298b867a8..875522591 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -377,7 +377,6 @@ let container = null; beforeEach(() => { // setup a DOM element as a render target container = document.createElement("div"); - // container *must* be attached to document so events work correctly. document.body.appendChild(container); }); @@ -416,7 +415,7 @@ it("changes value when clicked", () => { }); ``` -Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the document. +Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the root. > Note: > diff --git a/content/versions.yml b/content/versions.yml index a9c6b71ee..ffbc479ed 100644 --- a/content/versions.yml +++ b/content/versions.yml @@ -1,3 +1,7 @@ +- title: '17.0.1' + changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020 +- title: '17.0.0' + changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1700-october-20-2020 - title: '16.14.0' changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16140-october-14-2020 - title: '16.13.1' diff --git a/package.json b/package.json index 77ce43d73..e0b00b993 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "normalize.css": "^8.0.0", "prettier": "^1.7.4", "prismjs": "^1.15.0", - "react": "^17.0.0-rc.3", - "react-dom": "^17.0.0-rc.3", + "react": "^17.0.1", + "react-dom": "^17.0.1", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", diff --git a/src/site-constants.js b/src/site-constants.js index da2387a6e..288d6c6c4 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -8,7 +8,7 @@ // NOTE: We can't just use `location.toString()` because when we are rendering // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://hu.reactjs.org'; -const version = '16.14.0'; +const version = '17.0.1'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; export {babelURL, urlRoot, version}; diff --git a/static/_redirects b/static/_redirects index 8757815d0..ee53fadeb 100644 --- a/static/_redirects +++ b/static/_redirects @@ -12,7 +12,7 @@ /link/dangerously-set-inner-html /docs/dom-elements.html#dangerouslysetinnerhtml /link/derived-state /blog/2018/06/07/you-probably-dont-need-derived-state.html /link/error-boundaries /docs/error-boundaries.html -/link/event-pooling /docs/events.html#event-pooling +/link/event-pooling /docs/legacy-event-pooling.html /link/hooks-data-fetching /docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks /link/invalid-aria-props /warnings/invalid-aria-prop.html /link/invalid-hook-call /warnings/invalid-hook-call-warning.html diff --git a/static/html/single-file-example.html b/static/html/single-file-example.html index 2d635fe99..3887d5a99 100644 --- a/static/html/single-file-example.html +++ b/static/html/single-file-example.html @@ -3,8 +3,8 @@
- - + + diff --git a/vercel.json b/vercel.json index d532a5bd6..6a26fb699 100644 --- a/vercel.json +++ b/vercel.json @@ -15,7 +15,7 @@ { "source": "/link/dangerously-set-inner-html", "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml", "permanent": false }, { "source": "/link/derived-state", "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html", "permanent": false }, { "source": "/link/error-boundaries", "destination": "/docs/error-boundaries.html", "permanent": false }, - { "source": "/link/event-pooling", "destination": "/docs/events.html#event-pooling", "permanent": false }, + { "source": "/link/event-pooling", "destination": "/docs/legacy-event-pooling.html", "permanent": false }, { "source": "/link/hooks-data-fetching", "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks", "permanent": false }, { "source": "/link/invalid-aria-props", "destination": "/warnings/invalid-aria-prop.html", "permanent": false }, { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning.html", "permanent": false }, diff --git a/yarn.lock b/yarn.lock index ba490c418..548ea3a0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10740,9 +10740,9 @@ object-keys@^1.0.12, object-keys@^1.1.1: integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== object-path@^0.11.2, object-path@^0.11.4: - version "0.11.4" - resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949" - integrity sha1-NwrnUvvzfePqcKhhwju6iRVpGUk= + version "0.11.5" + resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.5.tgz#d4e3cf19601a5140a55a16ad712019a9c50b577a" + integrity sha512-jgSbThcoR/s+XumvGMTMf81QVBmah+/Q7K7YduKeKVWL7N111unR2d6pZZarSk6kY/caeNxUDyxOvMWyzoU2eg== object-visit@^1.0.0: version "1.0.1" @@ -12318,14 +12318,14 @@ react-dev-utils@^4.2.3: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@^17.0.0-rc.3: - version "17.0.0-rc.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.0-rc.3.tgz#6254f82c62ed569a2a90dcf1c7b71d4d8d951744" - integrity sha512-rrmZ91kdXBaCVomiNUQ1WvEClb5GcmxewGurd3FnsXKJBOhFdlkGbT5MY5ZQkMXH5xnIvs5ZEEB2iBr2ZqKiqg== +react-dom@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" + integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - scheduler "0.20.0-rc.3" + scheduler "^0.20.1" react-error-overlay@^3.0.0: version "3.0.0" @@ -12471,10 +12471,10 @@ react@^16.8.0: object-assign "^4.1.1" prop-types "^15.6.2" -react@^17.0.0-rc.3: - version "17.0.0-rc.3" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.0-rc.3.tgz#ccb426b0146a8c10ee92c2a72d9d813a16a55806" - integrity sha512-b1vEcXBmlN2Bu+k57jq2ytEo5p28g5fdRfc02JRdnvGZKKphvlUnAfsrUHiOmUtL/6wvFIusi2zxp8t60fihfw== +react@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" + integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -13279,14 +13279,6 @@ sax@>=0.6.0, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@0.20.0-rc.3: - version "0.20.0-rc.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.0-rc.3.tgz#ce616ebdd4073f5026718960d7e2d0928788c626" - integrity sha512-rPwhSgPKhRqximLHdl+oJ/8HVcMS2vyZlH74OQHqKbH04ONgKNkJ13DZLPdFSYFos8FUj6+PduO9+OoRaG6QWQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler@^0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4" @@ -13303,6 +13295,14 @@ scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.20.1: + version "0.20.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" + integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.4.5: version "0.4.7" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"