Skip to content

Commit d69837e

Browse files
deblasisdeblasis
authored
Merge pull request #250 from reactjs/sync-66820686
Sync with reactjs.org @ 6682068
2 parents 0d3f1fc + 86d8f34 commit d69837e

15 files changed

+332
-73
lines changed

Diff for: ‎content/blog/2020-10-20-react-v17.md

+169
Large diffs are not rendered by default.

Diff for: ‎content/docs/add-react-to-a-website.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ Successivamente, aggiungi questi tre tag `<script>` alla pagina HTML, subito pri
5454
5555
<!-- Carica React. -->
5656
<!-- Nota: quando rilasci il codice in produzione, sostituisci "development.js" con "production.min.js". -->
57-
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
58-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
57+
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
58+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
5959
6060
<!-- Carica il nostro componente React. -->
6161
<script src="bottone_like.js"></script>
@@ -115,8 +115,8 @@ Prima di rilasciare il tuo sito in produzione, ricordati che il codice JavaScrip
115115
Se minimizzi già gli script dell'applicazione, **il tuo sito sarà pronto per la produzione** se ti assicuri che l'HTML rilasciato carichi le versioni degli script di React che finiscono con `production.min.js`:
116116

117117
```js
118-
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
119-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
118+
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
119+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
120120
```
121121

122122
Se invece non hai già un passaggio di minimizzazione dei tuoi script, [ecco un modo per introdurlo](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).

Diff for: ‎content/docs/cdn-links.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ next: release-channels.html
99
Sia React che ReactDOM sono disponibili su una CDN.
1010

1111
```html
12-
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
13-
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
12+
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
13+
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
1414
```
1515

1616
Le versioni di cui sopra sono intese solo per ambienti di sviluppo, e non sono adatte per ambienti di produzione. Le versioni minificate e ottimizzate di produzione di React sono disponibili ai seguenti link:
1717

1818
```html
19-
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
20-
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
19+
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
20+
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
2121
```
2222

23-
Per caricare una versione specifica di `react` e `react-dom`, sostituisci `16` con il numero di versione desiderato.
23+
Per caricare una versione specifica di `react` e `react-dom`, sostituisci `17` con il numero di versione desiderato.
2424

2525
### Perché l'attributo `crossorigin`? {#why-the-crossorigin-attribute}
2626

Diff for: ‎content/docs/faq-functions.md

-3
Original file line numberDiff line numberDiff line change
@@ -289,9 +289,6 @@ class Searchbox extends React.Component {
289289
}
290290

291291
handleChange(e) {
292-
// React pools events, so we read the value before debounce.
293-
// Alternately we could call `event.persist()` and pass the entire event.
294-
// For more info see reactjs.org/docs/events.html#event-pooling
295292
this.emitChangeDebounced(e.target.value);
296293
}
297294

