{"id":38021,"date":"2023-03-22T13:02:02","date_gmt":"2023-11-12T15:27:28","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/"},"modified":"2024-04-29T20:02:44","modified_gmt":"2024-04-29T12:02:44","slug":"%e5%ad%a6%e4%b9%a0react","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/","title":{"rendered":"\u5b66\u4e60React"},"content":{"rendered":"

\u8fd0\u884cReact<\/h2>\n
<!DOCTYPE html><\/span>\r\n<html><\/span>\r\n<head><\/span>\r\n <script <\/span>src=<\/span>\"\/libs\/react.development.js\"<\/span>><\/script><\/span>\r\n <script <\/span>src=<\/span>\"\/libs\/react-dom.development.js\"<\/span>><\/script><\/span>\r\n <script <\/span>src=<\/span>\"\/libs\/babel-standalone.js\"<\/span>><\/script><\/span>\r\n<\/head><\/span>\r\n<body><\/span>\r\n    <div<\/span> id=<\/span>\"app\"<\/span>><\/div><\/span>\r\n    <script <\/span>type=<\/span>\"text\/babel\"<\/span>><\/span>\r\n     \/\/ js\u3067\u30bf\u30b0\u306f\u8aad\u307f\u8fbc\u307e\u308c\u306a\u3044\u306e\u3067\u3001javascript\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\u3059\u308b\u969b\u306b\u30d0\u30d9\u30eb\u3092\u4f7f\u3063\u3066javascript\u306e\u30b3\u30fc\u30c9\u3092\u5909\u63db\u3057\u3066\u4f7f\u7528<\/span>\r\n     const<\/span> appEl<\/span> =<\/span> document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>);<\/span>\r\n     const<\/span> root<\/span> =<\/span>ReactDOM<\/span>.<\/span>createRoot<\/span>(<\/span>appEl<\/span>);<\/span>\r\n     \r\n     root<\/span>.<\/span>render<\/span>(<\/span><<\/span>h1<\/span>><\/span>\u3053\u3093\u306b\u3061\u306f<\/span><<\/span>\/h1><\/span>)<\/span>;\/<\/span>\/<\/span>jsx\u69cb\u6587<\/span>\r\n     \/\/\u4e88\u671f\u305b\u306c\u6587\u5b57\u5217\u3068\u306a\u3063\u3066\u3044\u308b:js\u3067\u8aad\u307f\u8fbc\u307e\u308c\u306a\u3044\u3002<\/span>\r\n     \/\/ v18\u4ee5\u964d\u306froot.render\u304c\u63a8\u5968<\/span>\r\n     \/\/ \u4e0b\u8a18\u306f\u975e\u63a8\u5968<\/span>\r\n     \/\/ ReactDOM.render(<\/span><<\/span>h1<\/span>><\/span>\u3053\u3093\u306b\u3061\u306f<\/span><<\/span>\/h1>,appEl<\/span>)<\/span>;\r\n<\/span>    <\/script><\/span>\r\n<\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n
\u7ec4\u4ef6\uff1a
\nReact\u4e2d\u5b9a\u4e49\u4e86\u5c4f\u5e55\u4e0a\u7684\u6bcf\u4e2a\u6784\u6210\u8981\u7d20\u3002<\/p>\n
\u30fb\u518d\u5229\u7528\u80fd\u529b\u7684\u63d0\u5347
\n\u30fb\u53ef\u8bfb\u6027\u7684\u63d0\u5347
\n\u30fb\u5b9e\u73b0\u4f4e\u8026\u5408\uff08\u51cf\u5c11\u9519\u8bef\uff09<\/p>\n
\u7ec4\u4ef6\u662fJS\u7684\u51fd\u6570\u5b9a\u4e49<\/p>\n
function<\/span> Welcome<\/span>(){<\/span>\r\nreturn<\/span> <<\/span>h1<\/span>><\/span>Hello<\/span><<\/span>\/h1><\/span>;\r\n<\/span>}<\/span>\r\n\r\n<<\/span>Welcome<\/span> \/><\/span>\r\n\r\n<\/code><\/pre>\n
<!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n   <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>\/libs\/react.development.js<\/span>\"<\/span>><<\/span>\/script<\/span>>\r\n<\/span>   <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>\/libs\/react-dom.development.js<\/span>\"<\/span>><<\/span>\/script<\/span>>\r\n<\/span>   <<\/span>script<\/span> src<\/span>=<\/span>\"<\/span>\/libs\/babel-standalone.js<\/span>\"<\/span>><<\/span>\/script<\/span>>\r\n<\/span><<\/span>\/head<\/span>>\r\n<\/span><<\/span>body<\/span>><\/span>\r\n    <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>app<\/span>\"<\/span>><<\/span>\/div<\/span>>\r\n<\/span>    <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/babel<\/span>\"<\/span>><\/span>\r\n        const<\/span> appEl<\/span> =<\/span> document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>);<\/span>\r\n        const<\/span> root<\/span> =<\/span> ReactDOM<\/span>.<\/span>createRoot<\/span>(<\/span>appEl<\/span>);<\/span>\r\n        function<\/span> Example<\/span>(){<\/span>\/\/\u5fc5\u305a\u95a2\u6570\u306e\u982d\u306f\u5927\u6587\u5b57\u3001\u5c0f\u6587\u5b57\u3060\u3068html\u306e\u30bf\u30b0\u3068\u8a8d\u8b58\u3055\u308c\u308b\u3002<\/span>\r\n         return<\/span> <<\/span>h1<\/span>><\/span>Hello<\/span> Components<\/span><<\/span>\/h1>; \/<\/span>\/<\/span>\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/span>\r\n        }<\/span>\r\n\r\n\r\n        \/\/ const Example2 =() =>{<\/span>\r\n        \/\/  return <h1>Hello Components2<\/h1><\/span>\r\n        \/\/ }<\/span>\r\n\r\n         \/\/ 1\u884c\u306e\u6642<\/span>\r\n         const<\/span> Example2<\/span> =<\/span>()<\/span> =><\/span> <<\/span>h1<\/span>><\/span>Hello<\/span> Components2<\/span><<\/span>\/h1<\/span>>\r\n<\/span>         \/\/\u8907\u6570\u884c\u306e\u6642<\/span>\r\n        const<\/span> Example3<\/span> =<\/span>()<\/span> =><\/span>{<\/span>\r\n        return <\/span>(<\/span>\r\n         <<\/span>div<\/span>><\/span>\r\n          <<\/span>h1<\/span>><\/span>Hello<\/span> Components2<\/span><<\/span>\/h1<\/span>>\r\n<\/span>         <<\/span>\/div<\/span>>\r\n<\/span>        )<\/span>\r\n        }<\/span>\r\n        \/\/\u4e0b\u8a18\u3067\u3082OK,{}\u306a\u3057\u3067\u3082return \u306e\u307f\u306a\u306e\u3067\u4e0d\u8981<\/span>\r\n         const<\/span> Example4<\/span> =<\/span>()<\/span> =><\/span> (<\/span>\r\n         <<\/span>div<\/span>><\/span>\r\n          <<\/span>h1<\/span>><\/span>Hello<\/span> Components2<\/span><<\/span>\/h1<\/span>>\r\n<\/span>         <<\/span>\/div<\/span>>\r\n<\/span>         )<\/span>\r\n               \r\n        const<\/span> a<\/span> =<\/span>()<\/span> =><\/span>{<\/span>\r\n         return<\/span>   \/\/\u4f55\u3082\u7d9a\u3051\u306a\u304b\u3063\u305f\u5834\u5408\u306bjavascript\u30a8\u30f3\u30b8\u30f3\u304c\u3000\"return undefined;\"\u306e\u30bb\u30df\u30b3\u30ed\u30f3\u304c\u4ee3\u5165\u3055\u308c\u3066\u3044\u308b\u306e\u3068\u540c\u3058\u3053\u3068\u306b\u306a\u308a\u3001undefine\u3068\u306a\u308a\u3001\u5b9f\u884c\u6587\u7ae0\u304c\u7d42\u3048\u308b\u3053\u3068\u3068\u540c\u3058\u610f\u5473\u306b\u306a\u308b\u305f\u3081\u3001\u6539\u884c\u3068\u540c\u3058\u610f\u5473\u306b\u306a\u308a\u307e\u3059\u3002<\/span>\r\n         \/\/ \u8907\u6570\u884c\u3067\u3042\u308b\u5834\u5408\u306b\u306f()\u3092\u3064\u3051\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/span>\r\n          \"<\/span>\u623b\u308a\u5024<\/span>\"<\/span>;<\/span>\r\n        }<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>a<\/span>())<\/span>\r\n        root<\/span>.<\/span>render<\/span>(<\/span><<\/span>Example2<\/span> \/><\/span>);<\/span>\r\n    <<\/span>\/script<\/span>>\r\n<\/span><<\/span>\/body<\/span>>\r\n<\/span><<\/span>\/html<\/span>>\r\n<\/span><\/code><\/pre>\n
\u54cd\u5e94\u5f00\u59cb<\/h2>\n
# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u65b9\u6cd5\r\nnpx create-react-app {\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d}\r\n\r\n# create-react-app\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\r\nnpm docs create-react-app\r\n\r\nWindows\u306e\u65b9\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u65b9\u306f\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\r\n\r\n```powershell\r\nSet-ExecutionPolicy RemoteSigned\r\n<\/code><\/pre>\n
\u5176\u4ed6<\/h1>\n
\u4f7f\u7528 Vite \u6a21\u5757\u6253\u5305\u5de5\u5177\u521b\u5efa\u9879\u76ee\u3002
\n\u6700\u8fd1\u53d8\u5f97\u5f88\u5e38\u89c1\u3002<\/p>\n
npm create vite@latest\r\n<\/code><\/pre>\n
  \"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n\/\/\u958b\u767a\u6642\u306b\u4f7f\u3046\u30b3\u30de\u30f3\u30c9\u3067\u30b5\u30fc\u30d0\u30fc\u3092\u7acb\u3061\u4e0a\u3052\u30a2\u30d7\u30ea\u3092\u4f7f\u3046\r\n    \"build\": \"react-scripts build\",\r\n\/\/\u672c\u756a\u74b0\u5883\u7528\u306b\u30d3\u30eb\u30c9\u3059\u308b\u30b3\u30de\u30f3\u30c9\r\n    \"test\": \"react-scripts test\",\r\n\/\/\u30c6\u30b9\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306e\u30b3\u30de\u30f3\u30c9\r\n    \"eject\": \"react-scripts eject\"\r\n\/\/\u96a0\u3057\u30d5\u30a1\u30a4\u30eb\u3092\u8868\u793a\u3059\u308b\u7528\u306e\u30b3\u30de\u30f3\u30c9\r\n  },\r\n\r\n\r\n<\/code><\/pre>\n
  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"dev\"<\/span>:<\/span> \"vite\"<\/span>,<\/span>\r\n    \"build\"<\/span>:<\/span> \"vite build\"<\/span>,<\/span>\r\n    \"lint\"<\/span>:<\/span> \"eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0\"<\/span>,<\/span>\r\n\/\/\u30b3\u30fc\u30c9\u30c1\u30a7\u30c3\u30af<\/span>\r\n    \"preview\"<\/span>:<\/span> \"vite preview\"<\/span>\r\n  }<\/span>,<\/span>\r\n\r\n<\/code><\/pre>\n
\u53cd\u5e94\u6837\u5f0f<\/h2>\n
import \".\/Example.css\";\r\n\r\nclass MyClass{}\/\/<<\/span><<\/span>JS\u3067\u306f\u5de6\u306e\u3088\u3046\u306b\u4f7f\u3046\u305f\u3081<\/span>\u3002<\/span>\u6df7\u540c\u3057\u306a\u3044\u3088\u3046\u306b<\/span>\r\n\r\n\r\n\r\nconst<\/span> Example = <\/span>()<\/span> =<\/span>><\/span> {\r\n  return (\r\n   <div<\/span> className=<\/span>\"component\"<\/span>><\/span>\r\n    {\/* class\u3067\u306f\u306a\u304fclassNmae *\/}\r\n      <h3><\/span>Hello Component<\/h3><\/span>\r\n    <\/div><\/span>\r\n  );\r\n};\r\n\r\nexport default Example;\r\n<\/code><\/pre>\n
.App-start<\/span> .component<\/span>{<\/span>\r\n padding<\/span>:<\/span>1rem<\/span>;<\/span>\r\n color<\/span>:<\/span>red<\/span>;<\/span>\r\n\r\n border<\/span>:<\/span>5px<\/span> solid<\/span> green<\/span>\r\n}<\/span>\r\n\r\n\/* css\u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u306a\u308b\u305f\u3081\u3001CSS\u3092\u5f53\u3066\u308b\u969b\u306b\u306f\u6ce8\u610f\u304c\u5fc5\u8981 *\/<\/span>\r\n<\/code><\/pre>\n
\u5c06\u96f6\u4ef6\u5206\u5272<\/h2>\n
\r\nimport<\/span> Child<\/span> from<\/span> \"<\/span>.\/component\/Child<\/span>\"<\/span>;<\/span>\r\n\/\/ .js\u306f\u3069\u3061\u3089\u3067\u3082\u826f\u3044webpack\u304c\u52dd\u624b\u306b\u89e3\u91c8\u3057\u3066\u304f\u308c\u308b<\/span>\r\n\r\n<\/code><\/pre>\n
import<\/span> Child<\/span> from<\/span> \"<\/span>.\/components\/Child<\/span>\"<\/span>\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> <<\/span>Child<\/span> \/>;<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
const<\/span> Child<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n return <\/span>(<\/span>\r\n  <<\/span>div<\/span> className<\/span>=<\/span>\"component\"<\/span>><\/span>\r\n   <<\/span>h3<\/span>><\/span>Child Component<\/<\/span>h3<\/span>><\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n );<\/span>\r\n}<\/span>\r\n \r\n\/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4e00\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u4e00\u3064\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u666e\u901a<\/span>\r\n\/\/export default \u3067OK<\/span>\r\nexport<\/span> default<\/span> Child<\/span> \r\n\r\n<\/code><\/pre>\n
\u7247\u6bb5<\/h2>\n
import<\/span> \"<\/span>.\/Child.css<\/span>\"<\/span>;<\/span>\r\n\/\/ import React from \"react\"  \/\/\u3069\u3061\u3089\u3067\u3082\u826f\u3044<\/span>\r\n\/\/\u3053\u306e\u5834\u5408\u306b\u306f<React.Fragment>\u3067\u56f2\u3080<\/span>\r\n\r\n\r\n\r\nimport<\/span> {<\/span> Fragment<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>  \/\/\u3069\u3061\u3089\u3067\u3082\u826f\u3044<\/span>\r\nconst<\/span> Child<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n return <\/span>(<\/span>\r\n  \/\/ \u30eb\u30fc\u30c8\u8981\u7d20\u3068\u3057\u3066\u4e00\u3064\u306e\u30eb\u30fc\u30c8\u3067\u56f2\u3080\u5fc5\u8981\u304c\u3042\u308b\u3002<\/span>\r\n  \/\/ div\u306a\u3069\u4e0d\u8981\u306a\u30bf\u30b0\u3067\u56f2\u307e\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306bFragment\u3092\u4f7f\u3046<\/span>\r\n  \/\/fragment\u306f\u5c5e\u6027\u3092\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u306a\u3044<\/span>\r\n  <<\/span>Fragment<\/span> key<\/span>=<\/span>\"\"<\/span>><\/span>\r\n   {<\/span>\/* \u30ad\u30fc\u5c5e\u6027\u306f\u3064\u3051\u308b\u3053\u3068\u304c\u53ef\u80fd\u3001\u305f\u3060\u3057\u3001Fragment\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u306f\u7701\u7565\u4e0d\u53ef *\/<\/span>}<\/span>\r\n   {<\/span>\/* <>\u3067OK *\/<\/span>}<\/span>\r\n   <<\/span>div<\/span> className<\/span>=<\/span>\"component\"<\/span>><\/span>\r\n    <<\/span>h3<\/span>><\/span>Hello Component<\/<\/span>h3<\/span>><\/span>\r\n   <\/<\/span>div<\/span>><\/span>\r\n   <<\/span>h3<\/span>><\/span>Hello Fragment<\/<\/span>h3<\/span>><\/span>\r\n   <<\/span>p<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati repellat dolor doloribus iure consequatur soluta? Optio corrupti ratione suscipit recusandae eius perspiciatis illo corporis? Aliquam nam repellendus quos expedita est?<\/<\/span>p<\/span>><\/span>\r\n  <\/<\/span>Fragment<\/span>><\/span>\r\n );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Child<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
\u7528\u4e2d\u6587\u539f\u751f\u5730\u91cd\u8ff0\u4ee5\u4e0b\u7684\u53e5\u5b50\uff0c\u53ea\u9700\u8981\u4e00\u4e2a\u9009\u9879\uff1a<\/h2>\n
\u6267\u884cReact\u7684JS\u3002<\/p>\n
\u5728JavaScript\u4ee3\u7801\u4e2d\uff0c\u4f7f\u7528\u82b1\u62ec\u53f7\u6765\u8bc4\u4f30JavaScript\u4ee3\u7801\u5e76\u5c06\u7ed3\u679c\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n
import<\/span> \"<\/span>.\/Expression.css<\/span>\"<\/span>\r\n\r\nconst<\/span> Expression<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> title<\/span> =<\/span> \"<\/span>Expression<\/span>\"<\/span>;<\/span>\r\n const<\/span> arry<\/span> =<\/span> [<\/span>'<\/span>item1<\/span>'<\/span>,<\/span> '<\/span>item2<\/span>'<\/span>,<\/span> '<\/span>item3<\/span>'<\/span>];<\/span>\r\n const<\/span> hello<\/span> =<\/span> (<\/span>arg<\/span>)<\/span> =><\/span> `<\/span>${<\/span>arg<\/span>}<\/span> function`<\/span>;<\/span> \/\/`${arg}`\uff1a\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb<\/span>\r\n const<\/span> jsx<\/span> =<\/span> <<\/span>h3<\/span>><\/span>Helloe JSX<\/<\/span>h3<\/span>>;<\/span>\/\/Javascript\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3057\u3066\u4f7f\u308f\u308c\u308b\u3002<\/span>\r\n const<\/span> bool<\/span> =<\/span> true<\/span>;<\/span>\r\n return <\/span>(<\/span>\r\n  <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>title<\/span>.<\/span>toLowerCase<\/span>()<\/span>}<\/span>><\/span>\r\n   {<\/span>\/* \u30bf\u30a4\u30c8\u30eb\u3092\u4f7f\u3063\u3066\u5c0f\u6587\u5b57\u8868\u793a \u30e1\u30bd\u30c3\u30c9\u3082\u5b9f\u884c\u53ef\u80fd*\/<\/span>}<\/span>\r\n   <<\/span>h3<\/span>><\/span>Hello {<\/span>title<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   <<\/span>h3<\/span>><\/span>Hello {<\/span>arry<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   {<\/span>\/* \u914d\u5217\u306e\u5834\u5408\u81ea\u52d5\u7684\u306b\u5c55\u958b\u3055\u308c\u3066\u8868\u793a\u3059\u308b *\/<\/span>}<\/span>\r\n   <<\/span>h3<\/span>><\/span>{<\/span>hello<\/span>(<\/span>'<\/span>Hello<\/span>'<\/span>)<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   <<\/span>h3<\/span>><\/span>{<\/span>\/* \u753b\u9762\u4e0a\u306b\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002 *\/<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   {<\/span><<\/span>h3<\/span>><\/span>Helloe JSX<\/<\/span>h3<\/span>><\/span>}<\/span> \r\n   {<\/span>\/*\u3053\u308c\u3082 JS \u30b3\u30fc\u30c9 \u6700\u7d42\u7684\u306bJS\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n   {<\/span>bool<\/span>}<\/span> \r\n   {<\/span>\/* boolearn\u306f\u8868\u793a\u3055\u308c\u306a\u3044\u3002 *\/<\/span>}<\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n );<\/span>\r\n \/\/js\u306e\u30b3\u30fc\u30c9\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u3002\u5f0f\u3092\u57cb\u3081\u8fbc\u307f\u53ef\u80fd<\/span>\r\n}<\/span>\r\n \r\n\r\n\r\nexport<\/span> default<\/span> Expression<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5f0f\u548c\u6587<\/h2>\n
\u5728JSX\u4e2d\uff0c\u53ea\u80fd\u4f7f\u7528\u8868\u8fbe\u5f0f\u3002\u8868\u8fbe\u5f0f\u662f\u53ef\u4ee5\u8fd4\u56de\u67d0\u4e9b\u503c\uff08\u53ef\u4ee5\u8d4b\u503c\u7ed9\u53d8\u91cf\uff09\u7684\u4e1c\u897f\u3002\u8fd9\u4e9b\u5305\u62ec\u53d8\u91cf\u58f0\u660e\u3001for\u5faa\u73af\u3001if\u8bed\u53e5\u3001switch\u8bed\u53e5\u548c\u5206\u53f7\u5206\u9694\u7684\u4e1c\u897f\u3002<\/p>\n
import<\/span> \"<\/span>.\/Child.css<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Child<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> fn<\/span> =<\/span> ()<\/span> =><\/span> '<\/span>hello<\/span>'<\/span>;<\/span>\r\n const<\/span> a<\/span> =<\/span>if <\/span>(<\/span>true<\/span>)<\/span> {<\/span> '<\/span>hello<\/span>'<\/span> };<\/span>\/\/NG<\/span>\r\n \/\/ if\u6587\u81ea\u4f53\u306f\u5909\u6570\u306b\u4ee3\u5165\u3067\u304d\u306a\u3044\u3082\u306e\u306a\u306e\u3067\u6587\u3068\u306a\u308b\u3002<\/span>\r\n const<\/span> f<\/span> =<\/span> fn<\/span>();<\/span>\r\n \/\/\u95a2\u6570\u3092\u5b9f\u884c\u3057\u305f\u7d50\u679c\u306fhello\u3068\u3044\u3046\u5024\u3092\u8fd4\u3059\u5f0f\u3068\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u3053\u306e\u95a2\u6570\u306e\u5b9f\u884c\u7d50\u679c\u306f\u5f0f<\/span>\r\n const<\/span> c<\/span> =<\/span> 1<\/span> ===<\/span> 1<\/span>;<\/span>\r\n \/\/\u5f0f\u3000\u5de6\u30aa\u30da\u30e9\u30f3\u30c9\u3068\u53f3\u30aa\u30da\u30e9\u3093\u3069\u304c\u7b49\u3057\u3044\u5834\u5408\u306b\u306ftrue\/false\u3092\u8fd4\u3059\u5f0f\u3068\u306a\u308a\u307e\u3059\u3002<\/span>\r\n \/\/\u305f\u3060\u3057\u3001\u8868\u793a\u306f\u3055\u308c\u306a\u3044<\/span>\r\n const<\/span> b<\/span> =<\/span> 1<\/span>;<\/span>\r\n \/\/ const b = 1;\u306f\u6587\u306b\u306a\u308b\u3002<\/span>\r\n \/\/ 1\u3068\u3044\u3046\u306e\u306f1\u3068\u3044\u3046\u5024\u3092\u8fd4\u3059\u5f0f\u3001\u5909\u6570\u306b\u4ee3\u5165\u3067\u304d\u308b\u3002<\/span>\r\n 1<\/span>;<\/span>\/\/\u5f0f\u306b\u3082\u6587\u306b\u3082\u306a\u308a\u3048\u308b \u5f0f\u3076\u3093<\/span>\r\n\r\n if <\/span>(<\/span>true<\/span>)<\/span> {<\/span> '<\/span>hello<\/span>'<\/span> };<\/span>\r\n \/\/ \u3053\u3053\u3067if\u6587\u306fOK<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span> className<\/span>=<\/span>\"component\"<\/span>><\/span>\r\n    <<\/span>h3<\/span>><\/span>\u5f0f\u3068\u6587<\/<\/span>h3<\/span>><\/span>\r\n    {<\/span>1<\/span> ===<\/span> 1<\/span>}<\/span> \r\n    {<\/span>\/* \u975e\u8868\u793a\u3044 *\/<\/span>}<\/span>\r\n    {<\/span>true<\/span> ?<\/span> '<\/span>hello<\/span>'<\/span> :<\/span> '<\/span>bye<\/span>'<\/span>}<\/span>\r\n    {<\/span>\/* OK *\/<\/span>}<\/span>\r\n    {<\/span>if <\/span>(<\/span>true<\/span>)<\/span> {<\/span>'<\/span>hello<\/span>'<\/span>};<\/span>}<\/span>\r\n    {<\/span>\/* NG  for \u3082\u540c\u69d8\u3000return\u5185\u3067\u4f7f\u308f\u306a\u3051\u308c\u3070OK *\/<\/span>}<\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Child<\/span>;<\/span>\r\n<\/code><\/pre>\n
const<\/span> title<\/span> =<\/span> '<\/span>Expression<\/span>'<\/span>;<\/span>\r\nconst<\/span> array<\/span> =<\/span> [<\/span>'<\/span>item1<\/span>'<\/span>,<\/span> '<\/span>item2<\/span>'<\/span>,<\/span> '<\/span>item3<\/span>'<\/span>];<\/span>\r\nconst<\/span> fn<\/span> =<\/span> (<\/span>arg<\/span>)<\/span> =><\/span> {<\/span>\r\n  return<\/span> `<\/span>${<\/span>arg<\/span>}<\/span> Function`<\/span>;<\/span>\r\n};<\/span>\r\nconst<\/span> upperCaseText<\/span> =<\/span> '<\/span>upperCaseText<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>h3<\/span>><\/span>Hello JSX<\/<\/span>h3<\/span>><\/span>\r\n      {<\/span>\/* toUpperCase\u30e1\u30bd\u30c3\u30c9\u3067\u6587\u5b57\u5217\u3092\u3059\u3079\u3066\u5927\u6587\u5b57\u306b\u3057\u307e\u3059\u3002 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>upperCaseText<\/span>.<\/span>toUpperCase<\/span>()<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      {<\/span>\/* +\u6f14\u7b97\u5b50\u3067\u6587\u5b57\u5217\u3092\u7d50\u5408\u3057\u307e\u3059\u3002 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>'<\/span>Hello <\/span>'<\/span> +<\/span> title<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      {<\/span>\/* \u914d\u5217\u304cJSX\u5185\u3067\u6e21\u3055\u308c\u308b\u3068\u81ea\u52d5\u7684\u306b\u8981\u7d20\u304c\u5c55\u958b\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u307e\u3059\u3002 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>array<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      {<\/span>\/* \u95a2\u6570\u306e\u5b9f\u884c\u306freturn\u306b\u7d9a\u304f\u5024\u304c\u8fd4\u3063\u3066\u304d\u307e\u3059\u3002 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>fn<\/span>(<\/span>'<\/span>Hello<\/span>'<\/span>)<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u9053\u5177<\/h2>\n
import<\/span> Child<\/span> from<\/span> \"<\/span>.\/components\/Child<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n  <<\/span>Child<\/span>  \/><\/span>\r\n  <<\/span>Child<\/span> color<\/span>=<\/span>\"red\"<\/span> \/><\/span>\r\n  <\/><\/span>\r\n\r\n)};<\/span>\r\n\/\/ \u5c5e\u6027\u3092\u6307\u5b9a\u3057\u3066\u5024\u3092\u6e21\u3059\u3053\u3068\u304c\u53ef\u80fd<\/span>\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
import<\/span> \"<\/span>.\/Child.css<\/span>\"<\/span>;<\/span>\r\n\/\/ \u5916\u90e8\u304b\u3089\u5024\u3092\u6e21\u3057\u3066\u518d\u5229\u7528\u6027\u3092<\/span>\r\n\/\/ const Child = (props) => {<\/span>\r\n \/\/ props\u3067\u3042\u308b\u5fc5\u8981\u306a\u3057 p\u3067\u3082\u6163\u7fd2\u7684\u306b\u6697\u9ed9\u30eb\u30fc\u30eb<\/span>\r\n \r\n \/\/ \u5206\u5272\u4ee3\u5165\u3059\u308b\u5834\u5408<\/span>\r\nconst<\/span> Child<\/span> =<\/span> ({<\/span> color<\/span>:<\/span>c<\/span> =<\/span> '<\/span>green<\/span>'<\/span> })<\/span> =><\/span> {<\/span>\r\n \/\/ green:\u521d\u671f\u5024\u8a2d\u5b9a<\/span>\r\n \/\/ color:c color\u306e\u5024\u3092c\u3068\u3057\u3066\u7f6e\u304d\u63db\u3048\u3066\u4f7f\u3046<\/span>\r\n console<\/span>.<\/span>log<\/span>()<\/span>\r\n return <\/span>(<\/span>\r\n   <><\/span>\r\n   <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>`component  <\/span>${<\/span>c<\/span>}<\/span>`<\/span>}<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>Hello Component<\/<\/span>h3<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n   <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Child<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u9053\u51772<\/h2>\n
import<\/span> Child<\/span> from<\/span> \"<\/span>.\/components\/Child<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> hello<\/span> =<\/span> (<\/span>arg<\/span>)<\/span> =><\/span> `ello <\/span>${<\/span>arg<\/span>}<\/span>`<\/span>;<\/span>\r\n const<\/span> o<\/span> =<\/span> {<\/span>\r\n  color<\/span>:<\/span> \"<\/span>red<\/span>\"<\/span>,<\/span>\r\n  num<\/span>:<\/span>123<\/span>,<\/span>\r\n }<\/span>\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n   {<\/span>\/* <Child \/> *\/<\/span>}<\/span>\r\n   {<\/span>\/* <Child color=\"red\" \/> \u2192\u30a8\u30e9\u30fc*\/<\/span>}<\/span>\r\n   {<\/span>\/* \u4e0b\u8a18\u3067fn\u3092\u6e21\u3059\u3088\u3046\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304b\u3089\u3001\u547c\u3073\u51fa\u3059\u969b\u306bprops\u3068\u3057\u3066\u95a2\u6570\u3092\u6e21\u3057\u3066\u3044\u306a\u3044\u306e\u3067fn\u306fundefined\u3068\u306a\u308a\u3001fn is not a function\u3068\u306a\u308b *\/<\/span>}<\/span>\r\n   <<\/span>Child<\/span>\r\n    {<\/span>...<\/span>o<\/span>}<\/span>\r\n    \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u6f14\u7b97\u5b50\u3067\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5024\u304c\u5c55\u958b\u3055\u308c\u308b\u3002<\/span>\r\n    \/\/ num={123}<\/span>\r\n    fn<\/span>=<\/span>{<\/span>hello<\/span>}<\/span>\r\n    bool<\/span>\r\n    obj<\/span>=<\/span>{<\/span>{<\/span> name<\/span>:<\/span>'<\/span>Tom<\/span>'<\/span>,<\/span>age<\/span>:<\/span>18<\/span> }<\/span>}<\/span>\r\n    \/\/ true\u306e\u5024\u304c\u6e21\u3063\u3066\u304f\u308b<\/span>\r\n   \/><\/span>\r\n   {<\/span>\/* \u5c5e\u6027\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u5206\u306b\u3064\u3044\u3066\u306fundefined\u3068\u306a\u308b\u3002 *\/<\/span>}<\/span>\r\n  <\/><\/span>\r\n\r\n )<\/span>\r\n};<\/span>\r\n\/\/ \u5c5e\u6027\u3092\u6307\u5b9a\u3057\u3066\u5024\u3092\u6e21\u3059\u3053\u3068\u304c\u53ef\u80fd<\/span>\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n\r\n<\/code><\/pre>\n
\/* POINT \u5f0f\u3068\u6587\r\n\u5f0f\uff1a\u4f55\u3089\u304b\u306e\u5024\u3092\u8fd4\u3059\u3082\u306e\uff08\u5909\u6570\u306b\u4ee3\u5165\u3067\u304d\u308b\u3082\u306e\uff09\r\n\u6587\uff1a\u5909\u6570\u5ba3\u8a00\u3001for\u6587\u3001if\u6587\u3001switch\u6587\u3084\u30bb\u30df\u30b3\u30ed\u30f3\u3067\u533a\u5207\u308b\u3082\u306e\u3002\r\n*\/<\/span>\r\n\r\nimport<\/span> \"<\/span>.\/Child.css<\/span>\"<\/span>;<\/span>\r\n\/\/ \u5916\u90e8\u304b\u3089\u5024\u3092\u6e21\u3057\u3066\u518d\u5229\u7528\u6027\u3092<\/span>\r\n\/\/ const Child = (props) => {<\/span>\r\n \/\/ props\u3067\u3042\u308b\u5fc5\u8981\u306a\u3057 p\u3067\u3082\u6163\u7fd2\u7684\u306b\u6697\u9ed9\u30eb\u30fc\u30eb<\/span>\r\n \r\n \/\/ \u5206\u5272\u4ee3\u5165\u3059\u308b\u5834\u5408<\/span>\r\n\/\/ const Child = (props) => {<\/span>\r\n \/\/ console.log(props)<\/span>\r\nconst<\/span> Child<\/span> =<\/span> ({<\/span> color<\/span>:<\/span>c<\/span> =<\/span> '<\/span>green<\/span>'<\/span>,<\/span>num<\/span>,<\/span> fn<\/span>,<\/span>bool<\/span>,<\/span>obj<\/span> })<\/span> =><\/span> {<\/span>\r\n \/\/ green:\u521d\u671f\u5024\u8a2d\u5b9a<\/span>\r\n \/\/ color:c color\u306e\u5024\u3092c\u3068\u3057\u3066\u7f6e\u304d\u63db\u3048\u3066\u4f7f\u3046<\/span>\r\n console<\/span>.<\/span>log<\/span>();<\/span>\r\n return <\/span>(<\/span>\r\n   <><\/span>\r\n   <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>`component  <\/span>${<\/span>c<\/span>}<\/span>`<\/span>}<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>Hello Component<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>num<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>fn<\/span>(<\/span>'<\/span>Props<\/span>'<\/span>)<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>bool<\/span> ?<\/span> '<\/span>true<\/span>'<\/span> :<\/span>'<\/span>false<\/span>'<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>obj<\/span>.<\/span>name<\/span> +<\/span> obj<\/span>.<\/span>age<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n   <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Child<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u513f\u7ae5<\/h2>\n
import<\/span> Profile<\/span> from<\/span> \"<\/span>.\/components\/Profile<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Container<\/span> from<\/span> \"<\/span>.\/components\/Container<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> profile<\/span> =<\/span> [<\/span>\r\n  {<\/span> name<\/span>:<\/span> \"<\/span>Takashi<\/span>\"<\/span>,<\/span> age<\/span>:<\/span> 19<\/span>,<\/span> country<\/span>:<\/span> \"<\/span>Japan<\/span>\"<\/span>,<\/span> color<\/span>:<\/span> \"<\/span>green<\/span>\"<\/span> },<\/span>\r\n  {<\/span> name<\/span>:<\/span> \"<\/span>Jane<\/span>\"<\/span>,<\/span> age<\/span>:<\/span> 28<\/span>,<\/span> country<\/span>:<\/span> \"<\/span>UK<\/span>\"<\/span>,<\/span> color<\/span>:<\/span> \"<\/span>red<\/span>\"<\/span> },<\/span>\r\n];<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n    <<\/span>Container<\/span> title<\/span>=<\/span>\"Children\u3068\u306f\uff1f\"<\/span> ><\/span>\r\n     <<\/span>Profile<\/span> {<\/span>...<\/span>profile<\/span>[<\/span>0<\/span>]<\/span>}<\/span> \/><\/span>\r\n    <\/<\/span>Container<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nconst<\/span> Example2<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n return <\/span>(<\/span>\r\n  <<\/span>div<\/span>><\/span>\r\n   <<\/span>Container<\/span> title<\/span>=<\/span>\"Children\u3068\u306f\uff1f\"<\/span> children<\/span>=<\/span>{<\/span>\r\n    [<<\/span>Profile<\/span> key<\/span>=<\/span>{<\/span>profile<\/span>[<\/span>0<\/span>].<\/span>name<\/span>}<\/span> {<\/span>...<\/span>profile<\/span>[<\/span>0<\/span>]<\/span>}<\/span> \/>,<\/span>\r\n     <<\/span>Profile<\/span> key<\/span>=<\/span>{<\/span>profile<\/span>[<\/span>1<\/span>].<\/span>name<\/span>}<\/span> {<\/span>...<\/span>profile<\/span>[<\/span>1<\/span>]<\/span>}<\/span> \/>]<\/span>\r\n   }<\/span> first<\/span>=<\/span>{<\/span><<\/span>Profile<\/span> key<\/span>=<\/span>{<\/span>profile<\/span>[<\/span>0<\/span>].<\/span>name<\/span>}<\/span> {<\/span>...<\/span>profile<\/span>[<\/span>0<\/span>]<\/span>}<\/span> \/><\/span>}<\/span>\r\n    second<\/span>=<\/span>{<\/span><<\/span>Profile<\/span> key<\/span>=<\/span>{<\/span>profile<\/span>[<\/span>1<\/span>].<\/span>name<\/span>}<\/span> {<\/span>...<\/span>profile<\/span>[<\/span>1<\/span>]<\/span>}<\/span> \/><\/span>}<\/span>\r\n   \/><\/span>\r\n    {<\/span>\/* \u4e0a\u8a18\u306e\u8868\u73fe\u3067\u3082\u554f\u984c\u306a\u3057\u3001\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u81ea\u4f53\u3082javascript\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u3053\u306e\u5217\u306b\u683c\u7d0d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 *\/<\/span>}<\/span>\r\n\r\n  <\/<\/span>div<\/span>><\/span>\r\n );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example2<\/span>;<\/span>\r\n\r\n\r\n<\/code><\/pre>\n
\u9053\u5177\u7684\u89c4\u5219<\/h2>\n
\/\/ POINT props\u5728\u7ec4\u4ef6\u95f4\u662f\u5355\u5411\u4f20\u9012\u7684\uff0c\u4ece\u7236\u7ec4\u4ef6\u5230\u5b50\u7ec4\u4ef6\u3002
\n\/\/ POINT props\u662f\u53ea\u8bfb\u7684\u3002<\/p>\n
import<\/span> Bye<\/span> from<\/span> \"<\/span>.\/components\/Bye<\/span>\"<\/span>\r\nimport<\/span> Hello<\/span> from<\/span> \"<\/span>.\/components\/Hello<\/span>\"<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> name<\/span> =<\/span> \"<\/span>Tom<\/span>\"<\/span>;<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n    <<\/span>Hello<\/span> name<\/span>=<\/span>{<\/span> name<\/span> }<\/span> \/><\/span>\r\n    <<\/span>Bye<\/span> name<\/span>=<\/span>{<\/span>name<\/span> }<\/span> \/><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
const<\/span> Hello<\/span> =<\/span> (<\/span>props<\/span>)<\/span> =><\/span> {<\/span>\r\n \/\/ props.name = 'BOb';\/\/ \u30a8\u30e9\u30fc\u8aad\u307f\u53d6\u308a\u5c02\u7528props<\/span>\r\n\r\n const<\/span> desc<\/span> =<\/span> Reflect<\/span>.<\/span>getOwnPropertyDescriptor<\/span>(<\/span>props<\/span>,<\/span> '<\/span>name<\/span>'<\/span>);<\/span>\r\n console<\/span>.<\/span>log<\/span>(<\/span>desc<\/span>);<\/span>\r\n \/\/ configurable:false;\u5909\u66f4\u3067\u304d\u308b\u304b\uff1f\u3067\u304d\u306a\u3044<\/span>\r\n \/\/ writable:false;\u66f8\u304d\u63db\u3048\u53ef\u80fd\u304b\uff1f\u4e0d\u53ef<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>Hello {<\/span>props<\/span>.<\/span>name<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Hello<\/span>;<\/span>\r\n<\/code><\/pre>\n
const<\/span> Bye<\/span> =<\/span> (<\/span>props<\/span>)<\/span> =><\/span> {<\/span>\r\n const<\/span> name<\/span> =<\/span> '<\/span>Tom<\/span>'<\/span>;<\/span>\r\n \/\/ Hello\u3078\u306f\u6e21\u305b\u306a\u3044<\/span>\r\n \/\/ \u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>Bye {<\/span>props<\/span>.<\/span>name<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Bye<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
JSX\u7684\u771f\u6b63\u8eab\u4efd<\/h2>\n
\u5728babel\u4e2d\uff0c\u51fd\u6570\u88ab\u66ff\u6362\u4e3a\u5bf9\u8c61\u3002<\/p>\n
\u7ecf\u8fc7JSX\u8bed\u6cd5\u8f6c\u6362\uff0c\u4f1a\u5c06\u5176\u8f6c\u6362\u4e3aJS\u5bf9\u8c61\u3002
\nJS\u5bf9\u8c61\uff08React\u5143\u7d20\uff09<\/p>\n
  const<\/span> sample2<\/span> =<\/span> (<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>Hello!<\/<\/span>h1<\/span>><\/span>\r\n      <<\/span>h2<\/span>><\/span>Good to see you.<\/<\/span>h2<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n<\/code><\/pre>\n
\u5df4\u522b\u5854\u7684\u7ffb\u8bd1<\/p>\n
  const<\/span> sample2<\/span> =<\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>\r\n    \"<\/span>div<\/span>\"<\/span>,<\/span>\/\/\u30bf\u30b0\u540d<\/span>\r\n   null<\/span>,<\/span>\/\/ \u30d7\u30ed\u30c3\u30d7\u30b9\u306e\u5024<\/span>\r\n   React<\/span>.<\/span>createElement<\/span>(<\/span>\"<\/span>h1<\/span>\"<\/span>,<\/span> null<\/span>,<\/span> \"<\/span>Hello!<\/span>\"<\/span>),<\/span>\r\n    \r\n    React<\/span>.<\/span>createElement<\/span>(<\/span>\"<\/span>h2<\/span>\"<\/span>,<\/span> null<\/span>,<\/span> \"<\/span>Good to see you.<\/span>\"<\/span>)<\/span>\r\n  );<\/span>\r\n<\/code><\/pre>\n
\u6267\u884c\u7ed3\u679c<\/p>\n
const<\/span> element<\/span> =<\/span>{<\/span>\r\n type<\/span>:<\/span>'<\/span>h1<\/span>'<\/span>,<\/span>\r\n props<\/span>:{<\/span>\r\n  className<\/span>:<\/span>'<\/span>greeting<\/span>'<\/span>,<\/span>\r\n  children<\/span>:<\/span>'<\/span>Hello World<\/span>'<\/span>\r\n}<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
\u5173\u4e8e\u7528\u4e8e\u5f00\u53d1\u7684\u4e8b\u4ef6\u3002<\/h2>\n
const<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> clickHandler<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  alert<\/span>(<\/span>'<\/span>\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308cr\u307e\u3057\u305f\u3002<\/span>'<\/span>);<\/span>\r\n  \/\/ \u623b\u308a\u5024return\u304c\u306a\u3044\u306e\u3067undefined\u306e\u623b\u308a\u5024\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/span>\r\n }<\/span>\r\n \/\/ \u6975\u529b\u540d\u524d\u4ed8\u304d\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u3066\u304b\u3089\u4e0b\u8a18\u306b\u5165\u529b<\/span>\r\n \r\n const<\/span> hello<\/span> =<\/span> ()<\/span> =><\/span> '<\/span>hello react<\/span>'<\/span>;<\/span>\r\n console<\/span>.<\/span>log<\/span>(<\/span>hello<\/span>)<\/span>\r\n \/\/ () => 'hello react'\u304c\u305d\u306e\u307e\u307e\u8868\u793a\u3055\u308c\u308b\u3002<\/span>\r\n console<\/span>.<\/span>log<\/span>(<\/span>hello<\/span>());<\/span>\r\n \/\/ hello react\u304c\u8868\u793a\u3055\u308c\u308b\u3002<\/span>\r\n\r\n return <\/span>(<\/span>\r\n   <><\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>clickHandler<\/span>}<\/span>><\/span>\u30af\u30ea\u30c3\u30af\u3057\u3066\u306d<\/<\/span>button<\/span>><\/span>\r\n    {<\/span>\/* onClick\u306eC\u306f\u5927\u6587\u5b57 *\/<\/span>}<\/span>\r\n   {<\/span>\/* clickHander()\uff08\u95a2\u6570\u3092\u5b9f\u884c\u3057\u305f\u3082\u306e\uff09\u3068()\u3092\u3064\u3051\u308b\u308f\u3051\u3067\u306f\u306a\u304fclickHandler(\u30dc\u30bf\u30f3\u3092\u62bc\u3055\u308c\u3066\u5b9f\u884c\u3059\u308b\u3082\u306e)\u3068\u3057\u3066\u8a18\u8f09\u3059\u308b\u3002 *\/<\/span>}<\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> clickHandler<\/span>()<\/span>}<\/span>><\/span>\u30af\u30ea\u30c3\u30af\u3057\u3066\u306d<\/<\/span>button<\/span>><\/span>\r\n   {<\/span>\/* \u4e0a\u8a18\u306e\u5834\u5408\u306b\u306f\u95a2\u6570\u306e\u5b9f\u52b9\u8a18\u8f09\u304c\u5fc5\u8981\u3002\u30af\u30ea\u30c3\u30af\u3055\u308c\u3066\u304b\u3089\u95a2\u6570\u304c\u5b9f\u884c\u3059\u308b\u305f\u3081\u3001\u5b9f\u884c\u3055\u308c\u305freturn\u306b\u306f()\u3092\u4ed8\u3051\u306a\u3044\u3068\u95a2\u6570\u304c\u623b\u308a\u5024\u3068\u306a\u3063\u3066\u3057\u307e\u3046\u3002 *\/<\/span>}<\/span>\r\n   <<\/span>button<\/span>><\/span>\u30af\u30ea\u30c3\u30af\u3057\u3066\u306d<\/<\/span>button<\/span>><\/span>\r\n   {<\/span>hello<\/span>()<\/span>}<\/span>\r\n   <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
import<\/span> \"<\/span>.\/Example.css<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>label<\/span>><\/span>\r\n        \u5165\u529b\u5024\u306e\u30a4\u30d9\u30f3\u30c8\uff1a\r\n        <<\/span>input<\/span>\r\n          type<\/span>=<\/span>\"text\"<\/span>\r\n      onInput<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>onChange\u691c\u77e5<\/span>\"<\/span>)<\/span>}<\/span>\r\n      \/\/JS\u306b\u304a\u3051\u308bonInput\u304cReact\u306eonChange\u30a4\u30d9\u30f3\u30c8\u3068\u540c\u3058\uff08\u5909\u66f4\u3055\u308c\u305f\u6642\u306b\u767a\u706b\u3059\u308b\uff09\u3088\u3046\u306b\u306a\u308b<\/span>\r\n      \/\/ \u901a\u5e38JS\u3067\u306fonchange\u30a4\u30d9\u30f3\u30c8\u306f\u5165\u529b\u3092\u7d42\u3048\u3066\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5916\u308c\u305f\u6642\u306b\u52d5\u4f5c\u3059\u308b\u3002<\/span>\r\n      onBlur<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>onBlur\u691c\u77e5<\/span>\"<\/span>)<\/span>}<\/span>\r\n      \/\/ \u5165\u529b\u6b04\u304b\u3089\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u6d88\u3048\u305f\u6642\u3092\u691c\u77e5<\/span>\r\n      onFocus<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>onFocus\u691c\u77e5<\/span>\"<\/span>)<\/span>}<\/span>\r\n      \/\/ \u5165\u529b\u6b04\u304b\u3089\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f97\u305f\u6642\u3092\u691c\u77e5<\/span>\r\n        \/><\/span>\r\n      <\/<\/span>label<\/span>><\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>label<\/span>><\/span>\r\n          \u5165\u529b\u5024\u3092\u53d6\u5f97\uff1a\r\n          <<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span> \/><\/span>\r\n        <\/<\/span>label<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n    {<\/span>\/* \u30de\u30a6\u30b9\u30db\u30d0\u30fc\u6642\u3092\u691c\u77e5 *\/<\/span>}<\/span>\r\n      <<\/span>div<\/span>\r\n     className<\/span>=<\/span>\"hover-event\"<\/span>\r\n     \r\n     onInput<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>\u30ab\u30fc\u30bd\u30eb\u304c\u5165\u3063\u3066\u304d\u307e\u3057\u305f\u3002<\/span>\"<\/span>)<\/span>}<\/span>\r\n     onChange<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>\u30ab\u30fc\u30bd\u30eb\u304c\u5165\u3063\u3066\u304d\u307e\u3057\u305f\u3002<\/span>\"<\/span>)<\/span>}<\/span>\r\n        onMouseEnter<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>\u30ab\u30fc\u30bd\u30eb\u304c\u5165\u3063\u3066\u304d\u307e\u3057\u305f\u3002<\/span>\"<\/span>)<\/span>}<\/span>\r\n        onMouseLeave<\/span>=<\/span>{<\/span>()<\/span> =><\/span> console<\/span>.<\/span>log<\/span>(<\/span>\"<\/span>\u30ab\u30fc\u30bd\u30eb\u304c\u51fa\u3066\u3044\u304d\u307e\u3057\u305f\u3002<\/span>\"<\/span>)<\/span>}<\/span>\r\n    ><\/span>\r\n\r\n        \u30db\u30d0\u30fc\u3057\u3066\u306d\uff01\r\n      <\/<\/span>div<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528useState<\/h2>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n let<\/span> valArry<\/span> =<\/span> useState<\/span>(<\/span>\"<\/span>hello<\/span>\"<\/span>);<\/span>\r\n let<\/span> [<\/span>val<\/span>,<\/span> setVal<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>'<\/span>hello<\/span>'<\/span>);<\/span>\r\n \/\/ [0,f]<\/span>\r\n \/\/\u914d\u5217\u306e0\u756a\u76ee\u306b\u53c2\u7167\u7528\u306e\u5024\u304c\u6e21\u3063\u3066\u304d\u307e\u3059\u3002<\/span>\r\n \/\/ \u914d\u5217\u306e0\u756a\u76ee\uff1a\u53c2\u7167\u7528\u306e\u5024<\/span>\r\n \/\/ \u914d\u5217\u306e1\u756a\u76ee\uff1a\u66f4\u65b0\u7528\u306e\u95a2\u6570<\/span>\r\n \/\/ \u521d\u671f\u50240<\/span>\r\n \/\/ \u8aad\u307f\u8fbc\u307f\u7528\u3068<\/span>\r\n console<\/span>.<\/span>log<\/span>(<\/span>valArry<\/span>)<\/span>\r\n\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n   <<\/span>input<\/span>\r\n    type<\/span>=<\/span>\"text\"<\/span>\r\n    onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> {<\/span>\r\n     \/\/ const setFn = valArry[1];<\/span>\r\n     setVal<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>\r\n     \/\/ \u66f4\u65b0\u3055\u308c\u306a\u3044<\/span>\r\n    }<\/span>}<\/span> \/><\/span> = {<\/span>val<\/span>}<\/span>\r\n  <\/><\/span>\r\n );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u65e0\u8bba\u4fee\u6539\u53d8\u91cf\u7684\u503c\u5982\u4f55\uff0c\u5c4f\u5e55\u4e0a\u7684\u663e\u793a\u4e0d\u4f1a\u6539\u53d8\u7684\u539f\u56e0\u662f\uff1aReact\u9700\u8981\u8bf7\u6c42\u91cd\u65b0\u6267\u884c\uff08\u91cd\u65b0\u6e32\u67d3\uff09\u7ec4\u4ef6\uff0c\u5e76\u521b\u5efa\u65b0\u7684React\u5143\u7d20\u3002\u9700\u8981\u5c06\u4fee\u6539\u7684\u503c\u4fdd\u5b58\u5728\u67d0\u4e2a\u5730\u65b9\uff08\u4fdd\u5b58\u5728\u72b6\u6001\u4e2d\uff09\u3002useState\u662f\u5b9e\u73b0\u8fd9\u4e9b\u529f\u80fd\u7684\u673a\u5236\u3002<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n let<\/span> displayVal<\/span>;<\/span>\r\n \/\/2. Example\u304c\u5b9f\u884c\u3055\u308c\u308b\u305f\u3073\u306b\u5024\u304c\u7a7a\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002<\/span>\r\n  let<\/span> [<\/span> val<\/span>,<\/span> setVal<\/span> ]<\/span> =<\/span> useState<\/span>();<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3057\u305f<\/span>'<\/span>);<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>input<\/span>\r\n        type<\/span>=<\/span>\"text\"<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> {<\/span>\r\n          console<\/span>.<\/span>log<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          setVal<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          \/\/1. displayVal = e.target.value; onChange\u306b\u304a\u3063\u3066\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u308b<\/span>\r\n         }<\/span>}<\/span>\r\n      \/><\/span>\r\n    = {<\/span>val<\/span>}{<\/span>\/* \u3053\u306e\u30b3\u30fc\u30c9\u306fExample()\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044\u3068\u5909\u308f\u3089\u306a\u3044\/3.\u3055\u3089\u306bExample\u304c\u5b9f\u884c\u3055\u308c\u308b\u30682\u306e\u6319\u52d5\u3067\u7a7a\u304c\u53cd\u6620\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
1. \u8fde\u63a5hook\u8fdb\u5165React\u5185\u90e8\u3002\u4ee5\u4fbf\u7ba1\u7406\u72b6\u6001\u3002
\n2. \u8fd4\u56de\u5f53\u524d\u503c\u548c\u66f4\u65b0\u51fd\u6570\u3002
\n3. \u901a\u8fc7\u66f4\u65b0\u51fd\u6570\u5c06\u65b0\u503c\u4f20\u9012\u7ed9React\uff0c\u5e76\u8bf7\u6c42React\u91cd\u65b0\u6267\u884c\u81ea\u8eab\u7ec4\u4ef6\u3002<\/p>\n
\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u4fdd\u6301\u7684\u662fuseState\u3002<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n let<\/span> displayVal<\/span>;<\/span>\r\n \/\/2. Example\u304c\u5b9f\u884c\u3055\u308c\u308b\u305f\u3073\u306b\u5024\u304c\u7a7a\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002<\/span>\r\n  let<\/span> [<\/span> val<\/span>,<\/span> setVal<\/span> ]<\/span> =<\/span> useState<\/span>();<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3057\u305f<\/span>'<\/span>);<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>input<\/span>\r\n        type<\/span>=<\/span>\"text\"<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> {<\/span>\r\n          console<\/span>.<\/span>log<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          setVal<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          \/\/1. displayVal = e.target.value; onChange\u306b\u304a\u3063\u3066\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u308b<\/span>\r\n         }<\/span>}<\/span>\r\n      \/><\/span>\r\n    = {<\/span>val<\/span>}{<\/span>\/* \u3053\u306e\u30b3\u30fc\u30c9\u306fExample()\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044\u3068\u5909\u308f\u3089\u306a\u3044\/3.\u3055\u3089\u306bExample\u304c\u5b9f\u884c\u3055\u308c\u308b\u30682\u306e\u6319\u52d5\u3067\u7a7a\u304c\u53cd\u6620\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n \/\/ let displayVal;<\/span>\r\n \/\/2. Example\u304c\u5b9f\u884c\u3055\u308c\u308b\u305f\u3073\u306b\u5024\u304c\u7a7a\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002<\/span>\r\n  let<\/span> [<\/span> val<\/span>,<\/span> setVal<\/span> ]<\/span> =<\/span> useState<\/span>();<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3057\u305f<\/span>'<\/span>);<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>input<\/span>\r\n        type<\/span>=<\/span>\"text\"<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> {<\/span>\r\n          console<\/span>.<\/span>log<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          \/\/ displayVal =e.target.value<\/span>\r\n          setVal<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>);<\/span>\r\n          \/\/1. displayVal = e.target.value; onChange\u306b\u304a\u3063\u3066\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u308b<\/span>\r\n         }<\/span>}<\/span>\r\n      \/><\/span>\r\n    {<\/span>\/* = {displayVal} *\/<\/span>}<\/span>\r\n    {<\/span>\/* State\u3092\u5229\u7528\u3057\u306a\u3044\u3068\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u306a\u3044 *\/<\/span>}<\/span>\r\n    = {<\/span>val<\/span>}<\/span>\r\n    {<\/span>\/* \u3053\u306e\u30b3\u30fc\u30c9\u306fExample()\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044\u3068\u5909\u308f\u3089\u306a\u3044\/3.\u3055\u3089\u306bExample\u304c\u5b9f\u884c\u3055\u308c\u308b\u30682\u306e\u6319\u52d5\u3067\u7a7a\u304c\u53cd\u6620\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>```\r\n\r\n```<\/span>jsx<\/span>\r\nimport<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n console<\/span>.<\/span>log<\/span>(<<\/span>Example<\/span> \/>)<\/span>\r\n \/\/ _owner FiberNode<\/span>\r\n \/\/ memorizedState\u306b\u3066\u5024\u304c\u4fdd\u6301\u3055\u308c\u308b\u3002<\/span>\r\n \/\/ \u6b21\u306e\u5024\u306fnext\u306b\u5165\u3063\u3066\u3044\u308b\u3002<\/span>\r\n const<\/span> [<\/span>btnValA<\/span>,<\/span> setValA<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n \/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u3057\u304b\u547c\u3076\u3053\u3068\u304c\u3067\u304d\u306a\u3044useState<\/span>\r\n \/\/ if,for,while\u306a\u3069{}\u6587\u5185\u306b\u304a\u3044\u3066\u3082\u4f7f\u7528\u3067\u304d\u306a\u3044\u3002<\/span>\r\n \/\/ setValA\u306e\u95a2\u6570\u3068\u7d10\u4ed8\u3051\u3055\u308c\u305fbtnValA\u304c\u66f4\u65b0\u3055\u308c\u308b<\/span>\r\n const<\/span> [<\/span>btnValB<\/span>,<\/span> setValB<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>10<\/span>);<\/span>\r\n \/\/ \u9806\u756a\u3067\u5b9a\u7fa9\u3055\u308c\u305f\u3082\u306e\u4fdd\u6301\u3055\u308c\u308buseState<\/span>\r\n const<\/span> [<\/span> btnValC<\/span>,<\/span> setValC<\/span> ]<\/span> =<\/span> useState<\/span>(<\/span>100<\/span>);<\/span>\r\n \r\n const<\/span> btnCountUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n   setValA<\/span>(<\/span>btnValA<\/span> +<\/span> 1<\/span>);<\/span>\r\n }<\/span>\r\n const<\/span> btnCountUpB<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n   setValB<\/span>(<\/span>btnValA<\/span> +<\/span> 1<\/span>);<\/span>\/\/\u66f4\u65b0\u3055\u308c\u306a\u3044<\/span>\r\n }<\/span>\r\n const<\/span> btnCountUpC<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n   setValC<\/span>(<\/span>btnValC<\/span> +<\/span> 1<\/span>);<\/span>\r\n }<\/span>\r\n\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n   <<\/span>p<\/span>><\/span>\u30dc\u30bf\u30f3A\u3092{<\/span>btnValA<\/span>}<\/span>\u56de\u62bc\u3057\u307e\u3057\u305f\uff01<\/<\/span>p<\/span>><\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>btnCountUp<\/span>}<\/span>><\/span>\u30dc\u30bf\u30f3A<\/<\/span>button<\/span>><\/span>\r\n   <<\/span>p<\/span>><\/span>\u30dc\u30bf\u30f3B\u3092{<\/span>btnValB<\/span>}<\/span>\u56de\u62bc\u3057\u307e\u3057\u305f\uff01<\/<\/span>p<\/span>><\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>btnCountUpB<\/span>}<\/span>><\/span>\u30dc\u30bf\u30f3B<\/<\/span>button<\/span>><\/span>\r\n   <<\/span>p<\/span>><\/span>\u30dc\u30bf\u30f3A\u3092{<\/span>btnValC<\/span>}<\/span>\u56de\u62bc\u3057\u307e\u3057\u305f\uff01<\/<\/span>p<\/span>><\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>btnCountUpC<\/span>}<\/span>><\/span>\u30dc\u30bf\u30f3A<\/<\/span>button<\/span>><\/span>\r\n  <\/><\/span>\r\n );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n\r\n<\/code><\/pre>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n const<\/span> countUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>);<\/span>\/\/:\u5024\u306f1\/\/\u975e\u540c\u671f\u51e6\u7406\u3068\u306a\u308b\u3002<\/span>\r\n  setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>);<\/span>\/\/:\u5024\u306f1<\/span>\r\n  setCount<\/span>(<\/span>p<\/span> =><\/span> p<\/span> +<\/span> 100<\/span>);<\/span>\/\/:\u5024\u306f101 \u95a2\u6570\u306e\u5f15\u6570\u306f\u524d\u306e\u95a2\u6570\u306e\u7d50\u679c<\/span>\r\n  setCount<\/span>(<\/span>p<\/span> =><\/span> p<\/span> +<\/span> 1<\/span>);<\/span>\/\/:\u5024\u306f1<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>count<\/span>);<\/span>\r\n }<\/span>\r\n const<\/span> countDown<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  setCount<\/span>(<\/span>count<\/span> -<\/span> 1<\/span>);<\/span>\r\n  \r\n }<\/span>\r\n return <\/span>(<><\/span>\r\n  <<\/span>p<\/span>><\/span>\u73fe\u5728\u306e\u30ab\u30a6\u30f3\u30c8\u6570:{<\/span>count<\/span>}<\/span><\/<\/span>p<\/span>><\/span>\r\n  <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>countUp<\/span>)<\/span>}<\/span>><\/span>+<\/<\/span>button<\/span>><\/span>\r\n  <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>(<\/span>countDown<\/span>)<\/span>}<\/span>><\/span>-<\/<\/span>button<\/span>><\/span>\r\n <\/>);<\/span>\r\n  \r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
useState\u7684\u6ce8\u610f\u4e8b\u9879\u3002<\/h2>\n
\u7531\u4e8euseState\u51fd\u6570\u5177\u6709\u60f0\u6027\u6c42\u503c\u7684\u6982\u5ff5\uff0c
\n\u56e0\u6b64\u4e0d\u4f1a\u7acb\u5373\u6267\u884c\u3002
\n\u56e0\u6b64\uff0c\u5982\u679c\u8981\u5728\u51fd\u6570\u6267\u884c\u65f6\u53cd\u6620\u5f53\u524d\u72b6\u6001\uff0c
\n\u53ef\u4ee5\u901a\u8fc7\u5728set\u51fd\u6570\u5185\u90e8\u8bbe\u7f6e\u4e00\u4e2a\u51fd\u6570\u6765\u5f15\u7528\u5e76\u66f4\u65b0\u503c\u3002<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n  \r\n  const<\/span> countUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n   setCount<\/span>(<\/span>state<\/span> =><\/span> state<\/span> +<\/span> 1<\/span>);<\/span>\r\n   \/\/ \u73fe\u5728\u306e\u5024\u3092\u898b\u3066\u884c\u3046\u5834\u5408\u304c\u591a\u3044\u306e\u3067\u5e38\u6642\u4e0a\u8a18\u306e\u4f7f\u3044\u65b9\u3067\u5b9f\u65bd<\/span>\r\n  };<\/span>\r\n\r\n  const<\/span> countDown<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setCount<\/span>(<\/span>state<\/span> =><\/span> state<\/span> -<\/span> 1<\/span>);<\/span>\r\n  };<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>h3<\/span>><\/span>\u7df4\u7fd2\u554f\u984c<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>p<\/span>><\/span>\u73fe\u5728\u306e\u30ab\u30a6\u30f3\u30c8\u6570: {<\/span>count<\/span>}<\/span><\/<\/span>p<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countUp<\/span>}<\/span>><\/span>+<\/<\/span>button<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countDown<\/span>}<\/span>><\/span>-<\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
\u4f7f\u7528useState\u65f6\u9700\u8981\u6ce8\u610f\u7684\u4e00\u4e9b\u4e8b\u9879<\/h2>\n
\/\/ POINT \u539f\u59cb\u6570\u636e\u7c7b\u578b\uff1a1, “str”, bool, 10n, Symbol(), null, undefined
\n\/\/ POINT \u5bf9\u8c61\u7c7b\u578b\uff1a\u9664\u4e86{}\uff0c[]\u7b49\u539f\u59cb\u6570\u636e\u7c7b\u578b\u4e4b\u5916\u7684\u7c7b\u578b
\n\/\/ POINT \u5982\u679c\u8981\u66f4\u6539\u5bf9\u8c61\u7c7b\u578b\u7684\u72b6\u6001\uff0c\u5219\u5fc5\u987b\u521b\u5efa\u4e00\u4e2a\u65b0\u5bf9\u8c61\uff01<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> personObj<\/span> =<\/span> {<\/span> name<\/span>:<\/span> \"<\/span>Tom<\/span>\"<\/span>,<\/span> age<\/span>:<\/span> 18<\/span> };<\/span>\r\n const<\/span> [<\/span>person<\/span>,<\/span> setPerson<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>personObj<\/span>);<\/span>\r\n const<\/span> changeName<\/span> =<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> \r\n  setPerson<\/span>({<\/span> name<\/span>:<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>,<\/span> age<\/span>:<\/span> person<\/span>.<\/span>age<\/span> });<\/span>\r\n  \/\/ setPerson({ name: e.target.value, age: person.age });<\/span>\r\n  \/\/ age\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6d88\u3057\u3066\u3057\u307e\u3046\u3068\u66f4\u65b0\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u3001setPerson\u3092\u5b9f\u884c\u3059\u308b\u969b\u306b\u306f\u5fc5\u305a\u540c\u3058\u69cb\u9020\u3067\u8a18\u8f09\u3059\u308b\u3053\u3068\u3002<\/span>\r\n  }<\/span>\r\n const<\/span> changeAge<\/span> =<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> \r\n  setPerson<\/span>({<\/span> name<\/span>:<\/span> person<\/span>.<\/span>name<\/span>,<\/span> age<\/span>:<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span> });<\/span>\r\n\r\n }<\/span>\r\n const<\/span> reset<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n  setPerson<\/span>({<\/span> name<\/span>:<\/span> \"\"<\/span>,<\/span> age<\/span>:<\/span> \"\"<\/span> });<\/span>\r\n  }<\/span>\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n   <<\/span>h3<\/span>><\/span>Name:{<\/span>person<\/span>.<\/span>name<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   <<\/span>h3<\/span>><\/span>Age:{<\/span>person<\/span>.<\/span>age<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n   <<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"\"<\/span> onChange<\/span>=<\/span>{<\/span>changeName<\/span>}<\/span> id<\/span>=<\/span>\"\"<\/span> value<\/span>=<\/span>{<\/span>person<\/span>.<\/span>name<\/span>}<\/span> \/><\/span>\r\n   <<\/span>input<\/span> type<\/span>=<\/span>\"number\"<\/span> name<\/span>=<\/span>\"\"<\/span> onChange<\/span>=<\/span>{<\/span>changeAge<\/span>}<\/span> id<\/span>=<\/span>\"\"<\/span> value<\/span>=<\/span>{<\/span>person<\/span>.<\/span>age<\/span>}<\/span> \/><\/span>\r\n   <<\/span>div<\/span>><\/span>\r\n    <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>reset<\/span>}<\/span>><\/span>\u30ea\u30bb\u30c3\u30c8<\/<\/span>button<\/span>><\/span>\r\n   <\/<\/span>div<\/span>><\/span>\r\n  <\/><\/span>\r\n\r\n );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5173\u4e8e\u5bf9\u8c61\u7684useState\u5b50\u96c6\u3002<\/h2>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> orderObj<\/span> =<\/span> {<\/span> item<\/span>:<\/span> '<\/span>apple<\/span>'<\/span>,<\/span> count<\/span>:<\/span> 10<\/span> };<\/span>\r\n  const<\/span> [<\/span>order<\/span>,<\/span> setOrder<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>orderObj<\/span>);<\/span>\r\n const<\/span> changeItem<\/span> =<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span> setOrder<\/span>({<\/span> ...<\/span>order<\/span>,<\/span> item<\/span>:<\/span> e<\/span>.<\/span>target<\/span>.<\/span>value<\/span> })<\/span> };<\/span>\r\n \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u6f14\u7b97\u5b50\u3067\u5c55\u958b<\/span>\r\n const<\/span> countUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  setOrder<\/span>((<\/span>order<\/span>)<\/span> =><\/span> ({<\/span> ...<\/span>order<\/span>,<\/span> count<\/span>:<\/span> order<\/span>.<\/span>count<\/span> +<\/span> 1<\/span> }));<\/span>\r\n  \/\/ \u914d\u5217\u306b()\u3092\u3064\u3051\u308b\u306e\u306f\u914d\u5217\u304c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u306a\u306e\u304b\u3001\u3042\u308d\u30fc\u95a2\u6570\u306e\u95a2\u6570\u5f0f\u304b\u4e0d\u660e\u3067\u3042\u308b\u305f\u3081\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3059\u5834\u5408\u306b\u306f()\u5165\u308c\u308b\u3002<\/span>\r\n  };<\/span>\r\n const<\/span> countDown<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  setOrder<\/span>((<\/span>order<\/span>)<\/span> =><\/span> ({<\/span> ...<\/span>order<\/span>,<\/span> count<\/span>:<\/span> order<\/span>.<\/span>count<\/span> -<\/span> 1<\/span> }));<\/span>\r\n  };<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>\u7df4\u7fd2\u554f\u984c<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>p<\/span>><\/span>\r\n        \u8a18\u8ff0\u3092\u5909\u66f4\u3057\u3001\u5b8c\u6210\u30b3\u30fc\u30c9\u306e\u3088\u3046\u306b\u300c+\u3068-\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068Count\u306e\u8868\u793a\u304c1\u305a\u3064\u5897\u6e1b\u3059\u308b\u6a5f\u80fd\u300d\u3068\u300cinput\u8981\u7d20\u306b\u9023\u52d5\u3057\u3066Item\u306e\u8868\u793a\u304c\u5909\u66f4\u3055\u308c\u308b\u6a5f\u80fd\u300d\u3092\u5b9f\u88c5\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5916\u5074\uff08\u4e0a\u90e8\uff09\u306b\u5909\u6570\u3084\u95a2\u6570\u3092\u6e96\u5099\u3057\u3066\u3044\u308b\u305f\u3081\u3046\u307e\u304f\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002\r\n      <\/<\/span>p<\/span>><\/span>\r\n    <<\/span>h3<\/span>><\/span>Item:{<\/span>order<\/span>.<\/span>item<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>h3<\/span>><\/span>Count:{<\/span>order<\/span>.<\/span>count<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> value<\/span>=<\/span>{<\/span>order<\/span>.<\/span>item<\/span>}<\/span> onChange<\/span>=<\/span>{<\/span>changeItem<\/span>}<\/span> \/><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countUp<\/span>}<\/span>><\/span>+<\/<\/span>button<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countDown<\/span>}<\/span>><\/span>-<\/<\/span>button<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
useState\u6570\u7ec4<\/h2>\n
import<\/span> {<\/span>useState<\/span>}<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> numArray<\/span> =<\/span> [<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>,<\/span> 4<\/span>,<\/span> 5<\/span>];<\/span>\r\n const<\/span> [<\/span>nums<\/span>,<\/span> setNums<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>numArray<\/span>);<\/span>\r\n console<\/span>.<\/span>log<\/span>(<\/span>nums<\/span>);<\/span>\r\n const<\/span> shuffle<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> newNums<\/span> =<\/span> [...<\/span>nums<\/span>];<\/span>\r\n  \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u6f14\u7b97\u5b50\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002\u65b0\u3057\u3044\u914d\u5217\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002<\/span>\r\n  \/\/ newNums =nums\u306f\u914d\u5217\u304c\u30b3\u30d4\u30fc\u3067\u306f\u306a\u304f\u3001\u914d\u5217\u306e\u53c2\u7167\u3092\u30b3\u30d4\u30fc\u3057\u3066\u3044\u308b\u3002<\/span>\r\n  const<\/span> value<\/span> =<\/span> newNums<\/span>.<\/span>pop<\/span>();<\/span>\r\n  newNums<\/span>.<\/span>unshift<\/span>(<\/span>value<\/span>);<\/span>\r\n  setNums<\/span>(<\/span>newNums<\/span>);<\/span>\r\n  \/\/ \u914d\u5217\u306e\u672b\u5c3e\u304c\u524a\u9664<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>newNums<\/span>)<\/span>\r\n }<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n    <<\/span>h1<\/span>><\/span>{<\/span>nums<\/span>}<\/span><\/<\/span>h1<\/span>><\/span>\r\n    {<\/span>\/* {}\u3067\u5c55\u958b\u3055\u308c\u308b\u3068\u4e26\u3093\u3067\u8868\u793a\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n    <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>shuffle<\/span>}<\/span>><\/span>shuffle<\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u56fd\u5bb6<\/h2>\n
State \u6309\u7167\u7ec4\u4ef6\u8fdb\u884c\u4fdd\u6301\u3002<\/p>\n
\u6bcf\u4e2a\u7ec4\u4ef6\u7684\u76f8\u5173\u503c\u90fd\u662f\u72ec\u7acb\u7ba1\u7406\u7684\u3002<\/p>\n
\u901a\u8fc7React\u5143\u7d20\u6811\u4e2d\u7684\u4f4d\u7f6e\u6765\u8bc6\u522b\u54ea\u4e2a\u7ec4\u4ef6\u7684\u72b6\u6001\u3002<\/p>\n
\u5982\u679c\u5728React\u5143\u7d20\u6811\u7684\u7ec4\u4ef6\u4f4d\u7f6e\u4e0d\u53d8\u7684\u60c5\u51b5\u4e0b\uff0c\u72b6\u6001\u5c06\u4fdd\u6301\u4e0d\u53d8\u3002
\n\u7136\u800c\uff0c\u901a\u8fc7\u7ed9\u7ec4\u4ef6\u6dfb\u52a0key\u5c5e\u6027\uff0c\u5373\u4f7f\u662f\u540c\u4e00\u4f4d\u7f6e\u7684\u76f8\u540c\u7ec4\u4ef6\u4e5f\u80fd\u88ab\u8bc6\u522b\u4e3a\u4e0d\u540c\u7684\u5b9e\u4f53\u3002<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n\r\n const<\/span> [<\/span>toggle<\/span>,<\/span> setToggle<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>);<\/span>\r\n const<\/span> toggleComponent<\/span> =<\/span> ()<\/span> =><\/span> {<\/span> \r\n  setToggle<\/span>(<\/span>prev<\/span> =><\/span> !<\/span>prev<\/span>)<\/span>\r\n  }<\/span>\r\n return <\/span>(<\/span>\r\n  <><\/span>\r\n   <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>toggleComponent<\/span>}<\/span>><\/span>toggle<\/<\/span>button<\/span>><\/span>\r\n   {<\/span>toggle<\/span> ?<\/span> <<\/span>Count<\/span> title<\/span>=<\/span>\"A\"<\/span> \/><\/span> :<\/span> <<\/span>Count<\/span> title<\/span>=<\/span>\"B\"<\/span> \/><\/span>}<\/span> \r\n   {<\/span>\/* \u4e0a\u8a18\u306e\u5185\u5bb9\u3067\u306f\u8868\u793a\u4f4d\u7f6e\u304c\u5909\u308f\u3089\u306a\u3044 *\/<\/span>}<\/span>\r\n   {<\/span>\/* state\u306e\u5024\u3092\u5f15\u304d\u7d99\u3050\u3001\u540c\u3058\u4f4d\u7f6e\u3067\u5207\u308a\u66ff\u308f\u308b\u5834\u5408\u306b\u3064\u3044\u3066 *\/<\/span>}<\/span>\r\n   {<\/span>toggle<\/span> ?<\/span> <<\/span>Count<\/span> title<\/span>=<\/span>\"A\"<\/span> \/><\/span> :<\/span> <<\/span>div<\/span>><<\/span>Count<\/span> title<\/span>=<\/span>\"B\"<\/span> \/><\/<\/span>div<\/span>><\/span>}<\/span>\r\n   {<\/span>\/* \u4e0a\u8a18\u306e\u5834\u5408\u306b\u306fdiv\u304cB\u306b\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u30c4\u30ea\u30fc\u69cb\u9020\u304c\u5909\u308f\u308b\u3053\u3068\u304b\u3089\u5024\u304c\u5f15\u304d\u7d99\u304c\u308c\u306a\u3044 *\/<\/span>}<\/span>\r\n   <<\/span>Count<\/span> title<\/span>=<\/span>\"A\"<\/span> \/><\/span>\r\n   {<\/span>toggle<\/span> &&<\/span> <<\/span>Count<\/span> title<\/span>=<\/span>\"B\"<\/span> \/><\/span>}<\/span>\r\n   {<\/span>\/* \u4e0a\u8a18\u306e\u5834\u5408\u306b\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u6d88\u6ec5\u3059\u308b\u305f\u3081\u3001\u5024\u304c\u521d\u671f\u5316\u3055\u308c\u308b\u3002 *\/<\/span>}<\/span>\r\n   {<\/span>toggle<\/span> ?<\/span> <<\/span>Count<\/span> key<\/span>=<\/span>\"A\"<\/span> title<\/span>=<\/span>\"A\"<\/span> \/><\/span> :<\/span> <<\/span>Count<\/span> key<\/span>=<\/span>\"B\"<\/span> title<\/span>=<\/span>\"B\"<\/span> \/><\/span>}<\/span> \r\n   {<\/span>\/* \u4e0a\u8a18\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5024\u3092\u5225\u3005\u306b\u3057\u305f\u3044\u5834\u5408\u306b\u306fkey\u3068\u3044\u3046\u5c5e\u6027\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u4e00\u610f\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5024\u3092\u7ba1\u7406\u3067\u304d\u308b\u3002 *\/<\/span>}<\/span>\r\n  <\/><\/span>\r\n )<\/span>\r\n}<\/span>\r\nconst<\/span> Count<\/span> =<\/span> ({<\/span> title<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n  const<\/span> countUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setCount<\/span>((<\/span>prevstate<\/span>)<\/span> =><\/span> prevstate<\/span> +<\/span> 1<\/span>);<\/span>\r\n  };<\/span>\r\n const<\/span> countDown<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setCount<\/span>(<\/span>count<\/span> -<\/span> 1<\/span>);<\/span>\r\n  };<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>title<\/span>}<\/span>: {<\/span>count<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countUp<\/span>}<\/span>><\/span>+<\/<\/span>button<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countDown<\/span>}<\/span>><\/span>-<\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5c06state\u4f5c\u4e3aprops\u4f20\u9012\u7684\u60c5\u51b5\u4e0b<\/h2>\n
\u30fb\u5f53\u7ec4\u4ef6\u53ef\u80fd\u4f1a\u6d88\u5931\u65f6
\n\u30fb\u9700\u8981\u5728\u591a\u4e2a\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u5171\u4eab\u7279\u5b9a\u72b6\u6001\u65f6<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> Example<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n const<\/span> [<\/span>toggle<\/span>,<\/span> setToggle<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>true<\/span>);<\/span>\r\n const<\/span> [<\/span>countA<\/span>,<\/span> setCountA<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n const<\/span> [<\/span>countB<\/span>,<\/span> setCountB<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n  const<\/span> toggleComponent<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setToggle<\/span>(<\/span>prev<\/span> =><\/span> !<\/span>prev<\/span>);<\/span>\r\n  }<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n    <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>toggleComponent<\/span>}<\/span>><\/span>toggle<\/<\/span>button<\/span>><\/span>\r\n    {<\/span>\/* {toggle ? <Count key=\"A\" title=\"A\" count={count} setCount={setCount} \/> : <Count key=\"B\" title=\"B\" count={count} setCount={setCount} \/>} *\/<\/span>}<\/span>\r\n    {<\/span>\/* \u5b9a\u7fa9\u3057\u305fSTATE\u3092props\u3067\u6e21\u3059\uff08\u5024\u3092\u5171\u6709\u3059\u308b\uff09 *\/<\/span>}<\/span>\r\n     <<\/span>Count<\/span> key<\/span>=<\/span>\"A\"<\/span> title<\/span>=<\/span>\"A\"<\/span> count<\/span>=<\/span>{<\/span>countA<\/span>}<\/span> setCount<\/span>=<\/span>{<\/span>setCountA<\/span>}<\/span> \/><\/span> \r\n     <<\/span>Count<\/span> key<\/span>=<\/span>\"B\"<\/span> title<\/span>=<\/span>\"B\"<\/span> count<\/span>=<\/span>{<\/span>countB<\/span>}<\/span> setCount<\/span>=<\/span>{<\/span>setCountB<\/span>}<\/span> \/><\/span>\r\n    <\/><\/span>\r\n  )<\/span>\r\n}<\/span>\r\nconst<\/span> Count<\/span> =<\/span> ({<\/span> title<\/span>,<\/span>count<\/span>,<\/span>setCount<\/span> })<\/span> =><\/span> {<\/span>\r\n  \r\n  const<\/span> countUp<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setCount<\/span>((<\/span>prevstate<\/span>)<\/span> =><\/span> prevstate<\/span> +<\/span> 1<\/span>);<\/span>\r\n  };<\/span>\r\n  const<\/span> countDown<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    setCount<\/span>(<\/span>count<\/span> -<\/span> 1<\/span>);<\/span>\r\n  };<\/span>\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>h3<\/span>><\/span>{<\/span>title<\/span>}<\/span>: {<\/span>count<\/span>}<\/span><\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countUp<\/span>}<\/span>><\/span>+<\/<\/span>button<\/span>><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>countDown<\/span>}<\/span>><\/span>-<\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Example<\/span>;<\/span>\r\n<\/code><\/pre>\n
useState\uff1a\u7528\u4e8e\u5b58\u50a8\u503c\u5e76\u8bf7\u6c42\u91cd\u65b0\u6e32\u67d3\u7684\u94a9\u5b50\u51fd\u6570<\/p>\n
\u5728\u7ec4\u4ef6\u4e2d\u8c03\u7528\u3002<\/p>\n
\u5728\u4e2d\u6587\u4e2d\u4e0d\u8981\u5728if\u8bed\u53e5\u6216for\u5faa\u73af\u4e2d\u8c03\u7528\u3002<\/p>\n
\u30fb\u503c\u7684\u66f4\u65b0\u548c\u91cd\u65b0\u6e32\u67d3\u88ab\u9884\u7ea6\uff08\u5f02\u6b65\u8fdb\u884c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd0\u884cReact <!DOCTYPE html> <html> <head> […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38021","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5b66\u4e60React - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60react\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5b66\u4e60React\" \/>\n<meta property=\"og:description\" content=\"\u8fd0\u884cReact <!DOCTYPE html> <html> <head> […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-12T15:27:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T12:02:44+00:00\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/\",\"name\":\"\u5b66\u4e60React - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-11-12T15:27:28+00:00\",\"dateModified\":\"2024-04-29T12:02:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5b66\u4e60React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5b66\u4e60React - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60react\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5b66\u4e60React","og_description":"\u8fd0\u884cReact <!DOCTYPE html> <html> <head> […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60react\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-11-12T15:27:28+00:00","article_modified_time":"2024-04-29T12:02:44+00:00","author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"12 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/","name":"\u5b66\u4e60React - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-11-12T15:27:28+00:00","dateModified":"2024-04-29T12:02:44+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5b66\u4e60React"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0react\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38021"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38021\/revisions"}],"predecessor-version":[{"id":87350,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38021\/revisions\/87350"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}