{"id":17217,"date":"2021-07-07T21:30:48","date_gmt":"2021-07-07T19:30:48","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17217"},"modified":"2021-07-07T17:38:24","modified_gmt":"2021-07-07T15:38:24","slug":"react-klasse-nach-function-transform","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17217","title":{"rendered":"Functional Components vs. Class Components in React"},"content":{"rendered":"<p>Hier mal ein kleines Beispiel einer React-Klasse, die zu einer Functional Components umgeformt wird:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34.png\" alt=\"\" width=\"2864\" height=\"584\" class=\"aligncenter size-full wp-image-17218\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34.png 2864w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34-300x61.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34-1024x209.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34-768x157.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34-1536x313.png 1536w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.26.34-2048x418.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Was ist anders?<br \/>\n-kein class daf\u00fcr const<br \/>\n-kein extends React.Component daf\u00fcr = (props) =><br \/>\n-keine render Methode<br \/>\n-kein this<\/p>\n<p>Noch ein Beispiel, im Prinzip das gleiche: <!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23.png\" alt=\"\" width=\"2740\" height=\"1496\" class=\"aligncenter size-full wp-image-17219\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23.png 2740w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23-300x164.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23-1024x559.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23-768x419.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23-1536x839.png 1536w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-17.31.23-2048x1118.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hier mal ein kleines Beispiel einer React-Klasse, die zu einer Functional Components umgeformt wird: Was ist anders? -kein class daf\u00fcr const -kein extends React.Component daf\u00fcr = (props) => -keine render Methode -kein this Noch ein Beispiel, im Prinzip das gleiche:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,3137,79,4960],"tags":[4961,4964,4962,3445,4462,4963],"class_list":["post-17217","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-programmierung","category-react","tag-functional-components","tag-funktion","tag-java-script","tag-klasse","tag-react","tag-umformen"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17217"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17217\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17217"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}