{"id":38354,"date":"2023-05-02T00:48:05","date_gmt":"2023-07-21T18:14:44","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/react%e6%9c%af%e8%af%ad%e6%a6%82%e8%bf%b0\/"},"modified":"2024-04-30T02:13:52","modified_gmt":"2024-04-29T18:13:52","slug":"react%e6%9c%af%e8%af%ad%e6%a6%82%e8%bf%b0","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/react%e6%9c%af%e8%af%ad%e6%a6%82%e8%bf%b0\/","title":{"rendered":"React\u672f\u8bed\u6982\u8ff0"},"content":{"rendered":"

\u6211\u4e3a\u81ea\u5df1\u6574\u7406\u4e86\u4e00\u4e9b\u5728React\u4e2d\u4f7f\u7528\u7684\u672f\u8bed\u7b49\u5185\u5bb9\u3002\u5982\u679c\u6709\u4efb\u4f55\u8bef\u89e3\u7684\u5730\u65b9\uff0c\u8bf7\u544a\u8bc9\u6211\u3002<\/p>\n

React\u6709\u54ea\u4e9b\u529f\u80fd\u53ef\u4ee5\u5b9e\u73b0\uff1f<\/h2>\n

\u7528JavaScript\u51e0\u4e4e\u53ef\u4ee5\u5b8c\u6210\u5e7b\u706f\u7247\u3001\u5f39\u51fa\u7a97\u53e3\u3001\u5012\u8ba1\u65f6\u3001\u81ea\u52a8\u5316\u8f93\u5165\u91d1\u989d\u3001\u6d4f\u89c8\u5668\u63a7\u5236\u548cAjax\u7b49\u529f\u80fd\u3002<\/p>\n

\u7ec4\u4ef6<\/h2>\n

\u7ec4\u4ef6\u662f\u6307\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u90e8\u4ef6\u3002
\n\u5b83\u5e76\u4e0d\u662f\u5c06\u6240\u6709\u8981\u7d20\u90fd\u5199\u5728\u4e00\u4e2a\u6587\u4ef6\u4e2d\u4ee5\u5728\u4e00\u4e2a\u9875\u9762\u4e0a\u663e\u793a\uff0c\u800c\u662f\u5c06\u663e\u793a\u7684\u8981\u7d20\u7ec6\u5206\u4e3a\u6309\u94ae\u7ec4\u4ef6\u3001\u8868\u5355\u7ec4\u4ef6\u7b49\uff0c\u5c06\u5176\u4f5c\u4e3a\u90e8\u4ef6\u8fdb\u884c\u5904\u7406\uff0c\u7136\u540e\u7edf\u4e00\u663e\u793a\u7684\u6982\u5ff5\u3002<\/p>\n

\u4ee3\u7801\u5f15\u81eahttps:\/\/ja.legacy.reactjs.org\/docs\/components-and-props.html<\/p>\n

\u7c7b\u7ec4\u4ef6<\/h4>\n
class Welcome extends React.Component {\r\n  render() {\r\n    return <h1>Hello, {this.props.name}<\/h1>;\r\n  }\r\n}\r\n<\/code><\/pre>\n
\u51fd\u6570\u7ec4\u4ef6<\/h4>\n
function Welcome(props) {\r\n  return <h1>Hello, {props.name}<\/h1>;\r\n}\r\n<\/code><\/pre>\n
web\u5e94\u7528\u7a0b\u5e8f\u4e0d\u4ec5\u4ec5\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u5185\u5bb9\uff0c\u8fd8\u53ef\u4ee5\u5f02\u6b65\u4fdd\u5b58\u6570\u636e\uff0c\u8c03\u7528\u65b0\u56fe\u7247\u5e76\u5220\u9664\u65e7\u56fe\u7247\u7b49\uff0c\u901a\u5e38\u4f1a\u6d89\u53ca\u591a\u4e2a\u5904\u7406\u8fc7\u7a0b\u3002<\/p>\n
\u5c06\u8fd9\u4e9b\u591a\u4e2a\u5904\u7406\u8fc7\u7a0b\u5408\u5e76\u5728\u4e00\u8d77\u7684\u65b9\u6cd5\u5c31\u662f\u51fd\u6570\u3002<\/p>\n
\u5728\u4e0a\u8ff0\u4ee3\u7801\u4e2d\uff0c\u6b22\u8fce\u51fd\u6570\u4f1a\u5728h1\u6807\u7b7e\u4e2d\u663e\u793a\u201cHello\uff0c{\u4f20\u5165\u53c2\u6570\u4e2d\u7684\u540d\u5b57}\u201d\u3002<\/p>\n
\u57fa\u672c\u5f62\u5f0f\u662f\u901a\u8fc7return\u8fd4\u56de\u8981\u663e\u793a\u7684\u5143\u7d20\uff08\u6216\u8005\u7ec4\u4ef6\uff09\u3002<\/p>\n
\u901a\u5e38\u60c5\u51b5\u4e0b\uff0creturn null;\u6216return false;\u4f1a\u8fd4\u56de\u4e00\u4e2a\u7a7a\u5143\u7d20\u3002<\/p>\n
\u8fd9\u5df2\u7ecf\u6210\u4e3a\u4e3b\u6d41\u505a\u6cd5\u3002<\/p>\n
\u54cd\u5e94\u5f0f\u94a9\u5b50<\/h2>\n
Hooks\u662f\u53ef\u4ee5\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6dfb\u52a0\u5404\u79cd\u529f\u80fd\u7684\u4e1c\u897f\uff0c\u5b83\u5f15\u53d1\u4e86React\u7684\u6d41\u884c\u3002React Hooks\u5177\u6709\u591a\u79cd\u529f\u80fd\u3002<\/p>\n
JSX \u662f\u4e00\u79cd JavaScript \u8bed\u6cd5\u6269\u5c55\u3002<\/h2>\n
\u300cJSX\u300d\u662f\u300cJavaScript XML\u300d\u7684\u7f29\u5199\u3002\u5b83\u662fJavaScript\u7684\u6269\u5c55\u529f\u80fd\uff0c\u7528\u4e8e\u7f16\u5199HTML\u6807\u8bb0\u3002\u5b83\u5c06\u7ec4\u4ef6\u5316\uff08React\u5c06HTML\/CSS\/JavaScript\u6346\u7ed1\u5728\u4e00\u8d77\u4f5c\u4e3a\u7ec4\u4ef6\uff09\u3002<\/p>\n
\u4f7f\u7528