{"id":37905,"date":"2023-07-10T12:07:12","date_gmt":"2023-09-18T01:07:02","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/"},"modified":"2024-04-30T12:52:19","modified_gmt":"2024-04-30T04:52:19","slug":"reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/","title":{"rendered":"[React][React\u6559\u7a0b]\u62fc\u97f3"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u6211\u4f7f\u7528React\u6559\u7a0b\u6765\u4e86\u89e3React.js\u3002
\n\u56e0\u6b64\uff0c\u6211\u4e3a\u6211\u5199\u7684\u4ee3\u7801\u6dfb\u52a0\u4e86\u81ea\u5df1\u7684\u6ce8\u97f3\uff0c\u6211\u5e0c\u671b\u5c06\u5176\u4fdd\u7559\u4e3a\u4e00\u7bc7\u6587\u7ae0\u3002<\/p>\n

\u6559\u7a0b\uff1a\u5f15\u5165 React<\/p>\n

import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/index.css<\/span>'<\/span>;<\/span>\r\n\r\nfunction<\/span> Square<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\r\n  return<\/span> (<\/span>\r\n    \/\/ \u76e4\u9762\u306b'X'\u307e\u305f\u306f'Y'\u3092\u8868\u793a\u3055\u305b\u308b<\/span>\r\n    <<\/span>button<\/span>\r\n      className<\/span>=<\/span>\"<\/span>square<\/span>\"<\/span>\r\n      onClick<\/span>=<\/span>{<\/span>props<\/span>.<\/span>onClick<\/span>}<\/span>><\/span>\r\n      {<\/span>props<\/span>.<\/span>value<\/span>}<\/span>\r\n    <<\/span>\/button<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n\r\nclass<\/span> Board<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  renderSquare<\/span>(<\/span>i<\/span>)<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      \/\/ \u30de\u30b9\u76ee\u306e\u756a\u53f7\u3067\u3042\u308b1~9\u306e\u6570\u5b57\u304c\u6e21\u3055\u308c\u3066\u304f\u308b<\/span>\r\n      <<\/span>Square<\/span>\r\n        value<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>squares<\/span>[<\/span>i<\/span>]}<\/span>\r\n        onClick<\/span>=<\/span>{()<\/span> =><\/span> this<\/span>.<\/span>props<\/span>.<\/span>onClick<\/span>(<\/span>i<\/span>)}<\/span>\r\n      \/<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      \/\/ \u5404\u30de\u30b9\u76ee\u306b\u3092\u756a\u53f7\u3092\u4ed8\u4e0e\u3059\u308b<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>board-row<\/span>\"<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>0<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>1<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>2<\/span>)}<\/span>\r\n        <<\/span>\/div<\/span>>\r\n<\/span>        <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>board-row<\/span>\"<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>3<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>4<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>5<\/span>)}<\/span>\r\n        <<\/span>\/div<\/span>>\r\n<\/span>        <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>board-row<\/span>\"<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>6<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>7<\/span>)}<\/span>\r\n          {<\/span>this<\/span>.<\/span>renderSquare<\/span>(<\/span>8<\/span>)}<\/span>\r\n        <<\/span>\/div<\/span>>\r\n<\/span>      <<\/span>\/div<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n\r\n\r\nclass<\/span> Game<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  constructor<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\r\n    super<\/span>(<\/span>props<\/span>);<\/span>\r\n    this<\/span>.<\/span>state<\/span> =<\/span> {<\/span>\r\n      \/\/ history\u306b\u5909\u5316\u3057\u3066\u3044\u304f\u76e4\u9762\u306e\u72b6\u614b\u3092\u90fd\u5ea6\u4fdd\u5b58\u3059\u308b<\/span>\r\n      history<\/span>:<\/span> [{<\/span>\r\n        \/\/ \u6700\u521d\u306e\u76e4\u9762\u306e\u72b6\u614b\u3068\u3057\u30663x3\u306e\u8a089\u30de\u30b9\u306b\u521d\u671f\u5024\u3068\u3057\u3066\u3001\u305d\u308c\u305e\u308c\u306bnull\u3092\u4fdd\u5b58\u3059\u308b<\/span>\r\n        squares<\/span>:<\/span> Array<\/span>(<\/span>9<\/span>).<\/span>fill<\/span>(<\/span>null<\/span>),<\/span>\r\n      }],<\/span>\r\n      \/\/ stepNumber\u3067\u4eca\u304c\u4f55\u624b\u76ee\u306a\u306e\u304b\u3092\u4fdd\u5b58\u3057\u3066\u3044\u304f<\/span>\r\n      stepNumber<\/span>:<\/span> 0<\/span>,<\/span>\r\n      \/\/ \u30d7\u30ec\u30a4\u3084\u30fc\u3092\u5224\u65ad\u3059\u308b<\/span>\r\n      \/\/ xIsNext = true\u306e\u6642\u306f'X', false\u306e\u6642\u306f'O',<\/span>\r\n      xIsNext<\/span>:<\/span> true<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n\r\n  handleClick<\/span>(<\/span>i<\/span>)<\/span> {<\/span>\r\n    \/\/ \u904e\u53bb\u306e\u5c65\u6b74\u306b\u623b\u3063\u305f\u969b\u306bstepNumber + 1\u4ee5\u964d\u306e\u30c7\u30fc\u30bf\u3092\u524a\u9664\u3057\u3066\u66f4\u65b0<\/span>\r\n    const<\/span> history<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>history<\/span>.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> this<\/span>.<\/span>state<\/span>.<\/span>stepNumber<\/span> +<\/span> 1<\/span>);<\/span>\r\n    const<\/span> current<\/span> =<\/span> history<\/span>[<\/span>history<\/span>.<\/span>length<\/span> -<\/span> 1<\/span>];<\/span>\r\n    const<\/span> squares<\/span> =<\/span> current<\/span>.<\/span>squares<\/span>.<\/span>slice<\/span>();<\/span>\r\n    \/\/ \u52dd\u8ca0\u304c\u3064\u3044\u3066\u3044\u308b\u5834\u5408\u3001return\u306b\u3088\u308ahandleClick\u3092\u7d42\u4e86\u3055\u305b\u5165\u529b\u3092\u3055\u305b\u306a\u3044<\/span>\r\n    if<\/span> (<\/span>calculateWinner<\/span>(<\/span>squares<\/span>)<\/span> ||<\/span> squares<\/span>[<\/span>i<\/span>])<\/span> {<\/span>\r\n      return<\/span>;<\/span>\r\n    }<\/span>\r\n    squares<\/span>[<\/span>i<\/span>]<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>xIsNext<\/span> ?<\/span> '<\/span>X<\/span>'<\/span> :<\/span> '<\/span>O<\/span>'<\/span>;<\/span>\r\n    this<\/span>.<\/span>setState<\/span>({<\/span>\r\n      \/\/ \u5143\u306ehistory\u3092\u66f4\u65b0\u3057\u306a\u3044\u305f\u3081\u306bconcat\u3092\u4f7f\u7528<\/span>\r\n      history<\/span>:<\/span> history<\/span>.<\/span>concat<\/span>([{<\/span>\r\n        squares<\/span>:<\/span> squares<\/span>,<\/span>\r\n      }]),<\/span>\r\n      \/\/ \u73fe\u5728\u306e\u624b\u6570\u3067\u66f4\u65b0<\/span>\r\n      stepNumber<\/span>:<\/span> history<\/span>.<\/span>length<\/span>,<\/span>\r\n      \/\/ !this.state.xIsNext\u3067\u6bce\u56detrue\u3068false\u3092\u53cd\u8ee2\u3055\u305b\u3066\u66f4\u65b0<\/span>\r\n      xIsNext<\/span>:<\/span> !<\/span>this<\/span>.<\/span>state<\/span>.<\/span>xIsNext<\/span>,<\/span>\r\n    });<\/span>\r\n  }<\/span>\r\n\r\n  jumpTo<\/span>(<\/span>step<\/span>)<\/span> {<\/span>\r\n    this<\/span>.<\/span>setState<\/span>({<\/span>\r\n      \/\/ stepNumber\u306b\u9078\u629e\u3055\u308c\u305f\u5c65\u6b74\u756a\u53f7(\u4f55\u624b\u76ee\u304b)\u3067\u66f4\u65b0<\/span>\r\n      stepNumber<\/span>:<\/span> step<\/span>,<\/span>\r\n      \/\/ \u9078\u629e\u3055\u308c\u305f\u5c65\u6b74\u306e\u30d7\u30ec\u30a4\u30e4\u30fc\u3092\u5224\u5b9a\u3059\u308b<\/span>\r\n      xIsNext<\/span>:<\/span> (<\/span>this<\/span> %<\/span> 2<\/span>)<\/span> ===<\/span> 0<\/span>,<\/span>\r\n    });<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    const<\/span> history<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>history<\/span>;<\/span>\r\n    \/\/ stepNumber\u3092\u57fa\u6e96\u306b\u76e4\u9762\u306e\u73fe\u72b6\u3092\u66f4\u65b0<\/span>\r\n    const<\/span> current<\/span> =<\/span> history<\/span>[<\/span>this<\/span>.<\/span>state<\/span>.<\/span>stepNumber<\/span>];<\/span>\r\n    \/\/ calculateWinner\u306b\u73fe\u72b6\u306e\u76e4\u9762\u60c5\u5831\u3092\u6e21\u3057\u52dd\u8005\u60c5\u5831\u3092winner\u306b\u4ee3\u5165<\/span>\r\n    const<\/span> winner<\/span> =<\/span> calculateWinner<\/span>(<\/span>current<\/span>.<\/span>squares<\/span>);<\/span>\r\n\r\n    \/\/ \u5c65\u6b74\u306b\u623b\u308b\u30dc\u30bf\u30f3\u3092\u5c65\u6b74\u6570\u5206\u4f5c\u6210\u3057\u3001moves\u306b\u4ee3\u5165<\/span>\r\n    const<\/span> moves<\/span> =<\/span> history<\/span>.<\/span>map<\/span>((<\/span>step<\/span>,<\/span> move<\/span>)<\/span> =><\/span> {<\/span>\r\n      \/\/ \u5c65\u6b74\u306e\u6709\u7121\u3067\u6761\u4ef6\u5206\u5c90\u3057\u3066\u30c6\u30ad\u30b9\u30c8\u3092\u4ee3\u5165<\/span>\r\n      const<\/span> desc<\/span> =<\/span> move<\/span> ?<\/span>\r\n        '<\/span>Go to move #<\/span>'<\/span> +<\/span> move<\/span> :<\/span>\r\n        '<\/span>Go to game start<\/span>'<\/span>;<\/span>\r\n      return<\/span> (<\/span>\r\n        \/\/ \u3053\u306e\u914d\u5217(\u5c65\u6b74)\u306f\u9014\u4e2d\u3067\u8981\u7d20\u306e\u5909\u66f4\u306a\u3069\u304c\u3055\u308c\u306a\u3044\u305f\u3081key\u306b\u306f\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u756a\u53f7\u3092\u4f7f\u7528\u3057\u307e\u3059<\/span>\r\n        <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>move<\/span>}<\/span>><\/span>\r\n          {<\/span>\/* \u5c65\u6b74\u306b\u623b\u308b\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\r\n          \u62bc\u3055\u308c\u308b\u3068jumpTo\u95a2\u6570\u3092\u30b3\u30fc\u30eb\u3057\u3001\u623b\u308b\u5c65\u6b74\u306e\u756a\u53f7\u3092\u6e21\u3059 *\/<\/span>}<\/span>\r\n          <<\/span>button<\/span> onClick<\/span>=<\/span>{()<\/span> =><\/span> this<\/span>.<\/span>jumpTo<\/span>(<\/span>move<\/span>)}<\/span>><\/span>\r\n            {<\/span>desc<\/span>}<\/span>\r\n          <<\/span>\/button<\/span>>\r\n<\/span>        <<\/span>\/li<\/span>>\r\n<\/span>      );<\/span>\r\n    });<\/span>\r\n\r\n    \/\/ \u30b2\u30fc\u30e0\u72b6\u6cc1\u306b\u5fdc\u3058\u3066status\u306b\u30a2\u30ca\u30a6\u30f3\u30b9\u3059\u308b\u6587\u3092\u4ee3\u5165\u3059\u308b<\/span>\r\n    let<\/span> status<\/span>;<\/span>\r\n    if<\/span> (<\/span>winner<\/span>)<\/span> {<\/span>\r\n      \/\/ \u52dd\u8005\u304c\u3044\u308b\u5834\u5408(\u30b2\u30fc\u30e0\u304c\u7d42\u4e86\u3057\u305f\u5834\u5408)<\/span>\r\n      status<\/span> =<\/span> '<\/span>Winner: <\/span>'<\/span> +<\/span> winner<\/span>;<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      \/\/ \u52dd\u8005\u304c\u3044\u306a\u3044\u5834\u5408(\u30b2\u30fc\u30e0\u304c\u7d99\u7d9a\u3059\u308b\u5834\u5408)<\/span>\r\n      \/\/ xIsNext\u306e\u771f\u507d\u77e5\u306b\u3088\u3063\u3066\u6b21\u306e\u30d7\u30ec\u30fc\u30e4\u30fc('X' \u307e\u305f\u306f 'O')\u3092\u8868\u793a\u3059\u308b<\/span>\r\n      status<\/span> =<\/span> '<\/span>Next player: <\/span>'<\/span> +<\/span> (<\/span>this<\/span>.<\/span>state<\/span>.<\/span>xIsNext<\/span> ?<\/span> '<\/span>X<\/span>'<\/span> :<\/span> '<\/span>O<\/span>'<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>game<\/span>\"<\/span>><\/span>\r\n        <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>game-board<\/span>\"<\/span>><\/span>\r\n          <<\/span>Board<\/span>\r\n            squares<\/span>=<\/span>{<\/span>current<\/span>.<\/span>squares<\/span>}<\/span>\r\n            onClick<\/span>=<\/span>{(<\/span>i<\/span>)<\/span> =><\/span> this<\/span>.<\/span>handleClick<\/span>(<\/span>i<\/span>)}<\/span>\r\n          \/<\/span>>\r\n<\/span>        <<\/span>\/div<\/span>>\r\n<\/span>        <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>game-info<\/span>\"<\/span>><\/span>\r\n          <<\/span>div<\/span>><\/span>{<\/span>status<\/span>}<\/span><<\/span>\/div<\/span>>\r\n<\/span>          {<\/span>\/* \u4f5c\u6210\u3057\u305f\u904e\u53bb\u306e\u5c65\u6b74\u306b\u623b\u308b\u30dc\u30bf\u30f3\u3092\u8868\u793a *\/<\/span>}<\/span>\r\n          <<\/span>ol<\/span>><\/span>{<\/span>moves<\/span>}<\/span><<\/span>\/ol<\/span>>\r\n<\/span>        <<\/span>\/div<\/span>>\r\n<\/span>      <<\/span>\/div<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n\/\/ ========================================<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>Game<\/span> \/><\/span>,<\/span>\r\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n\/\/ \u52dd\u3061\u5224\u5b9a\u30e1\u30bd\u30c3\u30c9<\/span>\r\nfunction<\/span> calculateWinner<\/span>(<\/span>squares<\/span>)<\/span> {<\/span>\r\n  \/\/ \u5168\u3066\u306e\u52dd\u3061\u30d1\u30bf\u30fc\u30f3\u3092\u914d\u5217\u4ee3\u5165\u3059\u308b<\/span>\r\n  const<\/span> lines<\/span> =<\/span> [<\/span>\r\n    [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>],<\/span>\r\n    [<\/span>3<\/span>,<\/span> 4<\/span>,<\/span> 5<\/span>],<\/span>\r\n    [<\/span>6<\/span>,<\/span> 7<\/span>,<\/span> 8<\/span>],<\/span>\r\n    [<\/span>0<\/span>,<\/span> 3<\/span>,<\/span> 6<\/span>],<\/span>\r\n    [<\/span>1<\/span>,<\/span> 4<\/span>,<\/span> 7<\/span>],<\/span>\r\n    [<\/span>2<\/span>,<\/span> 5<\/span>,<\/span> 8<\/span>],<\/span>\r\n    [<\/span>0<\/span>,<\/span> 4<\/span>,<\/span> 8<\/span>],<\/span>\r\n    [<\/span>2<\/span>,<\/span> 4<\/span>,<\/span> 6<\/span>],<\/span>\r\n  ];<\/span>\r\n  \/\/ \u52dd\u3061\u30d1\u30bf\u30fc\u30f3\u306e\u6570\u3060\u3051\u7e70\u308a\u8fd4\u3059<\/span>\r\n  for<\/span> (<\/span>let<\/span> i<\/span> =<\/span> 0<\/span>;<\/span> i<\/span> <<\/span> lines<\/span>.<\/span>length<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\r\n    \/\/ lines\u304b\u3089\u53d6\u308a\u51fa\u3057\u305f\u8981\u7d20\u3092\u3001\u3055\u3089\u306b\uff11\u3064\u305a\u3064a,b,c\u306b\u4ee3\u5165\u3059\u308b<\/span>\r\n    const<\/span> [<\/span>a<\/span>,<\/span> b<\/span>,<\/span> c<\/span>]<\/span> =<\/span> lines<\/span>[<\/span>i<\/span>];<\/span>\r\n    \/\/ \u73fe\u5728\u306e\u76e4\u9762\u304c\u52dd\u3061\u30d1\u30bf\u30fc\u30f3\u3068\u4e00\u81f4\u3057\u3066\u3044\u308b\u304b\u3092\u5224\u5b9a<\/span>\r\n    if<\/span> (<\/span>squares<\/span>[<\/span>a<\/span>]<\/span> &&<\/span> squares<\/span>[<\/span>a<\/span>]<\/span> ===<\/span> squares<\/span>[<\/span>b<\/span>]<\/span> &&<\/span> squares<\/span>[<\/span>a<\/span>]<\/span> ===<\/span> squares<\/span>[<\/span>c<\/span>])<\/span> {<\/span>\r\n      \/\/ \u4e00\u81f4\u3057\u3066\u3044\u308c\u3070\u52dd\u8005('X' \u307e\u305f\u306f 'O')\u3092\u8fd4\u3059<\/span>\r\n      return<\/span> squares<\/span>[<\/span>a<\/span>];<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n  \/\/ \u52dd\u8005\u304c\u3044\u306a\u3051\u308c\u3070null\u3092\u8fd4\u3059<\/span>\r\n  return<\/span> null<\/span>;<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u9996\u5148 \u6211\u4f7f\u7528React\u6559\u7a0b\u6765\u4e86\u89e3React.js\u3002 \u56e0\u6b64\uff0c\u6211\u4e3a\u6211\u5199\u7684\u4ee3\u7801\u6dfb\u52a0\u4e86\u81ea\u5df1\u7684\u6ce8\u97f3\uff0c\u6211\u5e0c\u671b\u5c06\u5176\u4fdd\u7559\u4e3a\u4e00\u7bc7 […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-37905","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n[React][React\u6559\u7a0b]\u62fc\u97f3 - 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\/reactreact\u6559\u7a0b\u62fc\u97f3\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[React][React\u6559\u7a0b]\u62fc\u97f3\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u6211\u4f7f\u7528React\u6559\u7a0b\u6765\u4e86\u89e3React.js\u3002 \u56e0\u6b64\uff0c\u6211\u4e3a\u6211\u5199\u7684\u4ee3\u7801\u6dfb\u52a0\u4e86\u81ea\u5df1\u7684\u6ce8\u97f3\uff0c\u6211\u5e0c\u671b\u5c06\u5176\u4fdd\u7559\u4e3a\u4e00\u7bc7 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact\u6559\u7a0b\u62fc\u97f3\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-18T01:07:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T04:52:19+00:00\" \/>\n<meta name=\"author\" content=\"\u6e05, \u626c\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u626c\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \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\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/\",\"name\":\"[React][React\u6559\u7a0b]\u62fc\u97f3 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-09-18T01:07:02+00:00\",\"dateModified\":\"2024-04-30T04:52:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[React][React\u6559\u7a0b]\u62fc\u97f3\"}]},{\"@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\/cb5556d2501da73d864cac945e8d9461\",\"name\":\"\u6e05, \u626c\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u626c\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"[React][React\u6559\u7a0b]\u62fc\u97f3 - 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\/reactreact\u6559\u7a0b\u62fc\u97f3\/","og_locale":"zh_CN","og_type":"article","og_title":"[React][React\u6559\u7a0b]\u62fc\u97f3","og_description":"\u9996\u5148 \u6211\u4f7f\u7528React\u6559\u7a0b\u6765\u4e86\u89e3React.js\u3002 \u56e0\u6b64\uff0c\u6211\u4e3a\u6211\u5199\u7684\u4ee3\u7801\u6dfb\u52a0\u4e86\u81ea\u5df1\u7684\u6ce8\u97f3\uff0c\u6211\u5e0c\u671b\u5c06\u5176\u4fdd\u7559\u4e3a\u4e00\u7bc7 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact\u6559\u7a0b\u62fc\u97f3\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-09-18T01:07:02+00:00","article_modified_time":"2024-04-30T04:52:19+00:00","author":"\u6e05, \u626c","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u626c","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/","name":"[React][React\u6559\u7a0b]\u62fc\u97f3 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-09-18T01:07:02+00:00","dateModified":"2024-04-30T04:52:19+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"[React][React\u6559\u7a0b]\u62fc\u97f3"}]},{"@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\/cb5556d2501da73d864cac945e8d9461","name":"\u6e05, \u626c","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","caption":"\u6e05, \u626c"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/reactreact%e6%95%99%e7%a8%8b%e6%8b%bc%e9%9f%b3\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37905","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=37905"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37905\/revisions"}],"predecessor-version":[{"id":92020,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37905\/revisions\/92020"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=37905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=37905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=37905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}