Diff for: ‎content/docs/legacy-event-pooling.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
id: legacy-event-pooling
3+
title: Event Pooling
4+
permalink: docs/legacy-event-pooling.html
5+
---
6+
7+
>Note
8+
>
9+
>This page is only relevant for React 16 and earlier, and for React Native.
10+
>
11+
>React 17 on the web **does not** use event pooling.
12+
>
13+
>[Read more](/blog/2020/08/10/react-v17-rc.html#no-event-pooling) about this change in React 17.
14+
15+
The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event event handler has been called. For example, this won't work:
16+
17+
```javascript
18+
function handleChange(e) {
19+
// This won't work because the event object gets reused.
20+
setTimeout(() => {
21+
console.log(e.target.value); // Too late!
22+
}, 100);
23+
}
24+
```
25+
26+
If you need to access event object's properties after the event handler has run, you need to call `e.persist()`:
27+
28+
```javascript
29+
function handleChange(e) {
30+
// Prevents React from resetting its properties:
31+
e.persist();
32+
33+
setTimeout(() => {
34+
console.log(e.target.value); // Works
35+
}, 100);
36+
}
37+
```

Diff for: ‎content/docs/optimizing-performance.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ Remember that this is only necessary before deploying to production. For normal
4343
We offer production-ready versions of React and React DOM as single files:
4444

4545
```html
46-
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
47-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
46+
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
47+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
4848
```
4949

5050
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:
7575

7676
```
7777
# If you use npm
78-
npm install --save-dev envify terser uglifyify
78+
npm install --save-dev envify terser uglifyify
7979
8080
# If you use Yarn
81-
yarn add --dev envify terser uglifyify
81+
yarn add --dev envify terser uglifyify
8282
```
8383

8484
To create a production build, make sure that you add these transforms **(the order matters)**:
@@ -379,7 +379,7 @@ function updateColorMap(colormap) {
379379
}
380380
```
381381

382-
This feature was added to JavaScript in ES2018.
382+
This feature was added to JavaScript in ES2018.
383383

384384
If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
385385

Diff for: ‎content/docs/reference-events.md

+81-28
Original file line numberDiff line numberDiff line change
@@ -34,36 +34,11 @@ string type
3434

3535
> Nota:
3636
>
37-
> A partire da v0.14, ritornare `false` da un event handler non fermerà la propagazione dell'evento come avveniva in precedenza. Invece, `e.stopPropagation()` o `e.preventDefault()` dovrebbero essere invocati manualmente, ove opportuno.
38-
39-
### Pooling degli Eventi {#event-pooling}
40-
41-
`SyntheticEvent` è _pooled_, ovvero "accomunato". Questo significa che un oggetto `SyntheticEvent` sarà riutilizzato e che tutte proprietà verranno resettate a `null` non appena la callback dell'evento è stata invocata.
42-
Ciò avviene per migliorare le prestazioni.
43-
Per questo, non puoi avere accesso all'evento in modo asincrono.
44-
45-
```javascript
46-
function onClick(event) {
47-
console.log(event); // => oggetto nullifficato.
48-
console.log(event.type); // => "click"
49-
const eventType = event.type; // => "click"
50-
51-
setTimeout(function() {
52-
console.log(event.type); // => null
53-
console.log(eventType); // => "click"
54-
}, 0);
55-
56-
// Non funzionerebbe. this.state.clickEvent conterrà solo valori nulli
57-
this.setState({clickEvent: event});
58-
59-
// YPuoi comunque esportare le proprietà dell'evento.
60-
this.setState({eventType: event.type});
61-
}
62-
```
37+
> A partire da v17, `e.persist()` non fa più nulla in quanto `SyntheticEvent` non è più [pooled](/docs/legacy-event-pooling.html).
6338
6439
> Nota:
6540
>
66-
> Se vuoi avere accesso alle proprietà in modo asincrono, dovresti invocare `event.persist()` sull'evento, il quale rimuoverà l'evento sintetico dal pool permettendo ai riferimenti all'evento di rimanere mantenuti dal codice utente.
41+
> A partire da v0.14, ritornare `false` da un event handler non fermerà più la propagazione dell'evento. In modo più appropriato, è invece necessario invocare `e.stopPropagation()` o `e.preventDefault()`.
6742
6843
## Eventi Supportati {#supported-events}
6944

@@ -167,10 +142,84 @@ Questi eventi di focus funzionano con tutti elementi nel React DOM, non solo ele
167142

168143
Proprietà:
169144

170-
```javascript
145+
```js
171146
DOMEventTarget relatedTarget
172147
```
173148

149+
#### onFocus
150+
151+
The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input.
152+
153+
```javascript
154+
function Example() {
155+
return (
156+
<input
157+
onFocus={(e) => {
158+
console.log('Focused on input');
159+
}}
160+
placeholder="onFocus is triggered when you click this input."
161+
/>
162+
)
163+
}
164+
```
165+
166+
#### onBlur
167+
168+
The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input.
169+
170+
```javascript
171+
function Example() {
172+
return (
173+
<input
174+
onBlur={(e) => {
175+
console.log('Triggered because this input lost focus');
176+
}}
177+
placeholder="onBlur is triggered when you click this input and then you click outside of it."
178+
/>
179+
)
180+
}
181+
```
182+
183+
#### Detecting Focus Entering and Leaving
184+
185+
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.
186+
187+
```javascript
188+
function Example() {
189+
return (
190+
<div
191+
tabIndex={1}
192+
onFocus={(e) => {
193+
if (e.currentTarget === e.target) {
194+
console.log('focused self');
195+
} else {
196+
console.log('focused child', e.target);
197+
}
198+
if (!e.currentTarget.contains(e.relatedTarget)) {
199+
// Not triggered when swapping focus between children
200+
console.log('focus entered self');
201+
}
202+
}}
203+
onBlur={(e) => {
204+
if (e.currentTarget === e.target) {
205+
console.log('unfocused self');
206+
} else {
207+
console.log('unfocused child', e.target);
208+
}
209+
if (!e.currentTarget.contains(e.relatedTarget)) {
210+
// Not triggered when swapping focus between children
211+
console.log('focus left self');
212+
}
213+
}}
214+
>
215+
<input id="1" />
216+
<input id="2" />
217+
</div>
218+
);
219+
}
220+
```
221+
222+
174223
* * *
175224

176225
### Eventi di Form {#form-events}
@@ -305,6 +354,10 @@ Nomi degli eventi:
305354
onScroll
306355
```
307356

357+
>Nota
358+
>
359+
>A partire da React 17, l'evento `onScroll` **non fa bubble** in React. Si comporta quindi come il browser e previene la confusione che si ha quando un elemendo scrollabile nidificato lancia eventi su genitori distanti nel DOM.
360+
308361
Proprietà:
309362

310363
```javascript

Diff for: ‎content/docs/testing-recipes.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,6 @@ let container = null;
377377
beforeEach(() => {
378378
// setup a DOM element as a render target
379379
container = document.createElement("div");
380-
// container *must* be attached to document so events work correctly.
381380
document.body.appendChild(container);
382381
});
383382
@@ -416,7 +415,7 @@ it("changes value when clicked", () => {
416415
});
417416
```
418417

419-
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.
418+
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.
420419

421420
> Note:
422421
>

Diff for: ‎content/versions.yml

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
- title: '17.0.1'
2+
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020
3+
- title: '17.0.0'
4+
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1700-october-20-2020
15
- title: '16.14.0'
26
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16140-october-14-2020
37
- title: '16.13.1'

Diff for: ‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"normalize.css": "^8.0.0",
4949
"prettier": "^1.7.4",
5050
"prismjs": "^1.15.0",
51-
"react": "^17.0.0-rc.3",
52-
"react-dom": "^17.0.0-rc.3",
51+
"react": "^17.0.1",
52+
"react-dom": "^17.0.1",
5353
"react-helmet": "^5.2.0",
5454
"react-live": "1.8.0-0",
5555
"remarkable": "^1.7.1",

Diff for: ‎src/site-constants.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// NOTE: We can't just use `location.toString()` because when we are rendering
99
// the SSR part in node.js we won't have a proper location.
1010
const urlRoot = 'https://it.reactjs.org';
11-
const version = '16.14.0';
11+
const version = '17.0.1';
1212
const babelURL = 'https://unpkg.com/[email protected]/babel.min.js';
1313

1414
export {babelURL, urlRoot, version};

Diff for: ‎static/_redirects

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/link/dangerously-set-inner-html /docs/dom-elements.html#dangerouslysetinnerhtml
1313
/link/derived-state /blog/2018/06/07/you-probably-dont-need-derived-state.html
1414
/link/error-boundaries /docs/error-boundaries.html
15-
/link/event-pooling /docs/events.html#event-pooling
15+
/link/event-pooling /docs/legacy-event-pooling.html
1616
/link/hooks-data-fetching /docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks
1717
/link/invalid-aria-props /warnings/invalid-aria-prop.html
1818
/link/invalid-hook-call /warnings/invalid-hook-call-warning.html

Diff for: ‎static/html/single-file-example.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Ciao Mondo</title>
6-
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
7-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8-
9-
<!-- /!\ Non importare Babel nel browser in produzione: -->
6+
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
8+
9+
<!-- Don't use this in production: -->
1010
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
1111
</head>
1212
<body>

Diff for: ‎vercel.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
{ "source": "/link/dangerously-set-inner-html", "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml", "permanent": false },
1616
{ "source": "/link/derived-state", "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html", "permanent": false },
1717
{ "source": "/link/error-boundaries", "destination": "/docs/error-boundaries.html", "permanent": false },
18-
{ "source": "/link/event-pooling", "destination": "/docs/events.html#event-pooling", "permanent": false },
18+
{ "source": "/link/event-pooling", "destination": "/docs/legacy-event-pooling.html", "permanent": false },
1919
{ "source": "/link/hooks-data-fetching", "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks", "permanent": false },
2020
{ "source": "/link/invalid-aria-props", "destination": "/warnings/invalid-aria-prop.html", "permanent": false },
2121
{ "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning.html", "permanent": false },

0 commit comments

Comments
 (0)