{"id":1353,"date":"2021-07-10T16:04:50","date_gmt":"2021-07-10T07:04:50","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1353"},"modified":"2023-08-02T10:18:55","modified_gmt":"2023-08-02T01:18:55","slug":"react-hooks","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1353","title":{"rendered":"React Hooks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">React Hooks\u3068\u306f\uff1f<\/h2>\n\n\n\n<p>Functional component\u3068Class component\u3092\u4f7f\u3063\u3066\u3044\u305f\u304cFunctional component\u306buseState<br>\u8907\u96d1\u306a\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u3053\u3068\u306a\u304f\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3060\u3051\u3067React\u958b\u767a\u3092\u9032\u3081\u3089\u308c\u308b\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30c6\u30fc\u30c8\u3092\u542b\u3080\u51e6\u7406\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5207\u308a\u96e2\u3057\u3001\u518d\u5229\u7528\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b<\/li>\n\n\n\n<li>\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3082\u30b9\u30c6\u30fc\u30c8\u306e\u3088\u3046\u306b\u5024\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u6a5f\u80fd\u3092\u5225\u95a2\u6570\u3068\u3057\u3066\u5207\u308a\u96e2\u3059\u3053\u3068\u304c\u3067\u304d\u308b<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">useContext<\/h2>\n\n\n\n<p>A\u304b\u3089C\u3078<br>useState\u306f\u30b9\u30c6\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3067\u3059\u3002<br>2\u3064\u306e\u5909\u6570\u306b\u623b\u308a\u5024\u304c\u305d\u308c\u305e\u308c\u4ee3\u5165\u3055\u308c\u308b\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>const [\u5909\u6570A,\u5909\u6570B] = useState(\u521d\u671f\u5024)<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u914d\u5217<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u6570\u5b57\u306e\u30ab\u30a6\u30f3\u30c8<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>const {count, setCount} = useState(0)<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">useContext\u3067state\u3092\u4f7f\u3046<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>import React, { useContext } from &quot;react&quot;;\nimport LanguageContext from &quot;.\/LanguageContext&quot;;\n\nexport const MainContent = () =&gt; {\n  const language = useContext(LanguageContext);\n  return (\n    &lt;section language={language}&gt;\n      \/\/\u4f55\u3089\u304b\u306e\u5185\u5bb9\n    &lt;\/section&gt;\n  );\n};<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">useReducer<\/h2>\n\n\n\nhttps:\/\/www.agile-software.site\/?p=2742\n\n\n\n<h2 class=\"wp-block-heading\">useState<\/h2>\n\n\n\nhttps:\/\/www.agile-software.site\/?p=2731\n\n\n\n<h2 class=\"wp-block-heading\">useEffect<\/h2>\n\n\n\nhttps:\/\/www.agile-software.site\/?p=2099\n","protected":false},"excerpt":{"rendered":"<p>React Hooks\u3068\u306f\uff1f Functional component\u3068Class component\u3092\u4f7f\u3063\u3066\u3044\u305f\u304cFunctional component\u306buseState\u8907\u96d1\u306a\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u3053\u3068\u306a\u304f\u95a2\u6570\u30b3<\/p>\n","protected":false},"author":1,"featured_media":1546,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1353"}],"version-history":[{"count":6,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1353\/revisions"}],"predecessor-version":[{"id":2745,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1353\/revisions\/2745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1546"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}