mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Paul O’Shannessy
591 lines
30 KiB
HTML
591 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Specifica dei Componenti e Ciclo di Vita | React</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="Specifica dei Componenti e Ciclo di Vita | React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/component-specs-it-IT.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="/react/js/html5shiv.min.js"></script>
|
|
<script src="/react/js/es5-shim.min.js"></script>
|
|
<script src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
|
<script src="/react/js/codemirror.js"></script>
|
|
<script src="/react/js/javascript.js"></script>
|
|
<script src="/react/js/react.js"></script>
|
|
<script src="/react/js/react-dom.js"></script>
|
|
<script src="/react/js/babel-browser.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/index.html">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
|
<li><a href="/react/support.html">Support</a></li>
|
|
<li><a href="/react/downloads.html">Download</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li>
|
|
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/getting-started.html">Getting Started</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tutorial.html">Tutorial</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Community Resources</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/conferences.html">Conferences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/videos.html">Videos</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" class="external">Examples</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/why-react.html">Why React?</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/more-about-refs.html">Refs to Components</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">Add-Ons</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/clone-with-props.html">Cloning Elements</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/update.html">Immutability Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/perf.html">Performance Tools</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-api.html">Component API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">Event System</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/webcomponents.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Flux</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="https://facebook.github.io/flux/docs/overview.html" class="external">Flux Overview</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://facebook.github.io/flux/docs/todo-list.html" class="external">Flux TodoMVC Tutorial</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Tips Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Tips</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/tips/introduction.html">Introduction</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<h1>
|
|
Specifica dei Componenti e Ciclo di Vita
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/ref-03-component-specs.it-IT.md" target="_blank">Edit on GitHub</a>
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<h2><a class="anchor" name="specifica-dei-componenti"></a>Specifica dei Componenti <a class="hash-link" href="#specifica-dei-componenti">#</a></h2>
|
|
<p>Quando crei una classe di componente invocando <code>React.createClass()</code>, devi fornire un oggetto specifica che contiene un metodo <code>render</code> che può contenere opzionalmete altri metodi del ciclo di vita descritti di seguito.</p>
|
|
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p>È anche possibile usare pure classi JavaScript come classi di componente. Queste classi possono implementare la maggior parte degli stessi metodi, sebbene vi siano delle differenze. Per maggiori informazioni su queste differenze, leggi la nostra documentazione sulle <a href="/react/docs/reusable-components.html#es6-classes">classi ES6</a>.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="render"></a>render <a class="hash-link" href="#render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactElement</span> <span class="nx">render</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Il metodo <code>render()</code> è richiesto.</p>
|
|
|
|
<p>Quando viene chiamato, dovrebbe esaminare <code>this.props</code> e <code>this.state</code> e restituire un singolo elemento figlio. Questo elemento figlio può essere sia una rappresentazione virtuale di un componente DOM nativo (come <code><div /></code> o <code>React.DOM.div()</code>) o un altro componente composito che hai definito tu stesso.</p>
|
|
|
|
<p>Puoi anche restituire <code>null</code> o <code>false</code> per indicare che desideri che non venga visualizzato nulla. Dietro le quinte, React visualizza un tag <code><noscript></code> per lavorare con il nostro attuale algoritmo di differenza. Quando si restituisce <code>null</code> o <code>false</code>, <code>ReactDOM.findDOMNode(this)</code> restituirà <code>null</code>.</p>
|
|
|
|
<p>La funzione <code>render()</code> dovrebbe essere <em>pura</em>, nel senso che non modifica lo stato del componente, restituisce lo stesso risultato ogni volta che viene invocato, e non legge o scrive il DOM o interagisce in altro modo con il browser (ad es. usando <code>setTimeout</code>). Se devi interagire con il browser, effettua le tue operazioni in <code>componentDidMount()</code> o negli altri metodi del ciclo di vita. Mantenere <code>render()</code> puro rende il rendering lato server più praticabile e rende i componenti più facili da comprendere.</p>
|
|
<h3><a class="anchor" name="getinitialstate"></a>getInitialState <a class="hash-link" href="#getinitialstate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getInitialState</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Invocato una volta prima che il componente venga montato. Il valore di ritorno sarà usato come il valore iniziale di <code>this.state</code>.</p>
|
|
<h3><a class="anchor" name="getdefaultprops"></a>getDefaultProps <a class="hash-link" href="#getdefaultprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getDefaultProps</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Invocato una volta e conservato quando la classe è creata. I valori nella mappa saranno impostati in <code>this.props</code> se tale proprietà non è specificata dal componente genitore (ad es. usando un controllo <code>in</code>).</p>
|
|
|
|
<p>Questo metodo è invocato prima che un'istanza sia creata e quindi non può dipendere da <code>this.props</code>. Inoltre, tieni presente che ogni oggetto complesso restituito da <code>getDefaultProps()</code> sarà condiviso tra le diverse istanze, non copiato.</p>
|
|
<h3><a class="anchor" name="proptypes"></a>propTypes <a class="hash-link" href="#proptypes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">propTypes</span>
|
|
</code></pre></div>
|
|
<p>L'oggetto <code>propTypes</code> ti permette di validare le proprietà passate ai tuoi componenti. Per maggiori informazioni su <code>propTypes</code>, leggi <a href="/react/docs/reusable-components-it-IT.html">Componenti Riutilizzabili</a>.</p>
|
|
<h3><a class="anchor" name="mixins"></a>mixins <a class="hash-link" href="#mixins">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">mixins</span>
|
|
</code></pre></div>
|
|
<p>L'array <code>mixins</code> ti permette di usare i mixin per condividere il comportamento tra componenti multipli. Per maggiori informazioni sui mixin, leggi <a href="/react/docs/reusable-components-it-IT.html">Componenti Riutilizzabili</a>.</p>
|
|
<h3><a class="anchor" name="statics"></a>statics <a class="hash-link" href="#statics">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">statics</span>
|
|
</code></pre></div>
|
|
<p>L'oggetto <code>statics</code> ti permette di definire metodi statici che possono essere chiamati sulla classe del componente. Ad esempio:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
|
<span class="nx">statics</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">customMethod</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">foo</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">foo</span> <span class="o">===</span> <span class="s1">'bar'</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="nx">MyComponent</span><span class="p">.</span><span class="nx">customMethod</span><span class="p">(</span><span class="s1">'bar'</span><span class="p">);</span> <span class="c1">// true</span>
|
|
</code></pre></div>
|
|
<p>I metodi definiti in questo blocco sono <em>statici</em>, ovvero puoi eseguirli prima che un'istanza del componente venga creata, e i metodi non hanno accesso alle proprietà e lo stato dei tuoi componenti. Se desideri confrontare i valori delle proprietà in un metodo statico, devi farle passare dal chiamante al metodo statico tramite un argomento.</p>
|
|
<h3><a class="anchor" name="displayname"></a>displayName <a class="hash-link" href="#displayname">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">displayName</span>
|
|
</code></pre></div>
|
|
<p>La stringa <code>displayName</code> viene usata nei messaggi di debug. JSX imposta questo valore automaticamente; vedi <a href="/react/docs/jsx-in-depth-it-IT.html#the-transform">JSX in Profondità</a>.</p>
|
|
<h2><a class="anchor" name="metodi-del-ciclo-di-vita"></a>Metodi del Ciclo di Vita <a class="hash-link" href="#metodi-del-ciclo-di-vita">#</a></h2>
|
|
<p>Vari metodi vengono eseguiti durante precisi momenti del ciclo di vita di un componente.</p>
|
|
<h3><a class="anchor" name="montaggio-componentwillmount"></a>Montaggio: componentWillMount <a class="hash-link" href="#montaggio-componentwillmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentWillMount</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Invocato una volta, sia sul client che sul server, immediatamente prima che il rendering iniziale abbia luogo. Se chiami <code>setState</code> all'interno di questo metodo, <code>render()</code> vedrà lo stato aggiornato e sarà eseguito solo una volta nonostante il cambiamento di stato.</p>
|
|
<h3><a class="anchor" name="montaggio-componentdidmount"></a>Montaggio: componentDidMount <a class="hash-link" href="#montaggio-componentdidmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentDidMount</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Invocato una volta, solo sul client (e non sul server), immediatamente dopo che il rendering iniziale ha avuto luogo. A questo punto del ciclo di vita, il componente ha una rappresentazione DOM che puoi accedere attraverso <code>ReactDOM.findDOMNode(this)</code>. Il metodo <code>componentDidMount()</code> dei componenti figli è invocato prima di quello dei componenti genitori.</p>
|
|
|
|
<p>Se desideri integrare con altri framework JavaScript, impostare dei timer usando <code>setTimeout</code> o <code>setInterval</code>, oppure inviare richieste AJAX, effettua tali operazioni in questo metodo.</p>
|
|
<h3><a class="anchor" name="aggiornamento-componentwillreceiveprops"></a>Aggiornamento: componentWillReceiveProps <a class="hash-link" href="#aggiornamento-componentwillreceiveprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentWillReceiveProps</span><span class="p">(</span>
|
|
<span class="nx">object</span> <span class="nx">nextProps</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Invocato quando un componente sta ricevendo nuove proprietà. Questo metodo non viene chiamato durante il rendering iniziale.</p>
|
|
|
|
<p>Usa questo metodo come opportunità per reagire a una transizione di proprietà prima che <code>render()</code> venga chiamato, aggiornando lo stato usando <code>this.setState()</code>. I vecchi valori delle proprietà possono essere letti tramite <code>this.props</code>. Chiamare <code>this.setState()</code> all'interno di questa funzione non scatenerà un rendering addizionale.</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillReceiveProps</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
|
|
<span class="nx">likesIncreasing</span><span class="o">:</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">likeCount</span> <span class="o">></span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">likeCount</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p>Non esiste un metodo analogo <code>componentWillReceiveState</code>. Una imminente transizione delle proprietà potrebbe causare un cambiamento di stato, ma il contrario non è vero. Se devi effettuare delle operazioni in risposta a un cambiamento di stato, usa <code>componentWillUpdate</code>.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="aggiornamento-shouldcomponentupdate"></a>Aggiornamento: shouldComponentUpdate <a class="hash-link" href="#aggiornamento-shouldcomponentupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">shouldComponentUpdate</span><span class="p">(</span>
|
|
<span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Invocato prima del rendering quando vengono ricevuti nuove proprietà o un nuovo stato. Questo metodo non viene chiamato per il rendering iniziale o quando viene usato <code>forceUpdate</code>.</p>
|
|
|
|
<p>Usa questo metodo come opportunità per restituire <code>false</code> quando si è certi che la transizione alle nuove proprietà e al nuovo stato non richieda un aggiornamento del componente.</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">id</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Se <code>shouldComponentUpdate</code> restituisce false, allora <code>render()</code> sarà saltato completamente fino al prossimo cambiamento di stato. Inoltre, <code>componentWillUpdate</code> e <code>componentDidUpdate</code> non verranno chiamati.</p>
|
|
|
|
<p>In modo predefinito, <code>shouldComponentUpdate</code> restituisce sempre <code>true</code> per evitare bachi subdoli quando <code>state</code> viene modificato direttamente, ma se hai l'accortezza di trattare sempre <code>state</code> come immutabile e accedere a <code>props</code> e <code>state</code> in sola lettura in <code>render()</code>, allora puoi tranquillamente ridefinire <code>shouldComponentUpdate</code> con un'implementazione che confronta i vecchi valori di props e state con quelli nuovi.</p>
|
|
|
|
<p>Se le prestazioni diventano un collo di bottiglia, specialmente in presenza di decine o centinaia di componenti, usa <code>shouldComponentUpdate</code> per accelerare la tua applicazione.</p>
|
|
<h3><a class="anchor" name="aggiornamento-componentwillupdate"></a>Aggiornamento: componentWillUpdate <a class="hash-link" href="#aggiornamento-componentwillupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentWillUpdate</span><span class="p">(</span>
|
|
<span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Invocato immediatamente prima del rendering quando nuove proprietà o un nuovo stato vengono ricevuti. Questo metodo non viene chiamato per il rendering iniziale.</p>
|
|
|
|
<p>Usa questo metodo come opportunità per effettuare la preparazione prima che si verifichi un aggiornamento.</p>
|
|
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p><em>Non puoi</em> usare <code>this.setState()</code> in questo metodo. Se devi aggiornare lo stato in risposta al cambiamento di una proprietà, usa <code>componentWillReceiveProps</code>.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="aggiornamento-componentdidupdate"></a>Aggiornamento: componentDidUpdate <a class="hash-link" href="#aggiornamento-componentdidupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentDidUpdate</span><span class="p">(</span>
|
|
<span class="nx">object</span> <span class="nx">prevProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevState</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Invocato immediatamente dopo che gli aggiornamenti del componente sono stati trasmessi al DOM. Questo metodo non viene chiamato per il rendering iniziale.</p>
|
|
|
|
<p>Usa questo metodo come opportunità per operare sul DOM quando il componente è stato the component has been updated.</p>
|
|
<h3><a class="anchor" name="smontaggio-componentwillunmount"></a>Smontaggio: componentWillUnmount <a class="hash-link" href="#smontaggio-componentwillunmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentWillUnmount</span><span class="p">()</span>
|
|
</code></pre></div>
|
|
<p>Invocato immediatamente prima che un componente venga smontato dal DOM.</p>
|
|
|
|
<p>Effettua la necessaria pulizia in questo metodo, come invalidare i timer o ripulire ciascun elemento DOM creato all'interno di <code>componentDidMount</code>.</p>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/component-api-it-IT.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/tags-and-attributes-it-IT.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">
|
|
A Facebook & Instagram collaboration.<br>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
<div class="right">
|
|
© 2013–2016 Facebook Inc.<br>
|
|
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div id="fb-root"></div>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|