{"id":1145,"date":"2024-05-16T21:06:49","date_gmt":"2024-05-16T12:06:49","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1145"},"modified":"2024-05-16T21:33:44","modified_gmt":"2024-05-16T12:33:44","slug":"react%ef%bc%9asuspense%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e7%a2%ba%e8%aa%8d","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1145","title":{"rendered":"React\uff1aSuspense\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u52d5\u4f5c\u78ba\u8a8d"},"content":{"rendered":"\n

\u74b0\u5883<\/h2>\n\n\n\n

React\uff1av18.3.1<\/p>\n\n\n\n

Tips<\/h2>\n\n\n\n

useEffect \u3084\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u5185\u306ePromise\u3092\u691c\u51fa\u3057\u306a\u3044\u3002<\/p>\n\n\n\n

Promise\u3092\u691c\u51fa\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d<\/h2>\n\n\n\n

\u7c21\u6613\u30b5\u30fc\u30d0\u3092\u7528\u610f<\/h3>\n\n\n\n

Express\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n\n\n\n

HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u53d7\u3051\u53d6\u3063\u3066\u304b\u30892\u79d2\u5f8c\u306b\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u8fd4\u3059\u7c21\u6613\u30b5\u30fc\u30d0\u3092\u7528\u610f\u3059\u308b\u305f\u3081\u306b\u3001
\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3002<\/p>\n\n\n

\n% mkdir \u30d5\u30a9\u30eb\u30c0\u540d && cd \u30d5\u30a9\u30eb\u30c0\u540d\n% npm init\n% npm install express\n\n\/\/ \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305fExpress\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306f4.19.2\u3060\u3063\u305f\u3002\n\n% vim app.js\n<\/pre><\/div>\n\n\n
app.js \u306e\u5185\u5bb9<\/h4>\n\n\n
\nconst express = require('express')\nconst app = express()\nconst port = 3001\n\nfunction sendResponse(res) {\n  res.send('ApiServer');\n}\n\nconst allowCrossDomain = function(req, res, next) {\n  res.header('Access-Control-Allow-Origin', '*')\n  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')\n  res.header(\n    'Access-Control-Allow-Headers',\n    'Content-Type, Authorization, access_token'\n  )\n\n  \/\/ intercept OPTIONS method\n  if ('OPTIONS' === req.method) {\n    res.send(200)\n  } else {\n    next()\n  }\n}\n\napp.use(allowCrossDomain)\n\napp.get('\/', (req, res) => {\n  setTimeout(\n    sendResponse,\n    2000,\n    res \n  );  \n\n  \/\/ console.log('req = ', req);\n  \/\/ console.log('res = ', res);\n})\n\napp.listen(port, () => {\n  console.log(`Example app listening on port ${port}`)\n})\n<\/pre><\/div>\n\n\n
\u30b5\u30fc\u30d0\u8d77\u52d5<\/h4>\n\n\n\n
\u4e0a\u8a18app.js\u3092\u30b3\u30d4\u30da\u3057\u305f\u3089\u3001\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3059\u308b\u3002<\/p>\n\n\n
\n% node app.js\n<\/pre><\/div>\n\n\n
\u30b5\u30fc\u30d0\u8d77\u52d5\u5f8c\u3001Web\u30d6\u30e9\u30a6\u30b6\u3067 http:\/\/localhost:3001 \u3078\u30a2\u30af\u30bb\u30b9\u3057\u3001
\u300cApiServer\u300d\u30682\u79d2\u5f8c\u306b\u8868\u793a\u3055\u308c\u308c\u3070\u826f\u3044\u3002<\/p>\n\n\n\n
React\u306e\u30b3\u30fc\u30c9<\/h3>\n\n\n\n
App.tsx\u306e\u5185\u5bb9\uff08\u91cd\u8981\u3067\u306a\u3044\uff09<\/h4>\n\n\n
\nimport { ReactNode, useEffect, useLayoutEffect } from 'react';\nimport Parent from '.\/Parent.tsx';\n\nfunction App(): ReactNode {\n  useLayoutEffect(() => {\n    console.log('App useLayoutEffect');\n  });\n\n  useEffect(() => {\n    console.log('App useEffect');\n  });\n\n  return (\n    <>\n      \u3042\u3044\u3046\u3048\u304a\n      <Parent \/>\n    <\/>\n  );\n}\n\nexport default App;\n<\/pre><\/div>\n\n\n
Parent.tsx\u306e\u5185\u5bb9<\/h4>\n\n\n
\nimport {\n  ReactNode, Suspense, useEffect, useLayoutEffect, useState,\n} from 'react';\nimport Child1 from '.\/Child1.tsx';\nimport Suspend from '.\/Suspend.tsx';\n\nfunction Parent(): ReactNode {\n  const [child1Value, setChild1Value] = useState<string>('Child1\u306e\u521d\u671f\u5024');\n  const [parentValue1, setParentValue1] = useState<string>('Parent\u306e\u521d\u671f\u5024');\n\n  function parentBtnClickFunc() {\n    alert('parentBtnClickFunc');\n    setChild1Value('\u89aa\u304b\u3089State\u304c\u5909\u66f4\u3055\u308c\u307e\u3057\u305f');\n  }\n\n  useLayoutEffect(() => {\n    console.log('Parent useLayoutEffect');\n  });\n\n  useEffect(() => {\n    console.log('Parent useEffect');\n  });\n\n  return (\n    <>\n      <div>\n        \u89aa\uff1a\n        {parentValue1}\n      <\/div>\n      <button type="button" onClick={parentBtnClickFunc}>\n        \u89aa\u30dc\u30bf\u30f3\n      <\/button>\n      <Child1 childProp={child1Value} parentStateFunc={setParentValue1} \/>\n      <Suspense fallback={<p>Now Loading...<\/p>}>\n        <Suspend \/>\n      <\/Suspense>\n    <\/>\n  );\n}\n\nexport default Parent;\n<\/pre><\/div>\n\n\n
Child1.tsx\u306e\u5185\u5bb9\uff08\u91cd\u8981\u3067\u306a\u3044\uff09<\/h4>\n\n\n
\nimport { ReactNode, useEffect, useLayoutEffect } from 'react';\n\ntype Child1Props = {\n  childProp: string,\n  parentStateFunc: Function\n};\n\nfunction Child1({ childProp, parentStateFunc }: Child1Props): ReactNode {\n  function childBtnClickFunc(): void {\n    alert('childBtnClickFunc');\n    parentStateFunc('\u5b50\u304b\u3089State\u304c\u5909\u66f4\u3055\u308c\u307e\u3057\u305f');\n  }\n\n  useLayoutEffect(() => {\n    console.log('Child1 useLayoutEffect');\n  });\n\n  useEffect(() => {\n    console.log('Child1 useEffect start Promise date = ', Date());\n  });\n\n  return (\n    <>\n      <div>\n        \u5b50\uff1a\n        {childProp}\n      <\/div>\n      <div>\n        <button type="button" onClick={childBtnClickFunc}>\n          \u5b50\u30dc\u30bf\u30f3\n        <\/button>\n      <\/div>\n    <\/>\n  );\n}\n\nexport default Child1;\n<\/pre><\/div>\n\n\n
Suspend.tsx\u306e\u5185\u5bb9<\/h4>\n\n\n
\nimport { ReactNode } from 'react';\n\nlet result: string|Response|void;\nlet blDidThrow: boolean = false;\nlet promiseData: Promise<string>;\n\nfunction promiseWrap(promise: Promise<string>) {\n  console.log('\\tpromiseWrap start');\n  let promiseStatus: string = 'pending';\n\n  promise.then(\n    (resolve) => {\n      promiseStatus = 'fulfilled';\n      result = resolve;\n      console.log('\\tpromiseWrap resolve result = ', result);\n    },\n    (reason) => {\n      promiseStatus = 'rejected';\n      result = reason;\n      console.log('\\tpromiseWrap reason = ', reason);\n    },\n  );\n\n  if (promiseStatus === 'pending' && !blDidThrow) {\n    console.log('\\tthrow promise');\n    blDidThrow = !blDidThrow;\n    throw promise;\n  }\n}\n\nasync function fetchData(): Promise<string> {\n  console.log('\\tfetchData start');\n\n  const response: Response = await fetch('http:\/\/localhost:3001');\n  const promiseText: Promise<string> = response.text();\n  return promiseText;\n}\n\nfunction Suspend(): ReactNode {\n  console.log('\\tSuspend promiseWrap date = ', Date());\n  if (result === undefined) {\n    promiseWrap(promiseData === undefined ? fetchData() : promiseData);\n  }\n\n  return (\n    <>\n      {console.log('\\tSuspend return start')}\n      Suspend.tsx\n      <br \/>\n      showText =\n      {` ${result}`}\n    <\/>\n  );\n}\n\nexport default Suspend;\n<\/pre><\/div>\n\n\n
\u7d50\u679c\uff08\u30b3\u30f3\u30bd\u30fc\u30eb\u306e\u8868\u793a\u5185\u5bb9\uff09<\/h4>\n\n\n
\n  Suspend promiseWrap date =  Thu May 16 2024 09:19:48 GMT+0900 (\u65e5\u672c\u6a19\u6e96\u6642)\n  fetchData start\n  promiseWrap start\n  throw promise\nChild1 useLayoutEffect\nParent useLayoutEffect\nApp useLayoutEffect\nChild1 useEffect start Promise date =  Thu May 16 2024 09:19:48 GMT+0900 (\u65e5\u672c\u6a19\u6e96\u6642)\nParent useEffect\nApp useEffect\n  promiseWrap resolve result =  ApiServer\n  Suspend promiseWrap date =  Thu May 16 2024 09:19:50 GMT+0900 (\u65e5\u672c\u6a19\u6e96\u6642)\n  Suspend return start\n<\/pre><\/div>\n\n\n
Web\u30d6\u30e9\u30a6\u30b6\u306b\u3066\u8868\u793a\u3059\u308b\u3068\u3001\u6700\u521d\u306fNow Loading\u3068\u8868\u793a\u3055\u308c\u3001
2\u301c3\u79d2\u5f8c\u306bApiServer\u3068\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308c\u3070\u826f\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u74b0\u5883 React\uff1av18.3.1 Tips useEffect \u3084\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u5185\u306ePromise\u3092\u691c\u51fa\u3057\u306a\u3044\u3002 Promise\u3092\u691c\u51fa\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d \u7c21\u6613\u30b5\u30fc\u30d0\u3092\u7528\u610f Express\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[105],"class_list":["post-1145","post","type-post","status-publish","format-standard","hentry","category-react","tag-react"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1145"}],"version-history":[{"count":3,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1145\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1145\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}