{"id":2041,"date":"2020-05-25T08:47:59","date_gmt":"2020-05-25T06:47:59","guid":{"rendered":"https:\/\/ways4.eu\/?p=2041"},"modified":"2020-05-25T08:49:47","modified_gmt":"2020-05-25T06:49:47","slug":"mounting-react-lifecycle-methoden","status":"publish","type":"post","link":"https:\/\/ways4.eu\/de\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/","title":{"rendered":"Mounting von React Lifecycle-Methoden"},"content":{"rendered":"<p>Es sind drei Kategorien von Lifecycle-Methoden zu unterscheiden:<\/p>\n<ul>\n<li>Mounting &#8211; Bereitstellen,<\/li>\n<li>Updating &#8211; Aktualisieren<\/li>\n<li>Unmounting &#8211; Aufheben der Bereitstellung.<\/li>\n<\/ul>\n<p>In diesem Artikel geht es um die erste Kategorie: <strong>Bereitstellen (Mounting)<\/strong> von <em>Lebenszyklusmethoden<\/em>.<\/p>\n<p>Eine Komponente wird beim ersten Rendern &#8222;gemountet&#8220;.<br \/>\nDies ist der Fall, wenn <em>Mounting Lifecycle Methods (Mounting-Lebenszyklus)<\/em> aufgerufen werden.<\/p>\n<p>Es gibt drei Methoden f\u00fcr den <em>Mounting-Lebenszyklus<\/em>:<\/p>\n<ol>\n<li><strong>componentWillMount<\/strong><\/li>\n<li><strong>render<\/strong><\/li>\n<li><strong>componentDidMount<\/strong><\/li>\n<\/ol>\n<p>Wenn eine Komponente bereitgestellt wird (mounts), werden diese drei Methoden automatisch der Reihe nach aufgerufen.<\/p>\n<h3>1. componentWillMount<\/h3>\n<p>Die erste Methode f\u00fcr den <em>Mounting-Lebenszyklus<\/em> hei\u00dft <strong>componentWillMount<\/strong>.<\/p>\n<p>Wenn eine Komponente zum <strong>ersten Mal gerendert<\/strong> wird, wird <strong>componentWillMount<\/strong> direkt vor dem Rendern aufgerufen.<\/p>\n<div>\n<pre>import React from 'react';import ReactDOM from 'react-dom';\n\nexport class Example extends React.Component {\n\ncomponentWillMount() {\n\nalert('component is about to mount!');\n\n}\n\nrender() {\n\nreturn &lt;h1&gt;Hello world&lt;\/h1&gt;;\n\n}\n\n}\n\nReactDOM.render(\n\n&lt;Example \/&gt;,\n\ndocument.getElementById('app')\n\n);\n\nsetTimeout(() =&gt; {\n\nReactDOM.render(\n\n&lt;Example \/&gt;,\n\ndocument.getElementById('app')\n\n);\n\n}, 2000);<\/pre>\n<\/div>\n<p>Schauen Sie sich das obenstehende Beispiel an.<\/p>\n<p>Erl\u00e4uterung :<br \/>\nIn den Zeilen<\/p>\n<pre>ReactDOM.render(\n\n&lt;Example \/&gt;,\n\ndocument.getElementById('app')\n\n);<\/pre>\n<p>wird &lt;Example \/&gt; zum ersten Mal gerendert. Die <em>Mounting-Periode<\/em> von &lt;Example\/&gt; beginnt.<br \/>\n&lt;Example\/&gt; ruft die erste <em>Mounting-Lifecycle-Methode<\/em>, <strong>componentWillMount<\/strong>, auf.<br \/>\n<strong>componentWillMount<\/strong> wird ausgef\u00fchrt und eine <strong>Warnung<\/strong> wird auf dem Bildschirm angezeigt:<\/p>\n<pre>  componentWillMount() {\n\nalert('component is about to mount!');\n\n}<\/pre>\n<p><strong>Nach dem Abschluss<\/strong> von componentWillMount ruft &lt;Example \/&gt; die zweite Methode f\u00fcr den <em>Mounting-Lebenszyklus<\/em> auf: <strong>render<\/strong>.<\/p>\n<pre>  render() {\n\nreturn &lt;h1&gt;Hello world&lt;\/h1&gt;;\n\n}<\/pre>\n<p>&lt;h1&gt; Hallo Welt &lt;\/ h1&gt; erscheint auf dem Bildschirm<\/p>\n<p>Zwei Sekunden sp\u00e4ter wird &lt;Example \/&gt; erneut gerendert.<\/p>\n<pre>setTimeout(() =&gt; {\n\nReactDOM.render(\n\n&lt;Example \/&gt;,\n\ndocument.getElementById('app')\n\n);\n\n}, 2000);<\/pre>\n<p>componentWillMount wird dieses Mal jedoch NICHT aufgerufen, da das Mounten von Lifecycle-Ereignissen <strong>nur beim ersten Rendern einer Komponente<\/strong> ausgef\u00fchrt wird.<\/p>\n<p>In componentWillMount kann this.setState aufgerufen werden!<\/p>\n<p>Nachstehendes Coding ist ein Beispiel f\u00fcr this.setState in componentWillMount. Wie wird hier &lt;MyExample \/&gt; &lt;h1&gt; Hallo Welt &lt;\/ h1&gt; gerendert ?<\/p>\n<pre>import React from 'react';\n\n\nimport ReactDOM from 'react-dom';\n\nexport class MyExample extends React.Component {\nconstructor(props) {\nsuper(props);\n\nthis.state = { text: '' };\n}\n\ncomponentWillMount() {\nthis.setState({ text: 'Hello world' });\n}\n\nrender() {\nreturn &lt;h1&gt;{this.state.text}&lt;\/h1&gt;;\n}\n}\n\nReactDOM.render(\n&lt;MyExample \/&gt;,\ndocument.getElementById('app')\n);<\/pre>\n<h3><\/h3>\n<h3>2. Render<\/h3>\n<p>Rendern ist eine <em>Lebenszyklusmethode <\/em>!<\/p>\n<p>Wie f\u00fcgt sich das <em>rendern <\/em>in den Lebenszyklus ein ?<br \/>\nImmer wenn eine Komponente bereitgestellt wird, wird <strong>componentWillMount<\/strong> zuerst aufgerufen, gefolgt von <strong>render<\/strong>, gefolgt von <strong>componentDidMount<\/strong>.<\/p>\n<p>Das Rendern geh\u00f6rt zu zwei Kategorien:<br \/>\n<strong>Mounten<\/strong> von <em>Lebenszyklusmethoden<\/em> und <strong>Aktualisieren<\/strong> von <em>Lebenszyklusmethoden<\/em>.<\/p>\n<h3>3. componentDidMount<\/h3>\n<p>Die endg\u00fcltige Methode f\u00fcr den Lebenszyklus der Bereitstellung hei\u00dft <strong>componentDidMount<\/strong>.<\/p>\n<p>Wenn eine Komponente<strong> zum ersten Mal gerendert<\/strong> wird, wird componentDidMount direkt aufgerufen, <strong>nachdem der HTML-Code aus dem Rendern vollst\u00e4ndig geladen wurde<\/strong>. Nachstehend ein kleines Beispiel f\u00fcr componentDidMount.<\/p>\n<div>\n<pre>import\u00a0React\u00a0from\u00a0'react';\n\nexport\u00a0class\u00a0Example\u00a0extends\u00a0React.Component\u00a0{\n\n\u00a0\u00a0componentDidMount()\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0alert('component\u00a0just\u00a0finished\u00a0mounting!');\n\n\u00a0\u00a0}\n\n\u00a0\u00a0render()\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0return\u00a0&lt;h1&gt;Hello\u00a0world&lt;\/h1&gt;;\n\n\u00a0\u00a0}\n\n}<\/pre>\n<\/div>\n<p>componentDidMount wird sehr viel genutzt !<\/p>\n<p>Wenn die React-App AJAX verwendet, um initial Daten von einer API abzurufen, ist componentDidMount der Ort, an dem dieser AJAX-Aufruf ausgef\u00fchrt wird. Im Allgemeinen ist componentDidMount ein guter Ort, um eine React-App mit externen Anwendungen wie Web-APIs oder JavaScript-Frameworks zu verbinden. componentDidMount ist auch normalerweise der Ort, an dem Timer mit setTimeout oder setInterval festgelegt werden.<\/p>\n<p>Wenn das noch zu wenig konkret klingt, keine Sorge, wir werden die Lebenszyklusmethoden und ihre Praxis-Anwendung\u00a0 in weiteren Artikeln noch n\u00e4her betrachten.<\/p>\n<div style='text-align:left' class='yasr-auto-insert-overall'><\/div><div style='text-align:left' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>Es sind drei Kategorien von Lifecycle-Methoden zu unterscheiden: Mounting &#8211; Bereitstellen, Updating &#8211; Aktualisieren Unmounting &#8211; Aufheben der Bereitstellung. In diesem Artikel geht es um&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ways4.eu\/de\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\">Weiterlesen<span class=\"screen-reader-text\">Mounting von React Lifecycle-Methoden<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_oct_exclude_from_cache":false,"_mi_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"BlogPosting","_wpoai_wizard_id":""},"categories":[115,23],"tags":[116],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mounting von React Lifecycle-Methoden<\/title>\n<meta name=\"description\" content=\"(Deutsch) Mounting von React Lifecycle-Methoden\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mounting von React Lifecycle-Methoden\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\" \/>\n<meta property=\"og:site_name\" content=\"Streng vertraulich !\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-25T06:47:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-25T06:49:47+00:00\" \/>\n<meta name=\"author\" content=\"pathfinder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sabhe011\" \/>\n<meta name=\"twitter:site\" content=\"@sabhe011\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"pathfinder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\"},\"author\":{\"name\":\"pathfinder\",\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"headline\":\"Mounting von React Lifecycle-Methoden\",\"datePublished\":\"2020-05-25T06:47:59+00:00\",\"dateModified\":\"2020-05-25T06:49:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\"},\"wordCount\":423,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"keywords\":[\"#react\"],\"articleSection\":[\"Coding\",\"Computers and IT\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\",\"url\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\",\"name\":\"Mounting von React Lifecycle-Methoden\",\"isPartOf\":{\"@id\":\"https:\/\/ways4.eu\/#website\"},\"datePublished\":\"2020-05-25T06:47:59+00:00\",\"dateModified\":\"2020-05-25T06:49:47+00:00\",\"description\":\"(Deutsch) Mounting von React Lifecycle-Methoden\",\"breadcrumb\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ways4.eu\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"(Deutsch) Mounting von React Lifecycle-Methoden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ways4.eu\/#website\",\"url\":\"https:\/\/ways4.eu\/\",\"name\":\"Streng vertraulich !\",\"description\":\"Nicht weitersagen...\",\"publisher\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ways4.eu\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\",\"name\":\"pathfinder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1\",\"width\":702,\"height\":841,\"caption\":\"pathfinder\"},\"logo\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/ways4.eu\",\"https:\/\/twitter.com\/sabhe011\"],\"url\":\"https:\/\/ways4.eu\/de\/blog\/author\/pathfinder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mounting von React Lifecycle-Methoden","description":"(Deutsch) Mounting von React Lifecycle-Methoden","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/","og_locale":"de_DE","og_type":"article","og_title":"Mounting von React Lifecycle-Methoden","og_url":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/","og_site_name":"Streng vertraulich !","article_published_time":"2020-05-25T06:47:59+00:00","article_modified_time":"2020-05-25T06:49:47+00:00","author":"pathfinder","twitter_card":"summary_large_image","twitter_creator":"@sabhe011","twitter_site":"@sabhe011","twitter_misc":{"Verfasst von":"pathfinder","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#article","isPartOf":{"@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/"},"author":{"name":"pathfinder","@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"headline":"Mounting von React Lifecycle-Methoden","datePublished":"2020-05-25T06:47:59+00:00","dateModified":"2020-05-25T06:49:47+00:00","mainEntityOfPage":{"@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/"},"wordCount":423,"commentCount":0,"publisher":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"keywords":["#react"],"articleSection":["Coding","Computers and IT"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/","url":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/","name":"Mounting von React Lifecycle-Methoden","isPartOf":{"@id":"https:\/\/ways4.eu\/#website"},"datePublished":"2020-05-25T06:47:59+00:00","dateModified":"2020-05-25T06:49:47+00:00","description":"(Deutsch) Mounting von React Lifecycle-Methoden","breadcrumb":{"@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ways4.eu\/blog\/2020\/05\/25\/mounting-react-lifecycle-methoden\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ways4.eu\/"},{"@type":"ListItem","position":2,"name":"(Deutsch) Mounting von React Lifecycle-Methoden"}]},{"@type":"WebSite","@id":"https:\/\/ways4.eu\/#website","url":"https:\/\/ways4.eu\/","name":"Streng vertraulich !","description":"Nicht weitersagen...","publisher":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ways4.eu\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81","name":"pathfinder","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/ways4.eu\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1","width":702,"height":841,"caption":"pathfinder"},"logo":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/ways4.eu","https:\/\/twitter.com\/sabhe011"],"url":"https:\/\/ways4.eu\/de\/blog\/author\/pathfinder\/"}]}},"yasr_visitor_votes":{"number_of_votes":0,"sum_votes":0,"stars_attributes":{"read_only":false,"span_bottom":false}},"_links":{"self":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2041"}],"collection":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/comments?post=2041"}],"version-history":[{"count":13,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2041\/revisions"}],"predecessor-version":[{"id":2054,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2041\/revisions\/2054"}],"wp:attachment":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/media?parent=2041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/categories?post=2041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/tags?post=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}