{"id":6462,"date":"2024-08-07T21:01:01","date_gmt":"2024-08-07T13:01:01","guid":{"rendered":""},"modified":"2024-08-07T21:01:01","modified_gmt":"2024-08-07T13:01:01","slug":"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js","status":"publish","type":"post","link":"https:\/\/mushiming.com\/6462.html","title":{"rendered":"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js"},"content":{"rendered":"

\n <\/path> \n<\/svg> <\/p>\n

\u89c6\u9891\u5730\u5740<\/h2>\n

https:\/\/www.bilibili.com\/video\/BV1wy4y1D7JT<\/p>\n

\u5165\u95e8<\/h2>\n

React\u662f\u4ec0\u4e48<\/h3>\n

\"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n

\u4f7f\u7528 React \u6846\u67b6\u7684\u7a0b\u5e8f\uff0c\u5c55\u73b0\u9875\u9762\u9700\u8981\u5206\u4e09\u6b65\uff1a<\/p>\n

    \n
  1. \u53d1\u9001\u8bf7\u6c42\u83b7\u53d6\u6570\u636e<\/li>\n
  2. \u5904\u7406\u6570\u636e\uff08\u8fc7\u6ee4\u3001\u6574\u7406\u683c\u5f0f\u7b49\uff09<\/li>\n
  3. \u64cd\u4f5cDOM\u5448\u73b0\u9875\u9762<\/strong><\/li>\n<\/ol>\n

    React \u53ea\u8d1f\u8d23\u7b2c\u4e09\u6b65\uff01<\/p>\n

    \n

    React<\/strong>\uff1a\u662f\u4e00\u4e2a\u5c06\u6570\u636e\u6e32\u67d3\u4e3a HTML \u89c6\u56fe\u7684\u5f00\u6e90 JavaScript \u5e93<\/p>\n<\/blockquote>\n

    \u53d1\u5c55\u53f2<\/h3>\n
      \n
    1. \u8d77\u521d\u7531 Facebook \u7684\u8f6f\u4ef6\u5de5\u7a0b\u5e08 Jordan Walke \u521b\u5efa<\/li>\n
    2. \u4e8e 2011 \u5e74\u90e8\u7f72\u4e8e Facebook \u7684 newsfeed \u7a0b\u5e8f<\/li>\n
    3. \u968f\u540e\u5728 2012 \u5e74\u90e8\u7f72\u4e8e Instagram<\/li>\n
    4. 2013 \u5e74 5 \u6708\u5ba3\u5e03\u5f00\u6e90<\/li>\n
    5. \u8fd1 10 \u5e74\u9648\u917f\uff0cReact \u6b63\u5728\u88ab\u817e\u8baf\u3001\u963f\u91cc\u7b49\u4e00\u7ebf\u5927\u5382\u5e7f\u6cdb\u4f7f\u7528<\/li>\n<\/ol>\n

      \u4e3a\u4ec0\u4e48\u8981\u5b66React<\/h3>\n

      \u56e0\u4e3a\u539f\u751f JS \u9762\u4e34\u5f88\u591a\u75db\u70b9\uff1a<\/p>\n

        \n
      1. \u539f\u751f JS \u64cd\u4f5c DOM \u65f6\u5f88\u7e41\u7410\uff0c\u6548\u7387\u4f4e\uff0c\u9700\u8981\u4f7f\u7528 DOM \u7684 API \u53bb\u64cd\u4f5c\u754c\u9762 UI<\/strong><\/li>\n
      2. \u4f7f\u7528 JS \u76f4\u63a5\u64cd\u4f5c DOM\uff0c\u6d4f\u89c8\u5668\u4f1a\u8fdb\u884c\u5927\u91cf\u7684\u91cd\u7ed8\u91cd\u6392<\/strong><\/li>\n
      3. \u539f\u751f JS \u6ca1\u6709 \u7ec4\u4ef6\u5316<\/strong> \u7f16\u7801\u65b9\u6848\uff0c\u4ee3\u7801\u590d\u7528\u7387\u4f4e<\/li>\n<\/ol>\n

        React\u7684\u7279\u70b9<\/h3>\n
          \n
        1. \u91c7\u7528\u7ec4\u4ef6\u5316<\/strong>\u6a21\u5f0f\u3001\u58f0\u660e\u5f0f\u7f16\u7801<\/strong>\uff0c\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u53ca\u7ec4\u4ef6\u590d\u7528\u7387<\/li>\n
        2. \u5728 React Native \u4e2d\u53ef\u4ee5\u4f7f\u7528 React \u8bed\u6cd5\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1<\/strong><\/li>\n
        3. \u4f7f\u7528\u865a\u62df DOM<\/strong> \u548c\u4f18\u79c0\u7684 Diffing \u7b97\u6cd5<\/strong>\uff0c\u5c3d\u91cf\u51cf\u5c11\u4e0e\u771f\u5b9e DOM \u7684\u4ea4\u4e92<\/li>\n<\/ol>\n

          \u865a\u62dfDOM\u7684\u4f18\u52bf<\/h4>\n

          \u5047\u8bbe\u5148\u5c06\u4e24\u4e2a\u4eba\u7684\u6570\u636e\u6e32\u67d3\u5230\u9875\u9762\u4e0a\uff0c\u7136\u540e\u60f3\u8981\u6e32\u67d3\u7b2c\u4e09\u4e2a\u4eba\uff1a<\/p>\n

          \u771f\u5b9e DOM\uff1a
          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n

          \u865a\u62df DOM\uff1a<\/p>\n

          \u6570\u7ec4\u4e2d\u6dfb\u52a0 \u2018\u8096\u6218\u2019 \u540e\uff0c\u65b0\u7684\u865a\u62df DOM \u4f1a\u548c\u65e7\u7684\u865a\u62df DOM \u8fdb\u884c\u6bd4\u8f83\uff0c\u53d1\u73b0\u4e4b\u524d\u7684 \u2018\u9e7f\u6657\u2019 \u548c \u2018\u674e\u73b0\u2019 \u6ca1\u6709\u53d8\u5316\uff0c\u53ea\u662f\u591a\u4e86\u4e2a \u2018\u8096\u6218\u2019\uff0c\u6240\u4ee5\u9875\u9762\u771f\u5b9e DOM \u4e2d\u7684 \u2018\u9e7f\u6657\u2019 \u548c \u2018\u674e\u73b0\u2019 \u4e5f\u6ca1\u6709\u91cd\u65b0\u6e32\u67d3\uff0c\u53ea\u662f\u65b0\u589e\u4e86\u4e00\u4e2a \u2018\u8096\u6218\u2019
          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n

          DOM\u7684diffing\u7b97\u6cd5<\/h4>\n

          \u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u65b0\u65e7\u865a\u62df DOM \u7684\u6bd4\u8f83\u4f7f\u7528\u7684\u662f diffing \u7b97\u6cd5<\/p>\n

          diffing \u7b97\u6cd5\u7684\u6700\u5c0f\u6bd4\u8f83\u5355\u4f4d\u662f\u4e00\u4e2a\u6807\u7b7e<\/p>\n

          class Diffing extends React.Component { state = { now: new Date() } componentDidMount() { setInterval(() => { this.setState({ now: new Date() }) }, 1000); } render() { return ( <div> {\/* \u6b64\u5904\u7684input\u4e0d\u4f1a\u88ab\u66f4\u65b0 *\/} <input type=\"text\" \/> <p> {\/* \u867d\u7136\u6b64\u5904input\u5904\u4e8ep\u6807\u7b7e\u5185\uff0c\u4e14\u53d1\u751f\u53d8\u5316\u7684now\u5b57\u6bb5\u4e5f\u5904\u4e8ep\u6807\u7b7e\u5185\uff0c \u4f46\u662f\u7531\u4e8ediffing\u7684\u6700\u5c0f\u6bd4\u8f83\u5355\u4f4d\u662f\u4e00\u4e2a\u6807\u7b7e\uff0c\u6240\u4ee5\u6b64\u5904\u7684input\u5e76\u4e0d\u4f1a\u88ab\u66f4\u65b0\uff1b \u5373\u4f7finput\u91cc\u9762\u7684value\u503c\u53d8\u4e86\uff0c\u4f46\u662f\u865a\u62dfDOM\u662f\u62ff\u4e0d\u5230\u771f\u5b9eDOM\u7684value\u503c\u7684*\/} <input type=\"text\" \/> \u5f53\u524d\u65f6\u95f4\u4e3a\uff1a{this.state.now.toTimeString()} <\/p> <\/div> ) } } ReactDOM.render(<Diffing \/>, document.getElementById('test')) <\/code><\/pre>\n
          JS\u524d\u7f6e\u77e5\u8bc6<\/h3>\n
          \u5b66\u4e60 React \u4e4b\u524d\u5fc5\u987b\u638c\u63e1\u4ee5\u4e0b JS \u77e5\u8bc6\uff1a<\/p>\n
            \n
          • \u5224\u65ad this \u7684\u6307\u5411<\/li>\n
          • class \u7c7b<\/li>\n
          • ES6 \u8bed\u6cd5\u89c4\u8303<\/li>\n
          • npm \u5305\u7ba1\u7406\u5668<\/li>\n
          • \u539f\u578b\u3001\u539f\u578b\u94fe<\/li>\n
          • \u6570\u7ec4\u5e38\u7528\u65b9\u6cd5<\/li>\n
          • \u6a21\u5757\u5316<\/li>\n<\/ul>\n
            React\u57fa\u672c\u4f7f\u7528<\/h3>\n
            <<\/span>body<\/span>><\/span><\/span> <!-- \u51c6\u5907\u4e00\u4e2a\u5bb9\u5668 --><\/span> <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>test\"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span> <!-- \u5f15\u5165react\u6838\u5fc3\u5e93 --><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span> src<\/span>=<\/span>\"<\/span>..\/js\/react.development.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <!-- \u5f15\u5165react-dom\uff0c\u7528\u4e8e\u652f\u6301react\u64cd\u4f5cdom --><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span> src<\/span>=<\/span>\"<\/span>..\/js\/react-dom.development.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <!-- \u5f15\u5165babel\uff0c\u7528\u4e8e\u5c06jsx\u8f6c\u6210js --><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span> src<\/span>=<\/span>\"<\/span>..\/js\/babel.min.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <!-- \u6b64\u5904\u4e00\u5b9a\u8981\u5199babel --><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/babel\"<\/span><\/span>><\/span><\/span> \/\/ 1. \u521b\u5efa\u865a\u62dfDOM<\/span> const<\/span> VDOM<\/span> =<\/span> <<\/span>h1><\/span>Hello,<\/span>React<<\/span>\/<\/span>h1><\/span> \/\/ \u6b64\u5904\u4e0d\u80fd\u52a0\u5f15\u53f7<\/span> \/\/ 2. \u6e32\u67d3\u865a\u62dfDOM\u5230\u9875\u9762<\/span> ReactDOM.<\/span>render<\/span>(<\/span>VDOM<\/span>,<\/span> document.<\/span>getElementById<\/span>(<\/span>'test'<\/span>)<\/span>)<\/span> <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <\/<\/span>body<\/span>><\/span><\/span> <\/code><\/pre>\n
            \u865a\u62dfDOM\u7684\u4e24\u79cd\u521b\u5efa\u65b9\u5f0f<\/h3>\n
              \n
            1. \n
              \u4f7f\u7528 JSX \u8bed\u6cd5\u521b\u5efa\u865a\u62df DOM<\/p>\n
              <!-- \u6b64\u5904\u4e00\u5b9a\u8981\u5199babel -->\n<script type=\"text\/babel\">\n    \n    \/\/ \u6b64\u5904\u53ef\u4ee5\u7528\u5c0f\u62ec\u53f7\u62ec\u8d77\u6765\uff0c\u8868\u793a\u662f\u4e00\u4e2a\u6574\u4f53\n    const VDOM = (\n    \/\/ \u53ef\u4ee5\u6309\u7167html\u4ee3\u7801\u7684\u683c\u5f0f\u7f16\u5199\n    <h1>\n        <span>\n            Hello,React\n        <\/span>\n    <\/h1>\n    )\n    \n    ReactDOM.render(VDOM, document.getElementById('test'))\n<\/script>\n<\/code><\/pre>\n<\/li>\n
            2. \n
              \u4f7f\u7528\u539f\u751f js \u521b\u5efa\u865a\u62df DOM<\/p>\n
                \n
              • React.createElement(type, [props], [...children])<\/code>\uff1a\u521b\u5efa\u4e00\u4e2a\u865a\u62df DOM\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u6807\u7b7e\u540d\uff0c\u5fc5\u586b\uff1b\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u5c5e\u6027\uff0c\u975e\u5fc5\u586b\uff1b\u7b2c\u4e09\u4e2a\u53c2\u6570\u4f20\u5b50\u8282\u70b9\u5185\u5bb9\uff0c\u975e\u5fc5\u586b<\/li>\n<\/ul>\n
                <!-- \u6b64\u5904\u6307\u5b9a\u4e3a\u539f\u751fjs\u4ee3\u7801 --> <script type=\"text\/javascript\"> \/\/ 1. \u521b\u5efa\u5355\u5c42\u865a\u62dfDOM const VDOM1 = React.createElement('h1', { id: 'title' }, 'Hello,React') \/\/ 2. \u521b\u5efa\u591a\u5c42\u865a\u62dfDOM\uff0c\u5199\u8d77\u6765\u53ca\u5176\u7e41\u7410 \/\/ babel\u5176\u5b9e\u5c31\u662f\u5c06\u6211\u4eec\u5199\u7684jsx\u521b\u5efa\u865a\u62dfDOM\u7684\u4ee3\u7801\u89e3\u6790\u4e3a\u4e0b\u9762\u8fd9\u6837 const VDOM2 = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React')) ReactDOM.render(VDOM, document.getElementById('test')) <\/script> <\/code><\/pre>\n<\/li>\n<\/ol>\n
                \u4f7f\u7528 JSX \u7684\u552f\u4e00\u597d\u5904\u5c31\u662f\u53ef\u4ee5\u8ba9\u6211\u4eec\u6309\u7167 html \u4ee3\u7801\u7684\u683c\u5f0f\u53bb\u7f16\u5199\u865a\u62df DOM<\/p>\n
                \u865a\u62dfDOM\u548c\u771f\u5b9eDOM<\/h3>\n
                <script type=\"text\/babel\"> \/\/ \u521b\u5efa\u865a\u62dfDOM const VDOM = (<h1>Hello,React<\/h1>) \/\/ \u521b\u5efa\u771f\u5b9eDOM const TDOM = document.createElement('h1') console.log(typeof VDOM); \/\/ object ReactDOM.render(VDOM, document.getElementById('test')) <\/script> <\/code><\/pre>\n
                \u865a\u62df DOM\uff1a<\/p>\n
                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                \u771f\u5b9e DOM\uff1a<\/p>\n
                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                \u5173\u4e8e\u865a\u62df DOM\uff1a<\/p>\n
                  \n
                1. \u672c\u8d28\u662f Object \u7c7b\u578b\u7684\u5bf9\u8c61\uff08\u4e00\u822c\u5bf9\u8c61\uff09<\/li>\n
                2. \u865a\u62df DOM \u6bd4\u8f83 \u201c\u8f7b\u201d\uff0c\u771f\u5b9e DOM \u6bd4\u8f83 \u201c\u91cd\u201c\uff0c\u56e0\u4e3a\u865a\u62df DOM \u662f React \u5185\u90e8\u5728\u7528\uff0c\u65e0\u9700\u771f\u5b9e DOM \u4e0a\u90a3\u4e48\u591a\u7684\u5c5e\u6027<\/li>\n
                3. \u865a\u62df DOM \u6700\u7ec8\u4f1a\u88ab React \u8f6c\u5316\u4e3a\u771f\u5b9e DOM\uff0c\u5448\u73b0\u5728\u9875\u9762\u4e0a<\/li>\n<\/ol>\n
                  JSX<\/h2>\n
                  \u5b9a\u4e49<\/h3>\n
                    \n
                  1. \u5168\u79f0\uff1aJavaScript XML<\/li>\n
                  2. react \u5b9a\u4e49\u7684\u4e00\u79cd\u7c7b\u4f3c\u4e8e XML \u7684 JS \u6269\u5c55\u8bed\u6cd5\uff1aJS + XML<\/li>\n
                  3. \u672c\u8d28\u662f React.createElement(component, props, ...children)<\/code> \u65b9\u6cd5\u7684\u8bed\u6cd5\u7cd6<\/li>\n
                  4. \u4f5c\u7528\uff1a\u7528\u6765\u7b80\u5316\u521b\u5efa\u865a\u62df DOM\n
                      \n
                    • \u5199\u6cd5\uff1avar ele = <h1>Hello JSX!<\/h1><\/code><\/li>\n
                    • \u6ce8\u610f1\uff1a\u5b83\u4e0d\u662f\u5b57\u7b26\u4e32\uff0c\u4e5f\u4e0d\u662f HTML\/XML \u6807\u7b7e<\/li>\n
                    • \u6ce8\u610f2\uff1a\u5b83\u6700\u7ec8\u4ea7\u751f\u7684\u5c31\u662f\u4e00\u4e2a JS \u5bf9\u8c61<\/li>\n<\/ul>\n<\/li>\n
                    • \u6807\u7b7e\u540d\u4efb\u610f\uff1aHTML \u6807\u7b7e\u6216\u5176\u5b83\u6807\u7b7e<\/li>\n<\/ol>\n
                      \u8bed\u6cd5\u89c4\u5219<\/h3>\n
                        \n
                      1. \u5b9a\u4e49\u865a\u62df DOM \u65f6\uff0c\u4e0d\u8981\u5199\u5f15\u53f7<\/li>\n
                      2. \u6807\u7b7e\u4e2d\u6df7\u5165 JS \u8868\u8fbe\u5f0f<\/strong>\uff08\u6ce8\u610f\u533a\u5206 \u2018\u8868\u8fbe\u5f0f\u2019 \u548c \u2018\u8bed\u53e5\u2019\uff09\u65f6\u8981\u7528 {}<\/code><\/li>\n
                      3. \u6307\u5b9a\u6837\u5f0f\u7684\u7c7b\u540d\u65f6\u4e0d\u8981\u7528 class\uff0c\u8981\u7528 className<\/li>\n
                      4. \u5185\u8054\u6837\u5f0f\uff0c\u8981\u7528 style={
                        \n   {key:'value', key:'value'}}<\/code> \u7684\u5f62\u5f0f\u53bb\u5199\uff0c\u5982\u679c key \u4e3a\u591a\u4e2a\u5355\u8bcd\u7ec4\u6210\uff0c\u5219\u8f6c\u6210\u5c0f\u9a7c\u5cf0\u5f62\u5f0f<\/li>\n
                      5. \u53ea\u80fd\u6709\u4e00\u4e2a\u6839\u6807\u7b7e<\/li>\n
                      6. \u6807\u7b7e\u5fc5\u987b\u95ed\u5408<\/li>\n
                      7. \u6807\u7b7e\u9996\u5b57\u6bcd\uff1a\n
                          \n
                        • \u82e5\u5c0f\u5199\u5b57\u6bcd\u5f00\u5934\uff0c\u5219\u5c06\u8be5\u6807\u7b7e\u8f6c\u4e3a html \u4e2d\u540c\u540d\u5143\u7d20\u3002\u82e5 html \u4e2d\u65e0\u8be5\u6807\u7b7e\u5bf9\u5e94\u7684\u540c\u540d\u5143\u7d20\uff0c\u5219\u62a5\u9519<\/li>\n
                        • \u82e5\u5927\u5199\u5b57\u6bcd\u5f00\u5934\uff0creact \u5c31\u53bb\u6e32\u67d3\u5bf9\u5e94\u7684\u7ec4\u4ef6\uff08\u5b9a\u4e49 React \u7ec4\u4ef6\u89c1\u540e\u7eed\u7ae0\u8282\uff09\uff0c\u82e5\u7ec4\u4ef6\u6ca1\u6709\u5b9a\u4e49\uff0c\u5219\u62a5\u9519<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                          \u793a\u4f8b\uff1a<\/strong><\/p>\n
                          <script type=\"text\/babel\"> let txt = 'Hello React!' const VDOM = ( <div> <h1>{txt}<\/h1> <h2 className=\"pink\">\u6211\u662f\u7c89\u8272<\/h2> <h3 style={ \n  { color: 'red', fontSize: '33px' }}>\u6211\u662f\u7ea2\u8272<\/h3> <\/div> ) ReactDOM.render(VDOM, document.getElementById('test')) <\/script> <\/code><\/pre>\n
                          \n
                          \u533a\u5206 js \u8868\u8fbe\u5f0f<\/strong>\u548c js \u8bed\u53e5<\/strong>\uff1a<\/p>\n
                          \u8868\u8fbe\u5f0f\uff1a\u4e00\u4e2a\u8868\u8fbe\u5f0f\u4f1a\u4ea7\u751f\u4e00\u4e2a\u503c\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u4e00\u4e2a\u9700\u8981\u503c\u7684\u5730\u65b9\uff0c\u5982\u4e0b\u6240\u793a<\/p>\n
                            \n
                          • a<\/li>\n
                          • a + b<\/li>\n
                          • demo(1)<\/li>\n
                          • arr.map()<\/li>\n
                          • function test() {}<\/li>\n<\/ul>\n
                            \u8bed\u53e5\uff1a<\/p>\n
                              \n
                            • if() {}<\/li>\n
                            • for() {}<\/li>\n
                            • switch() {case:xxxx}<\/li>\n<\/ul>\n<\/blockquote>\n
                              \u52a8\u6001\u6e32\u67d3\u6570\u636e<\/h3>\n
                              \u6a21\u62df\u4ece\u540e\u7aef\u83b7\u53d6\u5230\u6570\u636e\uff0c\u5e76\u901a\u8fc7 React \u6e32\u67d3\u7684\u573a\u666f\uff1a<\/p>\n
                              <script type=\"text\/babel\"> \/\/ \u5047\u8bbe\u4ece\u540e\u7aef\u83b7\u53d6\u5230\u6570\u636e let data = ['\u5f20\u4e09', '\u674e\u56db', '\u738b\u4e94'] const VDOM = ( <div> <ul> {data.map((item, index) => { \/\/ \u6bcf\u4e2ali\u9700\u8981\u4e00\u4e2a\u552f\u4e00\u7684key\uff0c\u8fd9\u91cc\u4f7f\u7528\u904d\u5386\u4e0b\u6807index\u4f5ckey return <li key={index}>{item}<\/li> })} <\/ul> <\/div> ) ReactDOM.render(VDOM, document.getElementById('test')) <\/script> <\/code><\/pre>\n
                              \u7ec4\u4ef6\u4e0e\u6a21\u5757<\/h2>\n
                              \u6a21\u5757<\/h3>\n
                                \n
                              1. \u7406\u89e3<\/strong>\uff1a\u5411\u5916\u63d0\u4f9b\u7279\u5b9a\u529f\u80fd\u7684 js \u7a0b\u5e8f\uff0c\u4e00\u822c\u5c31\u662f\u4e00\u4e2a js \u6587\u4ef6<\/li>\n
                              2. \u4e3a\u4ec0\u4e48\u8981\u62c6\u6210\u6a21\u5757<\/strong>\uff1a\u968f\u7740\u4e1a\u52a1\u903b\u8f91\u589e\u52a0\uff0c\u4ee3\u7801\u8d8a\u6765\u8d8a\u591a\u4e14\u590d\u6742<\/li>\n
                              3. \u4f5c\u7528<\/strong>\uff1a\u590d\u7528 js\uff0c\u7b80\u5316 js \u7684\u7f16\u5199\uff0c\u63d0\u9ad8 js \u8fd0\u884c\u6548\u7387<\/li>\n
                              4. \u6a21\u5757\u5316<\/strong>\uff1a\u5f53\u5e94\u7528\u7684 js \u90fd\u4ee5\u6a21\u5757\u6765\u7f16\u5199\u7684\uff0c\u8fd9\u4e2a\u5e94\u7528\u5c31\u662f\u4e00\u4e2a\u6a21\u5757\u5316\u5e94\u7528<\/li>\n<\/ol>\n
                                \u7ec4\u4ef6<\/h3>\n
                                  \n
                                1. \u7406\u89e3<\/strong>\uff1a\u7528\u6765\u5b9e\u73b0\u5c40\u90e8\u529f\u80fd\u6548\u679c\u7684\u4ee3\u7801\u548c\u8d44\u6e90\u7684\u96c6\u5408\uff08html \/ css \/ js \/ image \u7b49\uff09<\/li>\n
                                2. \u4e3a\u4ec0\u4e48<\/strong>\uff1a\u4e00\u4e2a\u754c\u9762\u7684\u529f\u80fd\u66f4\u590d\u6742<\/li>\n
                                3. \u4f5c\u7528<\/strong>\uff1a\u590d\u7528\u7f16\u7801\uff0c\u7b80\u5316\u9879\u76ee\u7f16\u7801\uff0c\u63d0\u9ad8\u8fd0\u884c\u6548\u7387<\/li>\n
                                4. \u7ec4\u4ef6\u5316<\/strong>\uff1a\u5f53\u5e94\u7528\u662f\u4ee5\u591a\u7ec4\u4ef6\u7684\u65b9\u5f0f\u5b9e\u73b0\uff0c\u8fd9\u4e2a\u5e94\u7528\u5c31\u662f\u4e00\u4e2a\u7ec4\u4ef6\u5316\u7684\u5e94\u7528<\/li>\n<\/ol>\n
                                  class\u7c7b\u7684\u57fa\u672c\u4f7f\u7528<\/h2>\n
                                  \u57fa\u7840\u7528\u6cd5<\/h3>\n
                                  \/\/ \u521b\u5efa\u4e00\u4e2aPerson\u7c7b<\/span> class<\/span> Person<\/span> { \n   <\/span> \/\/ \u6784\u9020\u5668\u65b9\u6cd5<\/span> constructor<\/span>(<\/span>name,<\/span> age<\/span>)<\/span> { \n   <\/span> \/\/ \u6784\u9020\u5668\u4e2d\u7684this\u662f\u8c01\uff1f\u2014\u2014\u2014\u2014\u7c7b\u7684\u5b9e\u4f8b\u5bf9\u8c61<\/span> this<\/span>.<\/span>name =<\/span> name;<\/span> this<\/span>.<\/span>age =<\/span> age;<\/span> }<\/span> \/\/ \u4e00\u822c\u65b9\u6cd5<\/span> speak<\/span>(<\/span>)<\/span> { \n   <\/span> \/\/ speak\u65b9\u6cd5\u4f1a\u88ab\u653e\u5230\u54ea\u91cc\uff1f\u2014\u2014\u2014\u2014\u7c7b\u7684\u539f\u578b\u5bf9\u8c61\u4e0a\uff0c\u4f9b\u5b9e\u4f8b\u4f7f\u7528<\/span> \/\/ \u65b9\u6cd5\u4e2d\u7684this\u6307\u5411\u54ea\u91cc\uff1f\u2014\u2014\u2014\u2014\u7531\u65b9\u6cd5\u7684\u8c03\u7528\u65b9\u5f0f\u51b3\u5b9a<\/span> \/\/ - \u5b9e\u4f8b\u76f4\u63a5\u8c03\u7528\uff1athis\u5c31\u6307\u5411\u5b9e\u4f8b<\/span> \/\/ - \u7531call()\u8c03\u7528\uff0c\u5219\u6307\u5411call()\u65b9\u6cd5\u4f20\u9012\u7684\u53c2\u6570\u5bf9\u8c61<\/span> \/\/ - \u7531apply()\uff0cbind()\u8c03\u7528...<\/span> console.<\/span>log<\/span>(<\/span>`<\/span>\u6211\u53eb<\/span>${ \n     <\/span>this<\/span>.<\/span>name}<\/span><\/span>\uff0c\u6211\u4eca\u5e74<\/span>${ \n     <\/span>this<\/span>.<\/span>age}<\/span><\/span>\u5c81<\/span>`<\/span><\/span>)<\/span> }<\/span> }<\/span> \/\/ \u521b\u5efa\u4e24\u4e2a\u4e2aPerson\u5b9e\u4f8b\u7684\u5bf9\u8c61<\/span> const<\/span> p1 =<\/span> new<\/span> Person<\/span>(<\/span>'\u5f20\u4e09'<\/span>,<\/span> 18<\/span>)<\/span>;<\/span> const<\/span> p2 =<\/span> new<\/span> Person<\/span>(<\/span>'\u674e\u56db'<\/span>,<\/span> 20<\/span>)<\/span>;<\/span> p1.<\/span>speak<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u6211\u53eb\u5f20\u4e09\uff0c\u6211\u4eca\u5e7418\u5c81<\/span> p2.<\/span>speak<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u6211\u53eb\u674e\u56db\uff0c\u6211\u4eca\u5e7420\u5c81<\/span> <\/code><\/pre>\n
                                  \u7ee7\u627f<\/h3>\n
                                    \n
                                  • \n
                                    \u65e0\u6784\u9020\u5668<\/p>\n
                                    \/\/ \u521b\u5efa\u4e00\u4e2aPerson\u7236\u7c7b<\/span> class<\/span> Person<\/span> { \n     <\/span> constructor<\/span>(<\/span>name,<\/span> age<\/span>)<\/span> { \n     <\/span> this<\/span>.<\/span>name =<\/span> name;<\/span> this<\/span>.<\/span>age =<\/span> age;<\/span> }<\/span> speak<\/span>(<\/span>)<\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>`<\/span>\u6211\u53eb<\/span>${ \n       <\/span>this<\/span>.<\/span>name}<\/span><\/span>\uff0c\u6211\u4eca\u5e74<\/span>${ \n       <\/span>this<\/span>.<\/span>age}<\/span><\/span>\u5c81<\/span>`<\/span><\/span>)<\/span> }<\/span> }<\/span> \/\/ \u521b\u5efa\u4e00\u4e2aStudent\u5b50\u7c7b\uff0c\u7ee7\u627f\u4e8ePerson\u7236\u7c7b<\/span> class<\/span> Student<\/span> extends<\/span> Person<\/span> { \n     <\/span> \/\/ \u4ec0\u4e48\u90fd\u4e0d\u5199\uff0c\u4f1a\u81ea\u52a8\u7ee7\u627f\u7236\u7c7b\u7684\u6784\u9020\u5668<\/span> \/\/ constructor(name, age) { \n     <\/span> \/\/ this.name = name;<\/span> \/\/ this.age = age;<\/span> \/\/ }<\/span> \/\/ \u81ea\u52a8\u7ee7\u627f\u7236\u7c7b\u7684\u65b9\u6cd5<\/span> \/\/ speak() { \n     <\/span> \/\/ console.log(`\u6211\u53eb${this.name}\uff0c\u6211\u4eca\u5e74${this.age}\u5c81`)<\/span> \/\/ }<\/span> }<\/span> const<\/span> s1 =<\/span> new<\/span> Student<\/span>(<\/span>'\u5f20\u4e09'<\/span>,<\/span> 18<\/span>)<\/span> console.<\/span>log<\/span>(<\/span>s1)<\/span>;<\/span> \/\/ Student {name: \"\u5f20\u4e09\", age: 18}<\/span> s1.<\/span>speak<\/span>(<\/span>)<\/span> \/\/ \u6211\u53eb\u5f20\u4e09\uff0c\u6211\u4eca\u5e7418\u5c81<\/span> <\/code><\/pre>\n<\/li>\n
                                  • \n
                                    \u6709\u6784\u9020\u5668<\/p>\n
                                    \/\/ \u521b\u5efa\u4e00\u4e2aPerson\u7236\u7c7b<\/span> class<\/span> Person<\/span> { \n     <\/span> constructor<\/span>(<\/span>name,<\/span> age<\/span>)<\/span> { \n     <\/span> this<\/span>.<\/span>name =<\/span> name;<\/span> this<\/span>.<\/span>age =<\/span> age;<\/span> }<\/span> speak<\/span>(<\/span>)<\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>`<\/span>\u6211\u53eb<\/span>${ \n       <\/span>this<\/span>.<\/span>name}<\/span><\/span>\uff0c\u6211\u4eca\u5e74<\/span>${ \n       <\/span>this<\/span>.<\/span>age}<\/span><\/span>\u5c81<\/span>`<\/span><\/span>)<\/span> }<\/span> }<\/span> \/\/ \u521b\u5efa\u4e00\u4e2aStudent\u5b50\u7c7b\uff0c\u7ee7\u627f\u4e8ePerson\u7236\u7c7b<\/span> class<\/span> Student<\/span> extends<\/span> Person<\/span> { \n     <\/span> \/\/ \u81ea\u5df1\u5199\u6784\u9020\u65b9\u6cd5\uff0c\u6dfb\u52a0\u5b66\u53f7\u5c5e\u6027<\/span> constructor<\/span>(<\/span>name,<\/span> age,<\/span> sno<\/span>)<\/span> { \n     <\/span> \/\/ super(arg)\u5fc5\u987b\u5199\u5230\u6784\u9020\u65b9\u6cd5\u5185\u7b2c\u4e00\u884c\uff0c\u7528\u4e8e\u8c03\u7528\u7236\u7c7b\u6784\u9020\u65b9\u6cd5<\/span> super<\/span>(<\/span>name,<\/span> age)<\/span>;<\/span> \/\/ \u7236\u7c7b\u6784\u9020\u65b9\u6cd5\u5df2\u7ecf\u6709\u4e86name\u548cage\uff0c\u6b64\u5904\u53ea\u9700\u5199sno\u5373\u53ef<\/span> this<\/span>.<\/span>sno =<\/span> sno;<\/span> }<\/span> \/\/ \u91cd\u5199\u7236\u7c7b\u7ee7\u627f\u7684\u65b9\u6cd5<\/span> speak<\/span>(<\/span>)<\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>`<\/span>\u6211\u53eb<\/span>${ \n       <\/span>this<\/span>.<\/span>name}<\/span><\/span>\uff0c\u6211\u4eca\u5e74<\/span>${ \n       <\/span>this<\/span>.<\/span>age}<\/span><\/span>\u5c81\uff0c\u6211\u7684\u5b66\u53f7\u662f<\/span>${ \n       <\/span>this<\/span>.<\/span>sno}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span> }<\/span> \/\/ \u81ea\u5df1\u7684\u65b9\u6cd5<\/span> study<\/span>(<\/span>)<\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>'\u5b66\u4e60\uff1f\u5b66\u4e2a\u5c41\uff01'<\/span>)<\/span>;<\/span> }<\/span> }<\/span> const<\/span> s1 =<\/span> new<\/span> Student<\/span>(<\/span>'\u5f20\u4e09'<\/span>,<\/span> 18<\/span>,<\/span> <\/span>)<\/span> console.<\/span>log<\/span>(<\/span>s1)<\/span>;<\/span> \/\/ Student {name: \"\u5f20\u4e09\", age: 18, sno: }<\/span> s1.<\/span>speak<\/span>(<\/span>)<\/span> \/\/ \u6211\u53eb\u5f20\u4e09\uff0c\u6211\u4eca\u5e7418\u5c81\uff0c\u6211\u7684\u5b66\u53f7\u662f<\/span> s1.<\/span>study<\/span>(<\/span>)<\/span> \/\/ \u5b66\u4e60\uff1f\u5b66\u4e2a\u5c41\uff01<\/span> <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                    \u5171\u540c\u5c5e\u6027\u5b9a\u4e49<\/h3>\n
                                    \u67d0\u4e2a\u7c7b\u7684\u5c5e\u6027\u53ef\u80fd\u662f\u6240\u6709\u5b9e\u4f8b\u90fd\u62e5\u6709\u4e14\u76f8\u540c\u7684\uff0c\u6bd4\u5982\u6c7d\u8f66\u90fd\u662f 4 \u4e2a\u8f6e\u5b50\uff0c\u4eba\u90fd\u662f 1 \u4e2a\u8111\u888b\uff0c\u90a3\u4e48\u8fd9\u6837\u7684\u5c5e\u6027\u6211\u4eec\u53ef\u4ee5\u4e3a\u5176\u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff1a<\/p>\n
                                    class<\/span> Student<\/span> { \n   <\/span> constructor<\/span>(<\/span>name,<\/span> age,<\/span> sno<\/span>)<\/span> { \n   <\/span> this<\/span>.<\/span>name =<\/span> name;<\/span> this<\/span>.<\/span>age =<\/span> age;<\/span> this<\/span>.<\/span>sno =<\/span> sno;<\/span> \/\/ \u6784\u9020\u5668\u91cc\u9762\u8d4b\u9ed8\u8ba4\u503c<\/span> this<\/span>.<\/span>head =<\/span> 1<\/span> }<\/span> \/\/ \u5916\u5c42\u4ee3\u7801\u5757\u4e2d\u8d4b\u9ed8\u8ba4\u503c\uff08\u63a8\u8350\uff09<\/span> foot =<\/span> 2<\/span> }<\/span> const<\/span> s1 =<\/span> new<\/span> Student<\/span>(<\/span>'\u5f20\u4e09'<\/span>,<\/span> 18<\/span>,<\/span> <\/span>)<\/span> const<\/span> s2 =<\/span> new<\/span> Student<\/span>(<\/span>'\u674e\u56db'<\/span>,<\/span> 20<\/span>,<\/span> <\/span>)<\/span> console.<\/span>log<\/span>(<\/span>s1)<\/span>;<\/span> \/\/ {foot: 2, name: \"\u5f20\u4e09\", age: 18, sno: , head: 1}<\/span> console.<\/span>log<\/span>(<\/span>s2)<\/span>;<\/span> \/\/ {foot: 2, name: \"\u674e\u56db\", age: 20, sno: , head: 1}<\/span> <\/code><\/pre>\n
                                    React\u9762\u5411\u7ec4\u4ef6\u7f16\u7a0b<\/h2>\n
                                    \u51fd\u6570\u5f0f\u7ec4\u4ef6<\/h3>\n
                                    <script type=\"text\/babel\"> \/\/ 1. \u521b\u5efa\u51fd\u6570\u5f0f\u7ec4\u4ef6\uff08\u51fd\u6570\u540d\u9996\u5b57\u6bcd\u8981\u5927\u5199\uff09 function MyComponent() { \/\/ \u6b64\u5904\u7684this\u4e3aundefined\uff0c\u56e0\u4e3ababel\u7f16\u8bd1\u540e\u5f00\u542f\u4e86\u4e25\u683c\u6a21\u5f0f console.log(this) return <h2>\u6211\u662f\u7528\u51fd\u6570\u5b9a\u4e49\u7684\u7ec4\u4ef6\uff08\u9002\u7528\u4e8e\u7b80\u5355\u7ec4\u4ef6\u7684\u5b9a\u4e49\uff09<\/h2> } \/\/ 2. \u6e32\u67d3\u7ec4\u4ef6\u5230\u9875\u9762\uff08\u7b2c\u4e00\u4e2a\u53c2\u6570\u8981\u4f20\u7ec4\u4ef6\u540d\u7684\u6807\u7b7e\u683c\u5f0f\uff09 ReactDOM.render(<MyComponent\/>, document.getElementById('test')) <\/script> <\/code><\/pre>\n
                                    \n
                                    \u6267\u884c ReactDOM.render() \u65b9\u6cd5\u4e4b\u540e\uff0c\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f<\/p>\n
                                      \n
                                    1. React \u89e3\u6790\u7ec4\u4ef6\u6807\u7b7e\uff0c\u627e\u5230\u4e86 MyComponent \u7ec4\u4ef6<\/li>\n
                                    2. \u53d1\u73b0\u7ec4\u4ef6\u662f\u4f7f\u7528\u51fd\u6570\u5b9a\u4e49\u7684\uff0c\u968f\u540e\u8c03\u7528\u8be5\u51fd\u6570\uff0c\u5c06\u8fd4\u56de\u7684\u865a\u62df DOM \u8f6c\u4e3a\u771f\u5b9e DOM\uff0c\u968f\u540e\u5448\u73b0\u5728\u9875\u9762\u4e2d<\/li>\n<\/ol>\n<\/blockquote>\n
                                      \u7c7b\u5f0f\u7ec4\u4ef6<\/h3>\n
                                      \u7c7b\u5f0f\u7ec4\u4ef6\u4e09\u8981\u7d20\uff1a<\/p>\n
                                        \n
                                      1. \u521b\u5efa\u7c7b\uff0c\u5e76\u7ee7\u627f React.Component<\/code><\/li>\n
                                      2. \u6dfb\u52a0 render()<\/code> \u65b9\u6cd5<\/li>\n
                                      3. \u8fd4\u56de DOM<\/li>\n<\/ol>\n
                                        <script type=\"text\/babel\"> \/\/ 1. \u521b\u5efa\u7c7b\uff0c\u5e76\u7ee7\u627fReact.Component class MyComponent extends React.Component { \/\/ 2. \u6dfb\u52a0render()\u51fd\u6570 render() { \/\/ 3. \u8fd4\u56deDOM return <h2>\u6211\u662f\u7528\u7c7b\u5b9a\u4e49\u7684\u7ec4\u4ef6\uff08\u9002\u7528\u4e8e\u590d\u6742\u7ec4\u4ef6\u7684\u5b9a\u4e49\uff09<\/h2> } } \/\/ \u6e32\u67d3\u7ec4\u4ef6\u5230\u9875\u9762 ReactDOM.render(<MyComponent \/>, document.getElementById('test')) <\/script> <\/code><\/pre>\n
                                        \u601d\u8003\uff1a<\/p>\n
                                          \n
                                        • render()<\/code> \u65b9\u6cd5\u4f1a\u88ab\u653e\u5230\u54ea\u91cc\uff1f\n
                                            \n
                                          • MyComponent<\/strong> \u7684\u539f\u578b\u5bf9\u8c61\u4e0a\uff0c\u4f9b\u5b9e\u4f8b\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n
                                          • render()<\/code> \u4e2d\u7684 this<\/code> \u662f\u8c01\uff1f\n
                                              \n
                                            • MyComponent<\/strong> \u7684\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61<\/li>\n<\/ul>\n<\/li>\n
                                            • \u6267\u884c ReactDOM.render(...)<\/code> \u4e4b\u540e\uff0c\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f\n
                                                \n
                                              • React \u89e3\u6790\u7ec4\u4ef6\u6807\u7b7e\uff0c\u627e\u5230\u4e86 MyComponent<\/strong> \u7ec4\u4ef6<\/li>\n
                                              • React \u53d1\u73b0\u7ec4\u4ef6\u662f\u4f7f\u7528\u7c7b\u5b9a\u4e49\u7684\uff0c\u968f\u540e new \u51fa\u6765\u8be5\u7c7b\u7684\u5b9e\u4f8b\uff0c\u5e76\u901a\u8fc7\u8be5\u5b9e\u4f8b\u8c03\u7528\u5230\u5176\u539f\u578b\u4e0a\u7684 render()<\/code> \u65b9\u6cd5<\/li>\n
                                              • \u5c06 render()<\/code> \u8fd4\u56de\u7684\u865a\u62df DOM \u8f6c\u4e3a\u771f\u5b9e DOM\uff0c\u968f\u540e\u5448\u73b0\u5728\u9875\u9762\u4e2d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                \u7ec4\u4ef6\u5b9e\u4f8b\u7684\u4e09\u5927\u6838\u5fc3\u5c5e\u6027<\/h3>\n
                                                state<\/h4>\n
                                                state\uff08\u72b6\u6001\uff09\u662f\u653e\u5728\u7ec4\u4ef6\u5b9e\u4f8b\u4e0a\u7684\uff0c\u6240\u4ee5\u53ea\u6709\u7c7b\u5f0f\u7ec4\u4ef6\u6709 state\uff08\u5176\u5b9e\u51fd\u6570\u5f0f\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7 hooks \u5b9e\u73b0 state\uff0c\u4f46\u6b64\u5904\u4e0d\u8fc7\u591a\u4ecb\u7ecd\uff09<\/p>\n
                                                \u6570\u636e\u5b58\u653e\u5728\u72b6\u6001\u4e0a\uff0c\u72b6\u6001\u9a71\u52a8\u7740\u9875\u9762\u7684\u663e\u793a\uff1b\u72b6\u6001\u4e2d\u7684\u6570\u636e\u6539\u53d8\uff0c\u9875\u9762\u4f1a\u968f\u4e4b\u6539\u53d8\uff08\u91cd\u65b0\u8c03\u7528 render \u65b9\u6cd5\uff09<\/p>\n
                                                state \u7684\u503c\u5fc5\u987b\u662f\u4e00\u4e2a\u5bf9\u8c61<\/p>\n
                                                \n
                                                \u4e0b\u9762\u6211\u4eec\u7528\u4e00\u4e2a\u5c0f\u6848\u4f8b\u6765\u8bb2\u89e3 state \u7684\u57fa\u672c\u4f7f\u7528\u65b9\u5f0f<\/p>\n
                                                \u6848\u4f8b\uff1a\u9875\u9762\u4e0a\u6709 \u201c\u4eca\u5929\u5929\u6c14\u5f88\u708e\u70ed\u201d \u8fd9\u53e5\u8bdd\uff0c\u5f53\u70b9\u51fb\u8fd9\u53e5\u8bdd\u65f6\uff0c\u201c\u708e\u70ed\u201d \u548c \u201c\u51c9\u723d\u201d \u4f1a\u4e92\u76f8\u5207\u6362<\/p>\n
                                                \u521d\u59cb\u5316\u3001\u53d6\u503c\u3001\u6ce8\u518c\u4e8b\u4ef6<\/h5>\n
                                                <body> <div id=\"test\"><\/div> <script type=\"text\/javascript\" src=\"..\/js\/react.development.js\"><\/script> <script type=\"text\/javascript\" src=\"..\/js\/react-dom.development.js\"><\/script> <script type=\"text\/javascript\" src=\"..\/js\/babel.min.js\"><\/script> <script type=\"text\/babel\"> class WeatherCpn extends React.Component { constructor(props) { super(props) \/\/ 1. \u521d\u59cb\u5316state this.state = { isHot: true }; } render() { \/\/ 2. \u89e3\u6784\u8d4b\u503c\uff0c\u62ff\u5230state\u4e2d\u7684isHot\u503c\uff0c\u6839\u636eisHot\u7684\u503c\u6765\u51b3\u5b9a\u5c55\u793a\u4ec0\u4e48\u5185\u5bb9 const { isHot } = this.state \/\/ 3. \u6ce8\u518c\u70b9\u51fb\u4e8b\u4ef6\uff0conclick\u7684C\u8981\u5927\u5199\uff0c\u503c\u7528{}\u5305\u88f9\uff0c\u91cc\u9762\u5199\u51fd\u6570\u540d\uff0c\u4e0d\u8981\u5fd8\u4e86\u52a0this \/\/ \u51fd\u6570\u540e\u4e0d\u8981\u52a0\u62ec\u53f7\uff0c\u4e0d\u7136\u4f1a\u5728\u6e32\u67d3\u65f6\u7acb\u523b\u8c03\u7528\uff1b\u800c\u4e14\u76f8\u5f53\u4e8e\u628a\u51fd\u6570\u7684\u8fd4\u56de\u503c\u4ea4\u7ed9onClick\u53bb\u56de\u8c03\uff0c\u800c\u4e0d\u662f\u628a\u51fd\u6570\u4ea4\u7ed9onClick \/\/ \u6b64\u5904\u867d\u7136\u662fthis.\u51fd\u6570\uff0c\u4f46\u662f\u5e76\u4e0d\u662f\u901a\u8fc7\u5b9e\u4f8b\u5bf9\u8c61\u8c03\u7528\u4e86\u6b64\u51fd\u6570\uff0c\u800c\u662f\u901a\u8fc7this\u5728\u5176\u539f\u578b\u5bf9\u8c61\u4e0a\u627e\u5230\u8fd9\u4e2a\u51fd\u6570\uff0c\u5e76\u7ed9\u5230onClick\u4f5c\u4e3a\u56de\u8c03\u51fd\u6570\u4f7f\u7528 return <h1 onClick={this.changeWeather}>\u4eca\u5929\u5929\u6c14\u771f{isHot ? '\u708e\u70ed' : '\u51c9\u723d'}<\/h1> } \/\/ \u70b9\u51fb\u65f6\u56de\u8c03\u7684\u51fd\u6570 changeWeather() { \/\/ changeWeather\u901a\u8fc7\u5b9e\u4f8b\u5bf9\u8c61\u8c03\u7528\u65f6\uff0cthis\u624d\u4f1a\u6307\u5411\u5b9e\u4f8b\u5bf9\u8c61 \/\/ \u8fd9\u91ccchangeWeather\u662f\u4f5c\u4e3aonClick\u7684\u56de\u8c03\uff0c\u6240\u4ee5\u4e0d\u662f\u901a\u8fc7\u5b9e\u4f8b\u5bf9\u8c61\u8c03\u7528\u7684\uff0c\u800c\u662f\u76f4\u63a5\u8c03\u7528 \/\/ \u5e76\u4e14\u7531\u4e8eReact\u7c7b\u4e2d\u7684\u65b9\u6cd5\u9ed8\u8ba4\u5f00\u542f\u4e25\u683c\u6a21\u5f0f\uff0c\u6240\u4ee5\u6b64\u5904\u7684this\u503c\u4e3aundefined this.state.isHot = !this.state.isHot \/\/ Cannot read property 'state' of undefined } } ReactDOM.render(<WeatherCpn \/>, document.getElementById(\"test\")) <\/script> <\/body> <\/code><\/pre>\n
                                                \u89e3\u51b3\u51fd\u6570\u4e2dthis\u6307\u5411\u95ee\u9898<\/h5>\n
                                                \u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u65f6\u56de\u8c03\u51fd\u6570\u62a5\u4e86 Cannot read property 'state' of undefined<\/code> \u9519\u8bef\uff0c\u56e0\u4e3a\u56de\u8c03\u51fd\u6570\u4e2d\u7684 this<\/code> \u503c\u4e3a undefined<\/code><\/p>\n
                                                \u65b9\u5f0f\u4e00\uff1a\u5229\u7528bind()<\/h6>\n
                                                \u6211\u4eec\u5148\u6765\u719f\u6089\u4e00\u4e0b js \u4e2d\u7684 bind()<\/code> \u65b9\u6cd5\uff1a<\/p>\n
                                                function<\/span> fn<\/span>(<\/span>)<\/span> { \n   <\/span> \/\/ \u6253\u5370\u51fd\u6570\u4e2d\u7684this<\/span> console.<\/span>log<\/span>(<\/span>this<\/span>)<\/span>;<\/span> }<\/span> \/\/ \u76f4\u63a5\u8c03\u7528fn\u51fd\u6570\uff0c\u51fd\u6570\u4e2d\u7684this\u503c\u4e3aWindow\u5bf9\u8c61\uff1b\u82e5\u662f\u4e25\u683c\u6a21\u5f0f\u5219\u4e3aundefined<\/span> fn<\/span>(<\/span>)<\/span> \/\/ Window{...}<\/span> \/\/ \u4f7f\u7528fn\u51fd\u6570\u6389\u7528bind()\u65b9\u6cd5\uff0c\u4f1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\uff0c\u5e76\u4e14\u65b0\u51fd\u6570\u4e2d\u7684this\u5c31\u662fbind()\u65b9\u6cd5\u4f20\u5165\u7684\u503c<\/span> let<\/span> fn2 =<\/span> fn<\/span>.<\/span>bind<\/span>(<\/span>{ \n   <\/span> name<\/span>:<\/span> '\u5f20\u4e09'<\/span> }<\/span>)<\/span> fn2<\/span>(<\/span>)<\/span> \/\/ {name: '\u5f20\u4e09'}<\/span> <\/code><\/pre>\n
                                                \u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u5229\u7528 bind() \u65b9\u6cd5\uff0c\u6765\u89e3\u51b3\u4e0a\u4e00\u8282\u4e2d\u9047\u5230\u7684 this \u6307\u5411\u95ee\u9898\uff1a<\/p>\n
                                                class WeatherCpn extends React.Component { constructor(props) { super(props) this.state = { isHot: true }; \/\/ \u6b64\u5904\u8c03\u7528bind()\u65b9\u6cd5\u6765\u4fee\u6539changeWeather\u51fd\u6570\u4e2d\u7684this\u6307\u5411 \/\/ \u7b49\u53f7\u53f3\u8fb9\u7684changeWeather\u662f\u539f\u578b\u5bf9\u8c61\u4e0a\u7684changeWeather \/\/ \u7b49\u53f7\u5de6\u8fb9\u7684changeWeather\u5219\u662f\u7ec4\u4ef6\u5b9e\u4f8b\u4e0a\u7684changeWeather\uff08\u672c\u6765\u7ec4\u4ef6\u5b9e\u4f8b\u81ea\u5df1\u662f\u6ca1\u6709\u8fd9\u4e2a\u51fd\u6570\u7684\uff0c\u5b9e\u4f8b\u8c03\u7528\u7684\u662f\u539f\u578b\u5bf9\u8c61\u4e0a\u7684\uff09 \/\/ bind()\u65b9\u6cd5\u4f1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u51fd\u6570\uff0c\u5e76\u4fee\u6539\u65b0\u51fd\u6570this\u4e3a\u5f53\u524dthis\uff0c\u4e5f\u5c31\u662f\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61 \/\/ \u5c06\u65b0\u51fd\u6570\u6dfb\u52a0\u5230\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61\u4e0a this.changeWeather = this.changeWeather.bind(this) } render() { const { isHot } = this.state \/\/ \u56e0\u4e3a\u7ec4\u4ef6\u5b9e\u4f8b\u81ea\u8eab\u5df2\u88ab\u6dfb\u52a0\u4e86changeWeather\u51fd\u6570\uff0c\u6240\u4ee5\u6b64\u5904\u7684this.changeWeather\u4e0d\u4f1a\u518d\u53bb\u539f\u578b\u5bf9\u8c61\u4e0a\u627e \/\/ \u53c8\u56e0\u4e3a\u7ec4\u4ef6\u5b9e\u4f8b\u81ea\u8eab\u7684changeWeather\u51fd\u6570\u4e2d\u7684this\u5df2\u88abbind()\u51fd\u6570\u8bbe\u7f6e\u4e3a\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61\uff0c\u6240\u4ee5\u56de\u8c03\u51fd\u6570\u65f6\u5176this\u6307\u5411\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61 return <h1 onClick={this.changeWeather}>\u4eca\u5929\u5929\u6c14\u771f{isHot ? '\u708e\u70ed' : '\u51c9\u723d'}<\/h1> } changeWeather() { \/\/ \u867d\u7136isHot\u503c\u786e\u5b9e\u88ab\u6539\u53d8\u4e86\uff0c\u4f46\u662f\u9875\u9762\u5e76\u6ca1\u6709\u52a8\u6001\u6e32\u67d3\uff0c\u4e3a\u4ec0\u4e48\uff1f\u8bf7\u89c1\u4e0b\u4e00\u8282 this.state.isHot = !this.state.isHot } } ReactDOM.render(<WeatherCpn \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                \u65b9\u5f0f\u4e8c\uff1a\u5229\u7528\u7bad\u5934\u51fd\u6570<\/h6>\n
                                                \u5229\u7528\u7bad\u5934\u51fd\u6570\u7684\u7279\u6027\u53ef\u4ee5\u5f88\u597d\u7684\u89e3\u51b3 this \u6307\u5411\u95ee\u9898\uff1a<\/p>\n
                                                  \n
                                                • \u7bad\u5934\u51fd\u6570\u5411\u5916\u5c42\u4f5c\u7528\u57df\u4e00\u5c42\u5c42\u67e5\u627e this<\/code>\uff0c\u5c06\u627e\u5230\u7684\u7b2c\u4e00\u4e2a this<\/code> \u4f5c\u4e3a\u5b83\u7684 this<\/code><\/li>\n<\/ul>\n
                                                  class WeatherCpn extends React.Component { constructor(props) { super(props) this.state = { isHot: true }; } render() { const { isHot } = this.state return <h1 onClick={this.changeWeather}>\u4eca\u5929\u5929\u6c14\u771f{isHot ? '\u708e\u70ed' : '\u51c9\u723d'}<\/h1> } \/\/ \u8fd9\u91cc\u4f7f\u7528\u7bad\u5934\u51fd\u6570\u7684\u65b9\u5f0f\u6765\u5b9a\u4e49changeWeather\uff0c\u5e76\u4e14\u8fd9\u79cd\u7b49\u53f7\u7684\u51fd\u6570\u5b9a\u4e49\u65b9\u5f0f\uff0c\u4e0d\u4f1a\u5c06\u51fd\u6570\u5b9a\u4e49\u5230\u539f\u578b\u5bf9\u8c61\u4e0a\uff0c\u800c\u662f\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61\u4e0a changeWeather = () => { \/\/ \u7bad\u5934\u51fd\u6570\u4e2d\u7684this\u4f1a\u6307\u5411\u5916\u5c42\u7b2c\u4e00\u4e2athis\uff0c\u4e5f\u5c31\u662f\u7ec4\u4ef6\u5b9e\u4f8b\u5bf9\u8c61 this.setState({ isHot: !this.state.isHot }) } } ReactDOM.render(<WeatherCpn \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                  setState\u65b9\u6cd5<\/h5>\n
                                                  \u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u7ed9\u5143\u7d20\u6dfb\u52a0\u4e86\u70b9\u51fb\u4e8b\u4ef6\uff0c\u901a\u8fc7\u70b9\u51fb\u6765\u4fee\u6539 this.state.isHot<\/code> \u7684\u503c\uff0c\u4f46\u662f\u53d1\u73b0\u9875\u9762\u5e76\u6ca1\u6709\u5b9e\u65f6\u6e32\u67d3<\/p>\n
                                                  \u4e4b\u524d\u4e0d\u662f\u8bf4\u72b6\u6001\u9a71\u52a8\u7740\u9875\u9762\u7684\u663e\u793a\u5417\uff1f\u8fd9\u91cc\u72b6\u6001\u90fd\u53d8\u4e86\uff0c\u53ef\u4ee5\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u53d8\u5462<\/p>\n
                                                  \u539f\u56e0\u662f\u56e0\u4e3a state \u91cc\u7684\u503c\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539\uff0c\u8fd9\u6837\u7684\u64cd\u4f5c React \u8ba4\u4e3a\u662f\u4e0d\u5408\u6cd5\u7684\uff0c\u6240\u4ee5\u5e76\u6ca1\u6709\u53bb\u91cd\u65b0\u6e32\u67d3\u9875\u9762<\/p>\n
                                                  \u4fee\u6539\u7ec4\u4ef6\u72b6\u6001\u9700\u8981\u4f7f\u7528 setState<\/code> \u65b9\u6cd5\uff1a<\/p>\n
                                                  class WeatherCpn extends React.Component { constructor(props) { super(props) this.state = { \/\/ \u8bb0\u5f97\u5148\u521d\u59cb\u5316isHot\uff0c\u7136\u540e\u518d\u53bb\u4fee\u6539\u503c\uff0c\u8fd9\u6837\u6700\u7b26\u5408\u89c4\u8303 isHot: true }; this.changeWeather = this.changeWeather.bind(this) } render() { const { isHot } = this.state return <h1 onClick={this.changeWeather}>\u4eca\u5929\u5929\u6c14\u771f{isHot ? '\u708e\u70ed' : '\u51c9\u723d'}<\/h1> } changeWeather() { \/\/ \uff08\u00d7\uff09\u76f4\u63a5\u4fee\u6539\u72b6\u6001\uff1athis.state.isHot = !this.state.isHot \/\/ Cannot read property 'state' of undefined \/\/ \uff08\u221a\uff09\u4f7f\u7528setState\u65b9\u6cd5\u4fee\u6539\u7ec4\u4ef6\u72b6\u6001\uff1a \/\/ \u53c2\u6570\u4f20\u4e86\u54ea\u4e2a\u5c5e\u6027\u5c31\u53bbstate\u4e2d\u4fee\u6539\u54ea\u4e2a\u5c5e\u6027\uff0c\u4e0d\u4f1a\u5f71\u54cd\u5176\u4ed6\u5c5e\u6027 this.setState({ isHot: !this.state.isHot }) } } ReactDOM.render(<WeatherCpn \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                  \u601d\u8003\uff1a<\/p>\n
                                                    \n
                                                  • render \u65b9\u6cd5\u8c03\u7528\u4e86\u51e0\u6b21\uff1f\n
                                                      \n
                                                    • 1 + n \u6b21\uff0c1 \u662f\u521d\u59cb\u5316\u7684\u90a3\u6b21\uff0cn \u662f\u72b6\u6001\u66f4\u65b0\u7684\u6b21\u6570<\/li>\n<\/ul>\n<\/li>\n
                                                    • changeWeather \u65b9\u6cd5\u8c03\u7528\u4e86\u51e0\u6b21\uff1f\n
                                                        \n
                                                      • \u70b9\u51fb\u4e8b\u4ef6\u89e6\u53d1\u51e0\u6b21\u5c31\u8c03\u7528\u51e0\u6b21<\/li>\n<\/ul>\n<\/li>\n
                                                      • \u6784\u9020\u5668\u8c03\u7528\u4e86\u51e0\u6b21\uff1f\n
                                                          \n
                                                        • 1 \u6b21\uff0c\u4e5f\u5c31\u662f new \u5b9e\u4f8b\u7684\u90a3\u6b21<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                          \u7b80\u5199\u521d\u59cb\u5316state<\/h5>\n
                                                          \u65e2\u7136\u6bcf\u4e2a\u7ec4\u4ef6\u5b9e\u4f8b\u90fd\u8981\u521d\u59cb\u5316 state\uff0c\u90a3\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u628a\u5b83\u653e\u5230\u6784\u9020\u5668\u5916\u9762\u8d4b\u9ed8\u8ba4\u503c<\/p>\n
                                                          class WeatherCpn extends React.Component { constructor(props) { super(props) this.changeWeather = this.changeWeather.bind(this) } \/\/ \u7b80\u5199\u521d\u59cb\u5316state state = { isHot: true } render() { const { isHot } = this.state return <h1 onClick={this.changeWeather}>\u4eca\u5929\u5929\u6c14\u771f{isHot ? '\u708e\u70ed' : '\u51c9\u723d'}<\/h1> } changeWeather() { this.setState({ isHot: !this.state.isHot }) } } ReactDOM.render(<WeatherCpn \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                          props<\/h4>\n
                                                          \u6848\u4f8b\uff1a\u5047\u5982\u6709\u4e00\u4e2a Person \u7ec4\u4ef6\uff0c\u6211\u4eec\u60f3\u5728\u9875\u9762\u4e0a\u8f93\u51fa\u5f20\u4e09\u548c\u674e\u56db\u7684\u4fe1\u606f<\/p>\n
                                                          class Person extends React.Component { state = { name: '', age: '', } render() { const { name, age } = this.state return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } ReactDOM.render(<Person \/>, document.getElementById(\"test1\")) ReactDOM.render(<Person \/>, document.getElementById(\"test2\")) <\/code><\/pre>\n
                                                          \u6211\u4eec\u4f1a\u53d1\u73b0\u5f20\u4e09\u548c\u674e\u56db\u7684\u4fe1\u606f\u4e0d\u77e5\u9053\u5982\u4f55\u5206\u522b\u6e32\u67d3\uff0c\u56e0\u4e3a\u5982\u679c state \u4e2d\u662f\u5f20\u4e09\u7684\u4fe1\u606f\uff0c\u90a3\u4e48\u4f1a\u6e32\u67d3\u51fa\u4e24\u4e2a\u5f20\u4e09\u51fa\u6765\uff0c\u674e\u56db\u540c\u7406<\/p>\n
                                                          \u6240\u4ee5\u6211\u4eec\u9700\u8981\u4ece\u5916\u90e8\u5206\u522b\u4f20\u5165\u5f20\u4e09\u548c\u674e\u56db\u7684\u4fe1\u606f\uff0c\u5e76\u901a\u8fc7\u4e00\u4e2a\u5c5e\u6027\u6765\u63a5\u6536\uff0c\u8fd9\u4e2a\u5c5e\u6027\u5c31\u662f props<\/strong><\/p>\n
                                                          props\u57fa\u672c\u4f7f\u7528<\/h5>\n
                                                          props \u4e0d\u9700\u8981\u521d\u59cb\u5316\uff0c\u56e0\u4e3a\u5176\u9ed8\u8ba4\u662f\u4e00\u4e2a\u7a7a\u5bf9\u8c61<\/p>\n
                                                          class Person extends React.Component { render() { \/\/ \u4eceprops\u5c5e\u6027\u4e2d\u53d6\u503c const { name, age } = this.props return ( <ul> \/\/ \u6e32\u67d3\uff1a <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } \/\/ \u4f20\u5165\u7ec4\u4ef6\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u5728\u6807\u7b7e\u5c5e\u6027\u4e2d\u6dfb\u52a0\u952e\u503c\u5bf9\uff0c\u5176\u4f1a\u88ab\u8d4b\u503c\u5230\u7ec4\u4ef6\u7684props\u5c5e\u6027\u4e2d ReactDOM.render(<Person name=\"\u5f20\u4e09\" age={18} \/>, document.getElementById(\"test1\")) \/\/ \u6ce8\u610f\uff0c\u6b64\u5904age\u4f20\u7684\u662f\u5b57\u7b26\u4e32\u683c\u5f0f\uff0c\u90a3\u4e48props\u53d6\u5230\u7684\u4e5f\u662f\u5b57\u7b26\u4e32\uff0c\u65e0\u6cd5\u4f5c\u4e3a\u6570\u5b57\u8fdb\u884c\u8fd0\u7b97 ReactDOM.render(<Person name=\"\u674e\u56db\" age=\"20\" \/>, document.getElementById(\"test2\")) <\/code><\/pre>\n
                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                          \u6279\u91cf\u4f20\u9012props<\/h5>\n
                                                          \u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u901a\u8fc7\u5728\u6807\u7b7e\u5c5e\u6027\u4e2d\u6dfb\u52a0\u952e\u503c\u5bf9\u6765\u4f20\u9012 props\uff0c\u5982\u679c\u8981\u4f20\u7684\u5185\u5bb9\u6bd4\u8f83\u5c11\u8fd8\u597d\uff0c\u5047\u5982\u6709\u51e0\u5341\u4e2a\u5c5e\u6027\u5462\uff0c\u8fd9\u6837\u5c31\u4e0d\u592a\u5408\u9002\u4e86<\/p>\n
                                                          React \u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u6279\u91cf\u4f20\u9012 props \u7684\u529f\u80fd\uff1a<\/p>\n
                                                          class Person extends React.Component { render() { const { name, age } = this.props return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } const p1 = { name: '\u5f20\u4e09', age: 18 } const p2 = { name: '\u674e\u56db', age: \"22\" } \/\/ \u6ce8\u610f\uff0c\u6b64\u5904age\u4f20\u7684\u662f\u5b57\u7b26\u4e32\u683c\u5f0f\uff0c\u90a3\u4e48props\u53d6\u5230\u7684\u4e5f\u662f\u5b57\u7b26\u4e32\uff0c\u65e0\u6cd5\u4f5c\u4e3a\u6570\u5b57\u8fdb\u884c\u8fd0\u7b97 \/\/ \u6279\u91cf\u4f20\u5165props \/\/ \u6ce8\u610f\uff1a\u6b64\u5904\u7684\u5927\u62ec\u53f7\u4e0d\u662fES6\u4e2d\u590d\u5236\u5bf9\u8c61\u65f6\u7528\u7684\u5927\u62ec\u53f7\uff0c\u800c\u662fReact\u4e2d\u7684\u5927\u62ec\u53f7\uff0c\u7528\u4e8e\u5199\u8868\u8fbe\u5f0f\u7684 \/\/ ...\u8fd0\u7b97\u7b26\u5728ES6\u4e2d\u53ea\u5141\u8bb8\u5c55\u5f00\u6570\u7ec4\uff0c\u662f\u4e0d\u5141\u8bb8\u5c55\u5f00\u5bf9\u8c61\u7684\uff0c\u4f46\u6b64\u5904\u5728babel+React\u7684\u52a0\u6301\u4e0b\uff0c\u5141\u8bb8\u5c55\u5f00\u5bf9\u8c61\uff0c\u5e76\u4f5c\u4e3a\u6807\u7b7e\u5c5e\u6027 \/\/ \u867d\u7136\u5728babel\u548cReact\u7684\u52a0\u6301\u4e0b\u53ef\u4ee5\u901a\u8fc7...\u5c55\u5f00\u5bf9\u8c61\uff0c\u4f46\u4e0d\u80fd\u968f\u610f\u4f7f\u7528\uff0c\u53ea\u6709\u5728\u7279\u5b9a\u7684\u8bed\u5883\u4e0b\u624d\u4f1a\u751f\u6548 ReactDOM.render(<Person {...p1} \/>, document.getElementById(\"test1\")) ReactDOM.render(<Person {...p2} \/>, document.getElementById(\"test2\")) <\/code><\/pre>\n
                                                          props\u4f20\u503c\u9650\u5236<\/h5>\n
                                                          props \u53ef\u4ee5\u5bf9\u5916\u90e8\u4f20\u5165\u7684\u503c\u8fdb\u884c\u9650\u5236<\/p>\n
                                                          <!-- \u5f15\u5165prop-types\uff0c\u7528\u4e8e\u5bf9\u7ec4\u4ef6\u6807\u7b7e\u5c5e\u6027\u8fdb\u884c\u9650\u5236 --> <script type=\"text\/javascript\" src=\"..\/js\/prop-types.js\"><\/script> <script type=\"text\/babel\"> class Person extends React.Component { render() { const { name, age } = this.props \/\/ \u62a5\u9519\uff0cprops\u7684\u5185\u5bb9\u4e0d\u5141\u8bb8\u66f4\u6539 \/\/ this.props.name = 'abc' return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } \/\/ \u5bf9\u6807\u7b7e\u5c5e\u6027\u8fdb\u884c\u7c7b\u578b\u3001\u5fc5\u8981\u6027\u7684\u9650\u5236\uff1b\u8fd9\u91cc\u5c0f\u5199\u7684propTypes\u662fReact\u7684\u8bed\u6cd5\u89c4\u5219 Person.propTypes = { \/\/ name\u5fc5\u987b\u4f20String\u7c7b\u578b\uff0c\u4e14\u4e3a\u5fc5\u4f20\uff1b\u8fd9\u91cc\u5927\u5199\u7684PropTypes\u662f\u5f15\u5165prop-type.js\u540e\u8bfb\u53d6\u7684\u9650\u5236\u7c7b\u578b name: PropTypes.string.isRequired, \/\/ age\u5fc5\u987b\u662fNumber\u7c7b\u578b\uff0c\u4f46\u4e0d\u662f\u5fc5\u4f20 age: PropTypes.number, \/\/ speak\u5fc5\u987b\u662f\u51fd\u6570 speak: PropTypes.func } \/\/ \u6307\u5b9a\u6807\u7b7e\u5c5e\u6027\u9ed8\u8ba4\u503c Person.defaultProps = { \/\/ \u82e5\u4e0d\u4f20age\uff0c\u5219age\u9ed8\u8ba4\u4e3a999 age: 999 } const p1 = { name: '\u5f20\u4e09', age: 18 } const p2 = { name: '\u674e\u56db', age: 22 } ReactDOM.render(<Person {...p1} \/>, document.getElementById(\"test1\")) ReactDOM.render(<Person {...p2} \/>, document.getElementById(\"test2\")) <\/script> <\/code><\/pre>\n
                                                          props\u7b80\u5199<\/h5>\n
                                                          \u5728\u4e0a\u4e00\u8282\u4e2d\uff0cpropTypes \u548c defaultProps \u88ab\u5199\u5230\u4e86\u7c7b\u7684\u5916\u9762\uff0c\u53ef\u662f\u5b83\u4eec\u4e5f\u662f\u5173\u4e8e\u7ec4\u4ef6\u672c\u8eab\u7684\u5185\u5bb9\uff0c\u6211\u4eec\u5e0c\u671b\u5c06\u5176\u5199\u5230\u7c7b\u4e2d\uff1a<\/p>\n
                                                          class Person extends React.Component { \/\/ \u8fd9\u91cc\u8981\u7528static\u5173\u952e\u5b57\uff0c\u5c06propTypes\u6dfb\u52a0\u5230Person\u7ec4\u4ef6\u672c\u8eab\uff1b\u5982\u679c\u4e0d\u52a0\u7684\u8bdd\uff0c\u5219\u662f\u52a0\u5230\u7ec4\u4ef6\u5b9e\u4f8b\u4e0a static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, speak: PropTypes.func } static defaultProps = { age: 999 } render() { const { name, age } = this.props return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } const p1 = { name: '\u5f20\u4e09' } const p2 = { name: '\u674e\u56db', age: 22 } ReactDOM.render(<Person {...p1} \/>, document.getElementById(\"test1\")) ReactDOM.render(<Person {...p2} \/>, document.getElementById(\"test2\")) <\/code><\/pre>\n
                                                          \u6784\u9020\u5668\u63a5\u6536props<\/h5>\n
                                                          \u6784\u9020\u5668\u4e2d\u662f\u5426\u8981\u63a5\u6536 props\uff0c\u662f\u5426\u8981\u4f20\u9012\u7ed9 super()\uff0c\u53d6\u51b3\u4e8e\u662f\u5426\u5e0c\u671b\u5728\u6784\u9020\u5668\u4e2d\u901a\u8fc7 this \u8bbf\u95ee props\uff08\u4e00\u822c\u6ca1\u8fd9\u9700\u6c42\uff0c\u800c\u4e14\u4e00\u822c\u6784\u9020\u5668\u90fd\u4e0d\u5199\uff09<\/p>\n
                                                          class Person extends React.Component { \/\/ \u6784\u9020\u5668\u63a5\u6536props constructor(props) { \/\/ \u4f20\u9012super() super(props) console.log(this.props) \/\/ { name: '\u674e\u56db', age: 22 } } \/\/ \u6784\u9020\u5668\u4e0d\u63a5\u6536props constructor() { \/\/ \u4e0d\u4f20\u9012super() super() console.log(this.props) \/\/ \u6b64\u5904\u6784\u9020\u5668\u4e2d\u6253\u5370undefined\uff0c\u4f46\u662f\u53ef\u4ee5\u901a\u8fc7\u522b\u7684\u5730\u65b9\u7684this.props\u83b7\u53d6\u503c\uff0c\u56e0\u4e3aReact\u5e2e\u6211\u4eec\u628a\u503c\u8d4b\u5230\u4e86this.props\u4e0a } render() { console.log(this.props); const { name, age } = this.props return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> <li>\u5e74\u9f84\uff1a{age}<\/li> <\/ul> ) } } const p2 = { name: '\u674e\u56db', age: 22 } ReactDOM.render(<Person {...p2} \/>, document.getElementById(\"test2\")) <\/code><\/pre>\n
                                                          \u51fd\u6570\u5f0f\u7ec4\u4ef6\u4f7f\u7528props<\/h5>\n
                                                          \u7c7b\u5f0f\u7ec4\u4ef6\u4f7f\u7528 props \u65f6\u662f\u901a\u8fc7 this.props \u8c03\u7528\u7684\uff0c\u6240\u4ee5\u662f\u7531\u7ec4\u4ef6\u5b9e\u4f8b\u8c03\u7528\u7684\uff0c\u56e0\u6b64\u5982\u679c\u6ca1\u6709\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u5c31\u65e0\u6cd5\u4f7f\u7528 props<\/p>\n
                                                          \u4f46\u662f\u51fd\u6570\u5f0f\u7ec4\u4ef6\u5373\u4f7f\u6ca1\u6709\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528 props\uff0c\u56e0\u4e3a\u51fd\u6570\u5f0f\u7ec4\u4ef6\u53ef\u4ee5\u63a5\u6536\u53c2\u6570<\/p>\n
                                                          \/\/ \u51fd\u6570\u53c2\u6570\u63a5\u6536props\uff0c\u4f1a\u81ea\u52a8\u5c06\u4f20\u5165\u7684\u5404\u9879\u5c5e\u6027\u5c01\u88c5\u4e3a\u5bf9\u8c61 function Person(props) { const { name, age } = props console.log(props) \/\/ {name: \"\u5f20\u4e09\", age: 18} return ( <ul> <li>\u59d3\u540d\uff1a{name}<\/li> \/\/ \u5f20\u4e09 <li>\u5e74\u9f84\uff1a{age}<\/li> \/\/ 999 <\/ul> ) } \/\/ \u51fd\u6570\u4e2d\u65e0\u6cd5\u4f7f\u7528static\u5173\u952e\u5b57\uff0c\u6240\u4ee5props\u53c2\u6570\u9650\u5236\u548c\u9ed8\u8ba4\u503c\u8981\u5199\u5230\u5916\u9762 Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, } Person.defaultProps = { age: 999 } ReactDOM.render(<Person name='\u5f20\u4e09' \/>, document.getElementById('test1')) <\/code><\/pre>\n
                                                          children\u5c5e\u6027<\/h5>\n
                                                          \u5728\u8c03\u7528\u7ec4\u4ef6\u65f6\uff0c\u6807\u7b7e\u4f53\u5185\u5bb9\u4f1a\u88ab\u4f5c\u4e3a children \u5c5e\u6027\u4f20\u9012\u7ed9\u7ec4\u4ef6\u7684 props \u4e2d<\/p>\n
                                                          \u5982\uff1a<\/p>\n
                                                          \/\/ \u8c03\u7528\u81ea\u5df1\u5c01\u88c5\u7684MyNavLink\u7ec4\u4ef6\uff0c\u6807\u7b7e\u4f53\u5185\u5bb9\u4e3aabout <MyNavLink to=\"\/about\">about<\/MyNavLink> \/\/ \u5728MyNavLink\u4e2d\u6253\u5370props\uff1a {to: '\/home', children: 'about'} <\/code><\/pre>\n
                                                          refs<\/h4>\n
                                                          \n
                                                          React \u5efa\u8bae\u5c3d\u91cf\u51cf\u5c11 ref \u7684\u4f7f\u7528<\/p>\n<\/blockquote>\n
                                                          \u6848\u4f8b\uff1a\u6709\u4e00\u4e2a\u8f93\u5165\u6846\u548c\u4e00\u4e2a\u6309\u94ae\uff0c\u70b9\u51fb\u6309\u94ae\uff0c\u5f39\u51fa\u8f93\u5165\u6846\u4e2d\u7684\u5185\u5bb9<\/p>\n
                                                          \u5206\u522b\u4f7f\u7528\u5b57\u7b26\u4e32\u5f62\u5f0f\u3001\u56de\u8c03\u51fd\u6570\u5f62\u5f0f\u548c createRef \u5f62\u5f0f\u6765\u5b9e\u73b0<\/p>\n
                                                          \u5b57\u7b26\u4e32\u5f62\u5f0fref<\/h5>\n
                                                          \u5728\u865a\u62df DOM \u4e0a\u6dfb\u52a0 ref \u5c5e\u6027\uff0c\u6b64\u865a\u62df DOM \u8f6c\u4e3a\u771f\u5b9e DOM \u540e\u7684\u8282\u70b9\u5c31\u4f1a\u88ab\u653e\u5230\u7ec4\u4ef6\u5b9e\u4f8b\u7684 refs \u5bf9\u8c61\u4e2d<\/p>\n
                                                          class MyComponent extends React.Component { render() { return ( <div> \/\/ \u7ed9\u5143\u7d20\u6dfb\u52a0ref\u5c5e\u6027\uff0c\u8be5\u5143\u7d20\u5728\u8f6c\u4e3a\u771f\u5b9eDOM\u8282\u70b9\u540e\u4f1a\u88ab\u6dfb\u52a0\u81f3\u7ec4\u4ef6\u5b9e\u4f8b\u7684refs\u5bf9\u8c61\u4e2d <input ref=\"ipt\" type=\"text\" \/> <button onClick={this.show}>\u70b9\u6211<\/button> <\/div> ) } show = () => { \/\/ \u76f4\u63a5\u4ecerefs\u5c5e\u6027\u4e2d\u83b7\u53d6\u8282\u70b9\u5373\u53ef\uff1b\u4e0d\u9700\u8981\u901a\u8fc7\u7ed9\u5143\u7d20\u6dfb\u52a0id\uff0c\u7136\u540e\u518dgetElementById\u8fd9\u79cd\u65b9\u5f0f\u83b7\u53d6\u8282\u70b9 const { ipt } = this.refs alert(ipt.value); } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                          \n
                                                          \u7531\u4e8e\u5b57\u7b26\u4e32\u5f62\u5f0f ref \u7684\u6548\u7387\u95ee\u9898\uff0cReact \u5b98\u65b9\u5e76\u4e0d\u63a8\u8350\u4f7f\u7528\uff0c\u5e76\u4e14\u5c06\u5728\u540e\u7eed\u7248\u672c\u4e2d\u5220\u9664<\/p>\n<\/blockquote>\n
                                                          \u56de\u8c03\u51fd\u6570\u5f62\u5f0fref<\/h5>\n
                                                          \u5185\u8054\u51fd\u6570\u5f62\u5f0f<\/h6>\n
                                                          \u5185\u8054\u51fd\u6570\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u76f4\u63a5\u5728\u8868\u8fbe\u5f0f\u91cc\u9762\u5b9a\u4e49\u4e86\u4e00\u4e2a\u51fd\u6570\uff0c\u6216\u8005\u76f4\u63a5\u628a\u4e00\u4e2a\u51fd\u6570\u4e22\u5728\u90a3<\/p>\n
                                                          class MyComponent extends React.Component { render() { return ( <div> \/\/ \u6b64\u5904ref\u7684\u503c\u662f\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u51fd\u6570\u7684\u53c2\u6570\u5c31\u662f\u8be5\u8282\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u8be5\u8282\u70b9\u653e\u5230\u7ec4\u4ef6\u5b9e\u4f8b\u4e0a <input ref={(c) => { this.ipt = c }} type=\"text\" \/> <button onClick={this.show}>\u70b9\u6211<\/button> <\/div> ) } show = () => { \/\/ \u4ece\u7ec4\u4ef6\u793a\u4f8b\u4e0a\u83b7\u53d6\u8be5\u8282\u70b9 const { ipt } = this alert(ipt.value); } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                          \u5185\u8054\u51fd\u6570\u5f62\u5f0f\u6269\u5c55\uff1a<\/p>\n
                                                            \n
                                                          • \u5185\u8054\u51fd\u6570\u5728\u66f4\u65b0\u65f6\u4f1a\u88ab\u6267\u884c\u4e24\u6b21\uff0c\u7b2c\u4e00\u6b21\u4f20\u5165 null\uff0c\u7b2c\u4e8c\u6b21\u624d\u662f DOM \u8282\u70b9<\/li>\n
                                                          • \u8fd9\u662f\u56e0\u4e3a\u6bcf\u6b21\u6e32\u67d3\u65f6\u4f1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\u5b9e\u4f8b\uff0c\u6240\u4ee5 React \u8981\u5148\u6e05\u7a7a\u65e7\u7684 ref \u518d\u8bbe\u7f6e\u65b0\u7684\uff0c\u6240\u4ee5\u7b2c\u4e00\u6b21\u4f20\u5165\u7684\u53c2\u6570\u4e3a null<\/li>\n
                                                          • \u8fd9\u4e2a\u95ee\u9898\u5176\u5b9e\u662f\u65e0\u5173\u7d27\u8981\u7684\uff0c\u5982\u679c\u60f3\u907f\u514d\u6b64\u95ee\u9898\uff0c\u53ef\u4ee5\u5c06\u56de\u8c03\u51fd\u6570\u7ed1\u5b9a\u5230\u7c7b\u4e0a<\/li>\n<\/ul>\n
                                                            \u6d4b\u8bd5\uff1a\u6211\u4eec\u4e3a\u6807\u7b7e\u6dfb\u52a0\u5185\u8054\u5f62\u5f0f\u56de\u8c03\u51fd\u6570\uff0c\u7136\u540e\u518d\u6dfb\u52a0\u4e00\u4e2a\u4fee\u6539 state \u7684\u65b9\u6cd5\uff0c\u901a\u8fc7\u4fee\u6539 state \u89e6\u53d1\u7ec4\u4ef6\u7684\u91cd\u65b0 render\uff0c\u770b\u770b\u5185\u8054\u51fd\u6570\u6253\u5370\u7684\u53c2\u6570\u662f\u4ec0\u4e48<\/p>\n
                                                            class MyComponent extends React.Component { state = { num: 0 } render() { return ( <div> \/\/ 1. \u6b64\u5904\u5185\u8054\u51fd\u6570\u5728\u7b2c\u4e00\u6b21\u6e32\u67d3\u9875\u9762\u7684\u65f6\u5019\u6267\u884c\u4e86\u4e00\u6b21\uff0c\u5e76\u6210\u529f\u6253\u5370\u8282\u70b9 \/\/ 2. \u66f4\u65b0\u9875\u9762\u65f6\uff0c\u5185\u8054\u51fd\u6570\u6267\u884c\u4e86\u4e24\u6b21\uff0c\u7b2c\u4e00\u6b21\u4e3anull\uff0c\u7b2c\u4e8c\u6b21\u6210\u529f\u6253\u5370\u8282\u70b9 <input ref={(c) => { this.ipt = c; console.log(c); }} type=\"text\" \/> <button onClick={this.show}>\u70b9\u6211\u5c55\u793a\u8f93\u5165\u6846\u5185\u5bb9<\/button> <button onClick={this.add}>\u70b9\u6211\u4fee\u6539state<\/button> <\/div> ) } show = () => { const { ipt } = this alert(ipt.value); } add = () => { this.setState({ num: ++this.state.num }) } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                            \u7c7b\u7ed1\u5b9a\u51fd\u6570\u5f62\u5f0f<\/h6>\n
                                                            \u7c7b\u7ed1\u5b9a\u51fd\u6570\uff0c\u5c31\u662f\u5728\u7c7b\u4e2d\u5b9a\u4e49\u7684\u51fd\u6570<\/p>\n
                                                            class MyComponent extends React.Component { state = { num: 0 } render() { return ( <div> \/\/ 1. \u6b64\u5904ref\u503c\u4e3a\u7c7b\u7ed1\u5b9a\u51fd\u6570\uff0c\u53ea\u5728\u7b2c\u4e00\u6b21\u6e32\u67d3\u9875\u9762\u65f6\u6267\u884c\u4e00\u6b21 \/\/ 2. \u66f4\u65b0\u9875\u9762\u65f6\uff0c\u4e0d\u4f1a\u518d\u6b21\u6267\u884c\u7c7b\u7ed1\u5b9a\u51fd\u6570\uff0c\u56e0\u4e3a\u8be5\u51fd\u6570\u5df2\u7ecf\u653e\u5728\u7c7b\u81ea\u8eab\u4e86\uff0c\u5c31\u7b97\u91cd\u65b0\u8c03\u7528render\uff0c\u4e5f\u77e5\u9053\u5b83\u5e76\u4e0d\u662f\u4e00\u4e2a\u65b0\u7684\u51fd\u6570 <input ref={this.getIpt} type=\"text\" \/> <button onClick={this.show}>\u70b9\u6211\u5c55\u793a\u8f93\u5165\u6846\u5185\u5bb9<\/button> <button onClick={this.add}>\u70b9\u6211\u4fee\u6539state<\/button> <\/div> ) } show = () => { const { ipt } = this alert(ipt.value); } add = () => { this.setState({ num: ++this.state.num }) } \/\/ \u7c7b\u7ed1\u5b9a\u51fd\u6570 getIpt = (c) => { this.ipt = c; console.log(c); } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                            createRef\u5f62\u5f0f<\/h5>\n
                                                            class MyComponent extends React.Component { \/\/ createRef()\u51fd\u6570\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5bb9\u5668\uff0c\u8fd9\u4e2a\u5bb9\u5668\u5b58\u50a8\u88abref\u6240\u6807\u8bc6\u7684\u8282\u70b9 \/\/ \u4e00\u4e2a\u5bb9\u5668\u53ea\u80fd\u5b58\u653e\u4e00\u4e2a\u8282\u70b9\uff0c\u540e\u5b58\u7684\u8282\u70b9\u4f1a\u628a\u5148\u5b58\u7684\u9876\u6389 \/\/ \u5982\u679c\u60f3\u540c\u65f6\u4fdd\u5b58\u591a\u4e2a\u8282\u70b9\uff0c\u5219\u9700\u8981\u521b\u5efa\u591a\u4e2a\u5bb9\u5668 myRef = React.createRef() render() { return ( <div> \/\/ \u6b64\u5904ref\u503c\u4e3acreateRef()\u8fd4\u56de\u7684\u5bb9\u5668\u540d <input ref={this.myRef} type=\"text\" \/> <button onClick={this.show}>\u70b9\u6211\u5c55\u793a\u8f93\u5165\u6846\u5185\u5bb9<\/button> <\/div> ) } show = () => { console.log(this.myRef); \/\/ {current: input} alert(this.myRef.current.value) } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                            \u4e8b\u4ef6\u5904\u7406<\/h3>\n
                                                              \n
                                                            • \n
                                                              \u901a\u8fc7 onXxx \u5c5e\u6027\u6307\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570<\/p>\n
                                                                \n
                                                              • React \u4f7f\u7528\u7684\u662f\u81ea\u5b9a\u4e49\uff08\u5408\u6210\uff09\u4e8b\u4ef6\uff0c\u800c\u4e0d\u662f\u4f7f\u7528\u7684\u539f\u751f DOM \u4e8b\u4ef6\uff08\u4e3a\u4e86\u66f4\u597d\u7684\u517c\u5bb9\u6027\uff09<\/li>\n
                                                              • React \u4e2d\u7684\u4e8b\u4ef6\u662f\u901a\u8fc7\u4e8b\u4ef6\u59d4\u6258\u65b9\u5f0f\uff08\u5192\u6ce1\uff09\u6765\u5904\u7406\u7684\uff0c\u4e5f\u5c31\u662f\u59d4\u6258\u7ed9\u7ec4\u4ef6\u6700\u5916\u5c42\u7684\u5143\u7d20\uff08\u4e3a\u4e86\u66f4\u9ad8\u7684\u6548\u7387\uff09<\/li>\n<\/ul>\n<\/li>\n
                                                              • \n
                                                                \u901a\u8fc7 event.target \u53ef\u4ee5\u5f97\u5230\u89e6\u53d1\u4e8b\u4ef6\u7684 DOM \u5143\u7d20\u5bf9\u8c61\uff08\u53ef\u4ee5\u51cf\u5c11 ref \u7684\u4f7f\u7528\uff09<\/p>\n
                                                                class MyComponent extends React.Component { render() { return ( <div> \/\/ \u6ce8\u518c\u9f20\u6807\u5931\u7126\u4e8b\u4ef6 <input onBlur={this.show} type=\"text\" \/> <\/div> ) } \/\/ \u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7684\u53c2\u6570\u5c31\u662f\u89e6\u53d1\u4e8b\u4ef6\u7684DOM\u5143\u7d20\u5bf9\u8c61 show = (event) => { console.log(event.target); \/\/ <input type=\"text\"> alert(event.target.value) } } ReactDOM.render(<MyComponent \/>, document.getElementById(\"test\")) <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                \u975e\u53d7\u63a7\u7ec4\u4ef6<\/h3>\n
                                                                \u5f53\u9700\u8981\u4f7f\u7528\u8868\u5355\u6570\u636e\u65f6\u624d\u53bb\u53d6\uff0c\u5c31\u662f\u975e\u53d7\u63a7<\/p>\n
                                                                class Login extends React.Component { render() { return ( <div> <form action=\"#\"> \u7528\u6237\u540d\uff1a<input ref={c => this.username = c} type=\"text\" \/> \u5bc6\u7801\uff1a<input ref={c => this.password = c} type=\"password\" \/> <button onClick={this.submit}>\u63d0\u4ea4<\/button> <\/form> <\/div> ) } submit = () => { \/\/ \u5f53\u9700\u8981\u4f7f\u7528\u8868\u5355\u6570\u636e\u65f6\u624d\u53bb\u53d6 const { username, password } = this console.log(\"\u51c6\u5907\u63d0\u4ea4\u7528\u6237\u540d\u548c\u5bc6\u7801...\"); console.log(`\u7528\u6237\u540d\u4e3a${username.value}\uff0c\u5bc6\u7801\u4e3a${password.value}`); } } ReactDOM.render(<Login \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                                \u53d7\u63a7\u7ec4\u4ef6<\/h3>\n
                                                                \u8868\u5355\u6570\u636e\u968f\u7740\u8f93\u5165\u88ab\u7ef4\u62a4\u5230\u72b6\u6001\u4e2d\uff0c\u5c31\u662f\u53d7\u63a7<\/p>\n
                                                                \u63a8\u8350\u4f7f\u7528\u53d7\u63a7\u7ec4\u4ef6\uff0c\u56e0\u4e3a\u53ef\u4ee5\u51cf\u5c11 ref \u7684\u4f7f\u7528<\/p>\n
                                                                class Login extends React.Component { state = { username: \"\", password: \"\" } render() { return ( <div> <form action=\"#\"> \/\/ \u8868\u5355\u6570\u636e\u968f\u7740\u8f93\u5165\u88ab\u7ef4\u62a4\u5230\u72b6\u6001\u4e2d \u7528\u6237\u540d\uff1a<input onChange={this.saveUsername} type=\"text\" \/> \u5bc6\u7801\uff1a<input onChange={this.savePassword} type=\"password\" \/> <button onClick={this.submit}>\u63d0\u4ea4<\/button> <\/form> <\/div> ) } saveUsername = (event) => { this.setState({ username: event.target.value }) } savePassword = (event) => { this.setState({ password: event.target.value }) } submit = () => { const { username, password } = this.state console.log(\"\u51c6\u5907\u63d0\u4ea4\u7528\u6237\u540d\u548c\u5bc6\u7801...\"); console.log(`\u7528\u6237\u540d\u4e3a${username}\uff0c\u5bc6\u7801\u4e3a${password}`); } } ReactDOM.render(<Login \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                                \u51fd\u6570\u67ef\u91cc\u5316<\/h2>\n
                                                                \u51fd\u6570\u67ef\u91cc\u5316\uff1a\u901a\u8fc7\u8c03\u7528\u51fd\u6570\u7ee7\u7eed\u8fd4\u56de\u51fd\u6570<\/strong>\u7684\u65b9\u5f0f\uff0c\u5b9e\u73b0\u591a\u6b21\u63a5\u6536\u53c2\u6570\u6700\u540e\u7edf\u4e00\u5904\u7406<\/strong>\u7684\u51fd\u6570\u7f16\u7801\u5f62\u5f0f<\/p>\n
                                                                \u9ad8\u9636\u51fd\u6570\uff1a\u5982\u679c\u4e00\u4e2a\u51fd\u6570\u7b26\u5408\u4e0b\u9762\u4e24\u4e2a\u89c4\u8303\u4e2d\u7684\u4efb\u610f\u4e00\u4e2a\uff0c\u90a3\u8be5\u51fd\u6570\u5c31\u662f\u9ad8\u9636\u51fd\u6570\uff08\u5e38\u89c1\u9ad8\u9636\u51fd\u6570\uff1aPromise\u3001setTimeout\u3001arr.map\uff09<\/p>\n
                                                                  \n
                                                                1. \u82e5 A \u51fd\u6570\u63a5\u6536\u7684\u53c2\u6570\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u4e48 A \u5c31\u53ef\u4ee5\u79f0\u4e4b\u4e3a\u9ad8\u9636\u51fd\u6570<\/li>\n
                                                                2. \u82e5 A \u51fd\u6570\u7684\u8fd4\u56de\u503c\u4f9d\u7136\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u4e48 A \u5c31\u53ef\u4ee5\u79f0\u4e4b\u4e3a\u9ad8\u9636\u51fd\u6570<\/li>\n<\/ol>\n
                                                                  \u6848\u4f8b\uff1a\u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u5206\u522b\u5199\u4e86\u4e24\u4e2a\u65b9\u6cd5\u7528\u4e8e\u4fdd\u5b58\u7528\u6237\u540d\u548c\u5bc6\u7801\uff0c\u53ef\u5982\u679c\u6709\u5f88\u591a\u4e2a\u8868\u5355\u65f6\u5c31\u5f88\u9ebb\u70e6\uff0c\u6240\u4ee5\u9700\u8981\u62bd\u8c61\u4e3a\u4e00\u4e2a\u65b9\u6cd5\u6765\u4fdd\u5b58<\/p>\n
                                                                  class Login extends React.Component { state = { username: \"\", password: \"\" } render() { return ( <div> <form action=\"#\"> \/\/ \u65e2\u7136onChange\u9700\u8981\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u5c31\u8ba9saveProp()\u65b9\u6cd5\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570 \/\/ \u8fd9\u91cc\u51fd\u6570\u540d\u540e\u6709\u62ec\u53f7\uff0c\u4f1a\u76f4\u63a5\u8fdb\u884c\u8c03\u7528\uff0c\u5e76\u4f20\u5165\u53c2\u6570\uff0c\u7136\u540e\u5c06saveProp()\u65b9\u6cd5\u8fd4\u56de\u7684\u51fd\u6570\u6ce8\u518c\u5230onChange\u4e8b\u4ef6 \u7528\u6237\u540d\uff1a<input onChange={this.saveProp('username')} type=\"text\" \/> \u5bc6\u7801\uff1a<input onChange={this.saveProp('password')} type=\"password\" \/> <\/form> <\/div> ) } \/\/ key\uff1a\u4f20\u5165\u7684\u53c2\u6570\uff0c\u7528\u4e8e\u63a5\u6536\u8868\u5355\u7684name saveProp = (key) => { \/\/ \u6700\u7ec8\u5c06\u4e0b\u9762\u8fd9\u4e2a\u51fd\u6570\u6ce8\u518c\u5230onChange\u4e8b\u4ef6\uff0c\u6240\u4ee5\u8fd9\u4e2a\u51fd\u6570\u53ef\u4ee5\u62ff\u5230event\u5bf9\u8c61 return (event) => { \/\/ \u8bbe\u7f6e\u72b6\u6001\uff1a\u6ce8\u610f\u8fd9\u91cc[key]\u8981\u7528\u4e2d\u62ec\u53f7\u5305\u8d77\u6765\uff0c\u624d\u53ef\u4ee5\u8bfb\u53d6\u5230\u53d8\u91cfkey\u7684\u503c\uff0c\u4e0d\u7136\u4f1a\u539f\u5c01\u4e0d\u52a8\u7684\u5c06'key'\u6dfb\u52a0\u5230\u72b6\u6001\u91cc this.setState({ [key]: event.target.value }) } } } ReactDOM.render(<Login \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                                  \u4e0a\u9762\u662f\u4f7f\u7528\u51fd\u6570\u67ef\u91cc\u5316\u7684\u5b9e\u73b0\u65b9\u5f0f\uff0c\u6211\u4eec\u4e0d\u4f7f\u7528\u67ef\u91cc\u5316\u4e5f\u53ef\u4ee5\u5b9e\u73b0\uff1a<\/p>\n
                                                                  class Login extends React.Component { state = { username: \"\", password: \"\" } render() { return ( <div> <form action=\"#\"> \/\/ \u65e2\u7136onChange\u9700\u8981\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u6211\u4eec\u76f4\u63a5\u4f20\u4e00\u4e2a\u533f\u540d\u51fd\u6570\uff0c\u51fd\u6570\u5185\u90e8\u8c03\u7528saveProp()\u65b9\u6cd5\uff0c\u4f20\u9012name\u503c\u548cevent \u7528\u6237\u540d\uff1a<input onChange={(event) => { this.saveProp('username', event) }} type=\"text\" \/> \u5bc6\u7801\uff1a<input onChange={(event) => { this.saveProp('password', event) }} type=\"password\" \/> <\/form> <\/div> ) } saveProp = (key, event) => { this.setState({ [key]: event.target.value }) } } ReactDOM.render(<Login \/>, document.getElementById(\"test\")) <\/code><\/pre>\n
                                                                  \u7eaf\u51fd\u6570<\/h2>\n
                                                                  \u7eaf\u51fd\u6570\u5b9a\u4e49\uff1a<\/p>\n
                                                                    \n
                                                                  1. \u65e0\u8bba\u4f55\u65f6\u4f20\u5165\u540c\u6837\u7684\u53c2\u6570\uff0c\u90fd\u4f1a\u5f97\u5230\u540c\u6837\u7684\u8f93\u51fa<\/li>\n
                                                                  2. \u4e0d\u5f97\u5bf9\u53c2\u6570\u8fdb\u884c\u4fee\u6539<\/li>\n
                                                                  3. \u4e0d\u505a\u4e0d\u7a33\u5b9a\u7684\u4e8b\u60c5\uff0c\u5982\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42\uff0c\u8fde\u63a5\u8f93\u5165\u8bbe\u5907<\/li>\n
                                                                  4. \u4e0d\u80fd\u8c03\u7528 Date.now() \u6216 Math.random() \u7b49\u4e0d\u7eaf\u7684\u65b9\u6cd5<\/li>\n<\/ol>\n
                                                                    \u4ee3\u7801\u6f14\u793a\uff1a<\/p>\n
                                                                    function<\/span> pure<\/span>(<\/span>n<\/span>)<\/span>{ \n   <\/span> \/\/ \u4e0d\u5f97\u5bf9\u53c2\u6570\u8fdb\u884c\u4fee\u6539<\/span> n =<\/span> 1<\/span>;<\/span> \/\/ \u4e0d\u505a\u4e0d\u7a33\u5b9a\u7684\u4e8b\u60c5<\/span> axios.<\/span>get<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u4e0d\u80fd\u8c03\u7528\u4e0d\u7eaf\u7684\u65b9\u6cd5<\/span> const<\/span> now =<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>;<\/span> }<\/span> \/\/ \u65e0\u8bba\u4f55\u65f6\u4f20\u5165\u540c\u6837\u7684\u53c2\u6570\uff0c\u90fd\u8981\u5f97\u5230\u540c\u6837\u7684\u8f93\u51fa<\/span> pure<\/span>(<\/span>1<\/span>)<\/span>;<\/span> \/\/ 1;<\/span> pure<\/span>(<\/span>1<\/span>)<\/span>;<\/span> \/\/ 2; \/\/ \u65e0\u8bba\u4f55\u65f6\u4f201\u8fdb\u53bb\uff0c\u90fd\u5e94\u8fd4\u56de1<\/span> <\/code><\/pre>\n
                                                                    \u751f\u547d\u5468\u671f<\/h2>\n
                                                                    \u7ec4\u4ef6\u4ece\u521b\u5efa\u5230\u6b7b\u4ea1\u4f1a\u7ecf\u5386\u4e00\u4e9b\u7279\u5b9a\u7684\u9636\u6bb5<\/p>\n
                                                                    React \u7ec4\u4ef6\u4e2d\u5305\u542b\u4e00\u7cfb\u5217\u52fe\u5b50\u51fd\u6570\uff08\u751f\u547d\u5468\u671f\u56de\u8c03\u51fd\u6570\uff09\uff0c\u4f1a\u5728\u7279\u5b9a\u7684\u65f6\u523b\u8c03\u7528<\/p>\n
                                                                    \u6211\u4eec\u5728\u5b9a\u4e49\u7ec4\u4ef6\u65f6\uff0c\u4f1a\u5728\u7279\u5b9a\u7684\u751f\u547d\u5468\u671f\u56de\u8c03\u51fd\u6570\u4e2d\u505a\u7279\u5b9a\u7684\u5de5\u4f5c<\/p>\n
                                                                    \u751f\u547d\u5468\u671f\u6d41\u7a0b\uff08\u65e7\uff09<\/h3>\n
                                                                    \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                      \n
                                                                    • constructor\uff1a\u6784\u9020\u51fd\u6570<\/li>\n
                                                                    • render\uff1a\u6e32\u67d3\u7ec4\u4ef6<\/li>\n
                                                                    • componentWillMount\uff1a\u7ec4\u4ef6\u5c06\u8981\u6302\u8f7d\uff08\u6302\u8f7d<\/strong>\uff1a\u7ec4\u4ef6\u7b2c\u4e00\u6b21\u6e32\u67d3\u65f6\uff0c\u5176\u5b9e\u5c31\u662f\u5c06\u7ec4\u4ef6\u6302\u8f7d\u5230\u9875\u9762\u4e0a\uff09<\/li>\n
                                                                    • componentDidMount\uff1a\u7ec4\u4ef6\u6302\u8f7d\u5b8c\u6bd5<\/li>\n
                                                                    • componentWillUnmount\uff1a\u7ec4\u4ef6\u5c06\u8981\u5378\u8f7d\uff08\u5378\u8f7d<\/strong>\uff1a\u5c06\u7ec4\u4ef6\u4ece\u9875\u9762\u4e0a\u5220\u9664\uff09<\/li>\n
                                                                    • shouldComponentUpdate\uff1a\u63a7\u5236\u7ec4\u4ef6\u66f4\u65b0\u7684\u9600\u95e8\uff0c\u6267\u884c setState() \u65b9\u6cd5\u65f6\uff0c\u9700\u8981<\/li>\n
                                                                    • componentWillUpdate\uff1a\u7ec4\u4ef6\u5c06\u8981\u66f4\u65b0<\/li>\n
                                                                    • componentDidUpdate\uff1a\u7ec4\u4ef6\u66f4\u65b0\u5b8c\u6bd5<\/li>\n<\/ul>\n
                                                                      class LiftCycle extends React.Component { \/\/ \u6784\u9020\u51fd\u6570 constructor() { console.log('constructor'); super() this.state = { count: 0 } } \/\/ \u6e32\u67d3\u7ec4\u4ef6 render() { console.log('render'); return ( <div> <h1>{this.state.count}<\/h1> <button onClick={this.add}>\u70b9\u6211+1<\/button> <button onClick={this.unmount}>\u5378\u8f7d\u7ec4\u4ef6<\/button> <\/div> ) } \/\/ \u7ec4\u4ef6\u5c06\u8981\u6302\u8f7d componentWillMount() { console.log('componentWillMount'); } \/\/ \u7ec4\u4ef6\u6302\u8f7d\u5b8c\u6bd5 \/\/ \u53ea\u4f1a\u5728\u7b2c\u4e00\u6b21\u6e32\u67d3\u65f6\u6267\u884c\u4e00\u6b21 componentDidMount() { console.log('componentDidMount'); } \/\/ \u7ec4\u4ef6\u5c06\u8981\u5378\u8f7d componentWillUnmount() { console.log('componentWillUnmount'); } \/\/ \u63a7\u5236\u7ec4\u4ef6\u66f4\u65b0\u7684\u9600\u95e8\uff0c\u4e5f\u5c31\u662f\u8c03\u7528setState()\u540e\u4f1a\u5148\u6765\u5224\u65ad\u4e00\u4e0b\u8fd9\u4e2a\uff0c\u51b3\u5b9a\u6d41\u7a0b\u662f\u5426\u7ee7\u7eed\u5f80\u4e0b\u8d70 \/\/ \u5982\u679c\u4e0d\u5199\u8be5\u51fd\u6570\uff0cReact\u9ed8\u8ba4\u5176\u8fd4\u56de\u503c\u4e3atrue\uff1b\u5982\u679c\u5199\u4e86\uff0c\u5219\u5fc5\u987b\u8fd4\u56de\u4e00\u4e2aboolean\u503c \/\/ \u8fd4\u56detrue\u65f6\uff0c\u5141\u8bb8\u7ec4\u4ef6\u66f4\u65b0\uff1b\u5426\u5219\u7981\u6b62\u66f4\u65b0 shouldComponentUpdate() { console.log('shouldComponentUpdate'); return true; } \/\/ \u7ec4\u4ef6\u5c06\u8981\u66f4\u65b0 componentWillUpdate() { console.log('componentWillUpdate'); } \/\/ \u7ec4\u4ef6\u66f4\u65b0\u5b8c\u6bd5 componentDidUpdate() { console.log('componentDidUpdate'); } add = () => { let { count } = this.state this.setState({ count: ++count }) } unmount = () => { ReactDOM.unmountComponentAtNode(document.getElementById('test')) } } ReactDOM.render(<LiftCycle \/>, document.getElementById('test')) <\/code><\/pre>\n
                                                                      forceUpdate()<\/h4>\n
                                                                      forceUpdate() \u65b9\u6cd5\u4f1a\u5f3a\u5236\u66f4\u65b0\u7ec4\u4ef6\uff0c\u4e14\u4e0d\u53d7 shouldComponentUpdate \u9600\u95e8\u7684\u63a7\u5236<\/p>\n
                                                                      forceUpdate() \u4e0d\u4f1a\u5bf9\u72b6\u6001\u8fdb\u884c\u4fee\u6539<\/p>\n
                                                                      class LiftCycle extends React.Component { constructor() { console.log('constructor'); super() this.state = { count: 0 } } \/\/ \u6e32\u67d3\u7ec4\u4ef6 render() { console.log('render'); return ( <div> <h1>{this.state.count}<\/h1> <button onClick={this.add}>\u70b9\u6211+1<\/button> <button onClick={this.force}>\u5f3a\u5236\u66f4\u65b0\u7ec4\u4ef6<\/button> <\/div> ) } add = () => { let { count } = this.state this.setState({ count: ++count }) } force = () => { \/\/ \u5f3a\u5236\u66f4\u65b0 this.forceUpdate() } \/\/ \u63a7\u5236\u7ec4\u4ef6\u66f4\u65b0\u7684\u9600\u95e8 shouldComponentUpdate() { console.log('shouldComponentUpdate'); \/\/ \u5373\u4f7f\u9600\u95e8\u5173\u95ed\uff0c\u4f9d\u7136\u4f1a\u5f3a\u5236\u66f4\u65b0 return false; } \/\/ \u7ec4\u4ef6\u5c06\u8981\u66f4\u65b0 componentWillUpdate() { console.log('componentWillUpdate'); } \/\/ \u7ec4\u4ef6\u66f4\u65b0\u5b8c\u6bd5 componentDidUpdate() { console.log('componentDidUpdate'); } } ReactDOM.render(<LiftCycle \/>, document.getElementById('test')) <\/code><\/pre>\n
                                                                      componentWillReceiveProps<\/h4>\n
                                                                      \u5728 A \u7ec4\u4ef6\u91cc\u8c03\u7528 B \u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a A \u7ec4\u4ef6\u662f B \u7ec4\u4ef6\u7684\u7236\u7ec4\u4ef6<\/p>\n
                                                                      \u7236\u7ec4\u4ef6\u9664\u4e86\u7b2c\u4e00\u6b21\u6267\u884c render() \u65f6\uff0c\u5b50\u7ec4\u4ef6\u90fd\u4f1a\u6267\u884c componentWillReceiveProps() \u51fd\u6570<\/p>\n
                                                                      \u8be5\u51fd\u6570\u63a5\u6536\u4e00\u4e2a\u53c2\u6570\uff0c\u5c31\u662f\u7236\u7ec4\u4ef6\u4f20\u9012\u8fdb\u6765\u7684 props \u5bf9\u8c61<\/p>\n
                                                                      class A extends React.Component { state = { carName: '\u5954\u9a70' } render() { return ( <div> <h1>\u6211\u662fA\u7ec4\u4ef6<\/h1> <button onClick={this.changeCar}>\u70b9\u6211\u6362\u8f66<\/button> {\/* \u5728A\u7ec4\u4ef6\u91cc\u8c03\u7528B\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3aA\u7ec4\u4ef6\u662fB\u7ec4\u4ef6\u7684\u7236\u7ec4\u4ef6*\/} <B carName={this.state.carName} \/> <\/div> ) } changeCar = () => { this.setState({ carName: '\u5b9d\u9a6c' }) } } class B extends React.Component { \/\/ \u7ec4\u4ef6\u5c06\u8981\u63a5\u6536\u65b0\u7684Props\uff08\u7b2c\u4e00\u6b21\u63a5\u6536\u65f6\u4e0d\u7b97\uff09 componentWillReceiveProps(props) { console.log('componentWillReceiveProps', props); } render() { return ( <div> <h2>\u6211\u662fB\u7ec4\u4ef6\uff0c\u6211\u63a5\u6536\u5230\u7684\u8f66\u662f{this.props.carName}<\/h2> <\/div> ) } } ReactDOM.render(<A \/>, document.getElementById('test')) <\/code><\/pre>\n
                                                                      \u603b\u7ed3<\/h4>\n
                                                                        \n
                                                                      • \u521d\u59cb\u5316\u9636\u6bb5\uff1a\u7531 ReactDOM.render() \u89e6\u53d1 -> \u521d\u6b21\u6e32\u67d3\n
                                                                          \n
                                                                        1. constructor()<\/li>\n
                                                                        2. componentWillMount()<\/li>\n
                                                                        3. render()<\/li>\n
                                                                        4. componentDidMount() -> \u5e38\u7528\uff0c\u4e00\u822c\u5728\u8fd9\u4e2a\u94a9\u5b50\u4e2d\u505a\u4e00\u4e9b\u521d\u59cb\u5316\u7684\u4e8b\u60c5\uff0c\u6bd4\u5982\u5f00\u542f\u5b9a\u65f6\u5668\u3001\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\u3001\u8ba2\u9605\u6d88\u5931<\/li>\n<\/ol>\n<\/li>\n
                                                                        5. \u66f4\u65b0\u9636\u6bb5\uff1a\u7531\u7ec4\u4ef6\u5185\u90e8 this.setState() \u6216\u7236\u7ec4\u4ef6 render() \u89e6\u53d1\n
                                                                            \n
                                                                          1. shouldComponentUpdate()<\/li>\n
                                                                          2. componentWillUpdate()<\/li>\n
                                                                          3. render()<\/li>\n
                                                                          4. componentDidUpdate()<\/li>\n<\/ol>\n<\/li>\n
                                                                          5. \u5378\u8f7d\u7ec4\u4ef6\uff1a\u7531 ReactDOM.unmountComponentAtNode() \u89e6\u53d1\n
                                                                              \n
                                                                            1. componentWillUnmount() -> \u5e38\u7528\uff0c\u4e00\u822c\u5728\u8fd9\u4e2a\u94a9\u5b50\u4e2d\u505a\u4e00\u4e9b\u6536\u5c3e\u7684\u4e8b\uff0c\u6bd4\u5982\u5173\u95ed\u5b9a\u65f6\u5668\u3001\u53d6\u6d88\u6d88\u606f\u8ba2\u9605<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n
                                                                              \u751f\u547d\u5468\u671f\u6d41\u7a0b\uff08\u65b0\uff09<\/h3>\n
                                                                              React 17.x \u7248\u672c\u4e4b\u540e\uff0c\u5df2\u4e0d\u518d\u63a8\u8350\u4f7f\u7528 componentWillMount()\u3001componentWillReceiveProps()\u3001componentWillUpdate() \u8fd9\u4e09\u4e2a\u94a9\u5b50\u51fd\u6570\uff0c\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u7684\u4ee3\u7801\u5728 React \u7684\u672a\u6765\u7248\u672c\u4e2d\u53ef\u80fd\u51fa\u73b0 bug\uff0c\u5c24\u5176\u662f\u5728\u542f\u7528\u5f02\u6b65\u6e32\u67d3\u4e4b\u540e\u3002\u5982\u679c\u4f7f\u7528\u7684\u8bdd\u4f1a\u62a5\u9ec4\u8272\u8b66\u544a\uff0c\u5efa\u8bae\u4e3a\u8fd9\u4e9b\u94a9\u5b50\u51fd\u6570\u6dfb\u52a0 \u201cUNSAFE_\u201d \u524d\u7f00\u4ee5\u6d88\u9664\u8b66\u544a<\/p>\n
                                                                              React 18.x \u7248\u672c\u4e4b\u540e\uff0c\u76f4\u63a5\u5220\u9664\u4e86\u8fd9\u4e09\u4e2a\u94a9\u5b50\u51fd\u6570\uff0c\u5982\u679c\u4ecd\u8981\u4f7f\u7528\u7684\u8bdd\u5fc5\u987b\u5f3a\u5236\u6027\u6dfb\u52a0 \u2018UNSAFE_\u2019 \u524d\u7f00<\/p>\n
                                                                              \u65b0\u7684\u751f\u547d\u5468\u671f\u6d41\u7a0b\u56fe\uff1a<\/p>\n
                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                              getDerivedStateFromProps()<\/h4>\n
                                                                              getDerivedStateFromProps \u4f1a\u5728\u8c03\u7528 render \u65b9\u6cd5\u4e4b\u524d\u8c03\u7528\uff0c\u5e76\u4e14\u5728\u521d\u59cb\u6302\u8f7d\u53ca\u540e\u7eed\u66f4\u65b0\u65f6\u90fd\u4f1a\u88ab\u8c03\u7528<\/p>\n
                                                                              \u5b83\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\u6765\u66f4\u65b0 state\uff0c\u5982\u679c\u8fd4\u56de null \u5219\u4e0d\u66f4\u65b0\u4efb\u4f55\u5185\u5bb9<\/p>\n
                                                                              \u6b64\u65b9\u6cd5\u9002\u7528\u4e8e\u4e00\u4e2a\u7f55\u89c1\u7684\u60c5\u51b5\uff0c\u5373 state \u7684\u503c\u5728\u4efb\u4f55\u65f6\u5019\u90fd\u53d6\u51b3\u4e8e props<\/p>\n
                                                                              \u6b64\u65b9\u6cd5\u662f\u7531\u7c7b\u8c03\u7528\u7684\uff0c\u6240\u4ee5\u8981\u52a0 static \u5173\u952e\u5b57\u4fee\u9970<\/p>\n
                                                                              class NewLifeCycle extends React.Component { state = { count: 0 } \/\/ \u6b64\u94a9\u5b50\u51fd\u6570\u53ef\u63a5\u6536props\u548cstate\u53c2\u6570 static getDerivedStateFromProps(props, state) { \/\/ \u6b64\u5904\u8fd4\u56de\u7684\u5bf9\u8c61\u4e2d\u5982\u679c\u5305\u542b\u4e86state\u4e2d\u7684count\uff0c\u6240\u4ee5state\u4e2d\u7684count\u503c\u53ea\u80fd\u5728\u6b64\u5904\u66f4\u6539\uff0c\u65e0\u6cd5\u5728\u4ed6\u5904\u66f4\u6539 return { count: 3 } \/\/ \u5229\u7528\u6b64\u7279\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u8ba9state\u4e2d\u7684\u503c\u5b8c\u5168\u7531props\u63a7\u5236 \/\/ return porps } render() { return ( <div> <h1>\u5f53\u524dcount\u7684\u503c\u4e3a\uff1a{this.state.count}<\/h1> \/\/ \u6b64\u5904\u4fee\u6539count\u65e0\u6548\uff0c\u56e0\u4e3agetDerivedStateFromProps\u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61\u4e2d\u5df2\u5305\u542b\u4e86count\uff0c\u6240\u4ee5count\u503c\u5b8c\u5168\u7531props\u51b3\u5b9a <button onClick={this.add}>\u70b9\u6211+1<\/button> <\/div> ) } add = () => { this.setState({ count: ++this.state.count }) } } ReactDOM.render(<NewLifeCycle \/>, document.getElementById('test')) <\/code><\/pre>\n
                                                                              getSnapshotBeforeUpdate()<\/h4>\n
                                                                              getSnapshotBeforeUpdate(preProps, preState)<\/code> \u5728\u6700\u8fd1\u4e00\u6b21\u6e32\u67d3\u8f93\u51fa\uff08\u63d0\u4ea4\u5230 DOM \u8282\u70b9\uff09\u4e4b\u524d\u8c03\u7528\u3002\u5b83\u4f7f\u5f97\u7ec4\u4ef6\u80fd\u5728\u53d1\u751f\u66f4\u6539\u4e4b\u524d\u4ece DOM \u4e2d\u6355\u83b7\u4e00\u4e9b\u4fe1\u606f\uff08\u4f8b\u5982\uff0c\u6eda\u52a8\u4f4d\u7f6e\uff09\u3002\u6b64\u751f\u547d\u5468\u671f\u65b9\u6cd5\u7684\u4efb\u4f55\u8fd4\u56de\u503c\u5c06\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9 componentDidUpdate(preProps, preState, snapshot)<\/code><\/p>\n
                                                                              \u6848\u4f8b\uff1a\u6211\u4eec\u5faa\u73af\u5411\u4e00\u4e2a\u76d2\u5b50\u4e2d\u6dfb\u52a0\u65b0\u7684 item\uff0c\u5f53 item \u6ea2\u51fa\u65f6\u4f1a\u51fa\u73b0\u6eda\u52a8\u6761\uff0c\u5e76\u4e14\u5185\u5bb9\u968f\u4e4b\u5411\u4e0b\u6eda\u52a8\u3002\u6211\u4eec\u5e0c\u671b\u5185\u5bb9\u4e0d\u8981\u81ea\u52a8\u6eda\u52a8\uff0c\u800c\u4e14\u9f20\u6807\u6eda\u8f6e\u6eda\u5230\u54ea\u91cc\uff0c\u5185\u5bb9\u5c31\u505c\u7559\u5230\u54ea\u91cc<\/p>\n
                                                                              class NewsList extends React.Component { state = { newsList: [] } render() { const { newsList } = this.state return ( <div className=\"list\" ref=\"list\"> { newsList.map((v, i) => { return ( <div className=\"news\" key={i}>{v}<\/div> ) }) } <\/div> ) } \/\/ \u7ec4\u4ef6\u66f4\u65b0\u524d\u6267\u884c\uff0c\u8fd4\u56de\u503c\u4f1a\u8fd4\u56de\u7ed9componentDidUpdate \/\/ \u63a5\u6536\u4e24\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u662f\u66f4\u65b0\u524d\u7684props\u548cstate getSnapshotBeforeUpdate(preProps, preState) { return this.refs.list.scrollHeight } \/\/ \u7ec4\u4ef6\u66f4\u65b0\u5b8c\u6210\u540e\u6267\u884c \/\/ \u63a5\u6536\u4e09\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u662f\u66f4\u65b0\u524d\u7684props\u548cstate\uff0c\u8fd8\u6709getSnapshotBeforeUpdate\u8fd4\u56de\u7684\u5feb\u7167 componentDidUpdate(preProps, preState, snapshot) { this.refs.list.scrollTop += this.refs.list.scrollHeight - snapshot } \/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\uff0c\u5f00\u542f\u5b9a\u65f6\u5668\uff0c\u6301\u7eed\u5411\u76d2\u5b50\u4e2d\u6dfb\u52a0\u5185\u5bb9 componentDidMount() { setInterval(() => { let { newsList } = this.state console.log(newsList); \/\/ \u5728newsList\u524d\u6dfb\u52a0\u4e00\u4e2a\u5143\u7d20\uff0c\u5e76\u8fd4\u56de\u6dfb\u52a0\u540e\u7684\u6570\u7ec4 newsList = ['\u65b0\u95fb' + newsList.length, ...newsList] this.setState({ newsList }) }, 1000) } } ReactDOM.render(<NewsList \/>, document.getElementById('test')) <\/code><\/pre>\n
                                                                              \u603b\u7ed3<\/h4>\n
                                                                                \n
                                                                              • \u521d\u59cb\u5316\u9636\u6bb5\uff1a\u7531 ReactDOM.render() \u89e6\u53d1 -> \u521d\u6b21\u6e32\u67d3\n
                                                                                  \n
                                                                                1. constructor()<\/li>\n
                                                                                2. getDerivedStateFromProps()<\/li>\n
                                                                                3. render()<\/li>\n
                                                                                4. componentDidMount() -> \u5e38\u7528<\/li>\n<\/ol>\n<\/li>\n
                                                                                5. \u66f4\u65b0\u9636\u6bb5\uff1a\u7531\u7ec4\u4ef6\u5185\u90e8 this.setState() \u6216\u7236\u7ec4\u4ef6\u91cd\u65b0 render \u89e6\u53d1\n
                                                                                    \n
                                                                                  1. getDerivedStateFromProps<\/li>\n
                                                                                  2. shouldComponentUpdate()<\/li>\n
                                                                                  3. render<\/li>\n
                                                                                  4. getSnapshotBeforeUpdate<\/li>\n
                                                                                  5. componentDidUpdate()<\/li>\n<\/ol>\n<\/li>\n
                                                                                  6. \u5378\u8f7d\u7ec4\u4ef6\uff1a\u7531 ReactDOM.unmountComponentAtNode() \u89e6\u53d1\n
                                                                                      \n
                                                                                    1. componentWillUnmount() -> \u5e38\u7528<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n
                                                                                      \u904d\u5386\u5143\u7d20\u65f6key\u7684\u4f5c\u7528<\/h2>\n
                                                                                        \n
                                                                                      • \u865a\u62df DOM \u4e2d key \u7684\u4f5c\u7528\uff1a<\/u>\n
                                                                                          \n
                                                                                        1. \u7b80\u5355\u7684\u8bf4\uff1akey \u662f\u865a\u62df DOM \u5bf9\u8c61\u7684\u6807\u8bc6\uff0c\u5728\u66f4\u65b0\u663e\u793a\u65f6 key \u8d77\u7740\u6781\u5176\u91cd\u8981\u7684\u4f5c\u7528<\/li>\n
                                                                                        2. \u8be6\u7ec6\u7684\u8bf4\uff1a\u5f53\u72b6\u6001\u4e2d\u7684\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0creact \u4f1a\u6839\u636e\u3010\u65b0\u6570\u636e\u3011\u751f\u4ea7\u3010\u65b0\u7684\u865a\u62df DOM\u3011\uff0c\u968f\u540e React \u5bf9\u3010\u65b0\u865a\u62df DOM\u3011\u548c\u3010\u65e7\u865a\u62df DOM\u3011\u8fdb\u884c diffing \u6bd4\u8f83\uff1a\n
                                                                                            \n
                                                                                          • \u65e7\u865a\u62df DOM \u4e2d\u627e\u5230\u4e86\u4e0e\u65b0\u865a\u62df DOM \u76f8\u540c\u7684 key\uff1a\n
                                                                                              \n
                                                                                            • \u82e5\u865a\u62df DOM \u4e2d\u5185\u5bb9\u6ca1\u53d8\uff0c\u76f4\u63a5\u4f7f\u7528\u4e4b\u524d\u7684\u771f\u5b9e DOM<\/li>\n
                                                                                            • \u82e5\u865a\u62df DOM \u4e2d\u5185\u5bb9\u53d8\u4e86\uff0c\u5219\u751f\u6210\u65b0\u7684\u771f\u5b9e DOM\uff0c\u968f\u540e\u66ff\u6362\u6389\u9875\u9762\u4e2d\u4e4b\u524d\u7684\u771f\u5b9e DOM<\/li>\n<\/ul>\n<\/li>\n
                                                                                            • \u65e7\u865a\u62df DOM \u4e2d\u672a\u627e\u5230\u4e0e\u65b0\u865a\u62df DOM \u76f8\u540c\u7684 key\n
                                                                                                \n
                                                                                              • \u6839\u636e\u6570\u636e\u521b\u5efa\u65b0\u7684\u771f\u5b9e DOM\uff0c\u968f\u540e\u6e32\u67d3\u5230\u9875\u9762<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n
                                                                                              • \u7528 index \u4f5c\u4e3a key \u53ef\u80fd\u4f1a\u5f15\u53d1\u7684\u95ee\u9898\uff1a<\/u>\n
                                                                                                  \n
                                                                                                1. \u82e5\u5bf9\u6570\u636e\u8fdb\u884c\u9006\u5e8f\u6dfb\u52a0\u3001\u9006\u5e8f\u5220\u9664\u7b49\u7834\u574f\u987a\u5e8f\u7684\u64cd\u4f5c\n
                                                                                                    \n
                                                                                                  • \u4f1a\u4ea7\u751f\u6ca1\u6709\u5fc5\u8981\u7684\u771f\u5b9e DOM \u66f4\u65b0\uff0c\u867d\u7136\u754c\u9762\u6548\u679c\u6ca1\u95ee\u9898\uff0c\u4f46\u662f\u6548\u7387\u5927\u5927\u964d\u4f4e<\/li>\n<\/ul>\n<\/li>\n
                                                                                                  • \u5982\u679c\u7ed3\u6784\u4e2d\u8fd8\u5305\u542b\u8f93\u5165\u7c7b\u7684 DOM\n
                                                                                                      \n
                                                                                                    • \u8f93\u5165\u7c7b DOM \u4e2d\u8f93\u5165\u7684\u503c\u80af\u5b9a\u662f\u5728\u6e32\u67d3\u4e3a\u771f\u5b9e DOM \u540e\u8f93\u5165\u7684\uff0c\u6240\u4ee5\u5728\u865a\u62df DOM \u5bf9\u6bd4\u7684\u65f6\u5019\u662f\u62ff\u4e0d\u5230\u7684<\/li>\n
                                                                                                    • \u4f1a\u4ea7\u751f\u9519\u8bef DOM \u66f4\u65b0\uff0c\u5bfc\u81f4\u9875\u9762\u6570\u636e\u5c55\u793a\u4e0d\u6b63\u786e<\/li>\n<\/ul>\n<\/li>\n
                                                                                                    • \u5982\u679c\u4e0d\u5b58\u5728\u5bf9\u6570\u636e\u7684\u9006\u5e8f\u6dfb\u52a0\u3001\u9006\u5e8f\u5220\u9664\u7b49\u7834\u574f\u987a\u5e8f\u7684\u64cd\u4f5c\uff0c\u4ec5\u7528\u4e8e\u6e32\u67d3\u5217\u8868\u4f5c\u5c55\u793a\n
                                                                                                        \n
                                                                                                      • \u53ef\u4ee5\u4f7f\u7528 index \u4f5c\u4e3a key<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n
                                                                                                      • \u5f00\u53d1\u4e2d\u5982\u4f55\u9009\u62e9 key\uff1a<\/u>\n
                                                                                                          \n
                                                                                                        1. \u6700\u597d\u4f7f\u7528\u6bcf\u6761\u6570\u636e\u7684\u552f\u4e00\u6807\u8bc6\u4f5c\u4e3a key\uff0c\u6bd4\u5982 id\u3001\u624b\u673a\u53f7\u3001\u8eab\u4efd\u8bc1\u53f7\u3001\u5b66\u53f7\u7b49\u552f\u4e00\u503c<\/li>\n
                                                                                                        2. \u5982\u679c\u786e\u5b9a\u53ea\u662f\u7b80\u5355\u7684\u5c55\u793a\u6570\u636e\uff0c\u7528 index \u4e5f\u662f\u53ef\u4ee5\u7684<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n
                                                                                                          \u4f7f\u7528index\u4f5c\u4e3akey<\/h3>\n
                                                                                                          \u65e0\u8f93\u5165\u7c7b DOM \u6f14\u793a\uff1a<\/p>\n
                                                                                                          \u521d\u59cb\u6570\u636e\uff1a {id: 1, name: '\u5c0f\u5f20', age: 18} {id: 2, name: '\u5c0f\u674e', age: 19} \u521d\u59cb\u7684\u865a\u62dfDOM\uff1a <li key=0>\u5c0f\u5f20---18<\/li> \/\/ \u683c\u5f0f\uff1a<li key={index}>name---age<\/li> <li key=1>\u5c0f\u674e---19<\/li> \u66f4\u65b0\u540e\u7684\u6570\u636e\uff1a {id:3, name: '\u5c0f\u738b', age: 20} \/\/ \u8fd9\u91cc\u9006\u5e8f\u6dfb\u52a0\u4e86\u4e00\u4e2a\u5c0f\u738b\uff0c\u73b0\u5728\u5c0f\u738b\u5904\u4e8e\u6570\u7ec4\u4e2d\u7b2c\u4e00\u4f4d {id:1, name: '\u5c0f\u5f20', age: 18} {id:2, name: '\u5c0f\u674e', age: 19} \u66f4\u65b0\u540e\u7684\u865a\u62dfDOM\uff1a <li key=0>\u5c0f\u738b---20<\/li> \/\/ \u56e0\u4e3a\u5c0f\u738b\u5904\u4e8e\u7b2c\u4e00\u4f4d\uff0c\u6240\u4ee5\u5c0f\u738b\u7684key\u503c\uff08\u5373index\u503c\uff09\u4e3a1\uff1b\u6b64\u65f6\u7528\u5c0f\u738b\u53bb\u548c\u539f\u865a\u62dfDOM\u4e2dkey\u503c\u76f8\u7b49\u7684\u6807\u7b7e\u505adiffing\u6bd4\u8f83\uff0c\u53d1\u73b0\u5185\u5bb9\u4e0d\u4e00\u6837\uff0c\u6240\u4ee5\u8981\u66f4\u65b0\u771f\u5b9eDOM <li key=1>\u5c0f\u5f20---18<\/li> \/\/ \u539f\u865a\u62dfDOM\u4e2dkey\u4e3a1\u7684\u6807\u7b7e\u5185\u5bb9\u4e5f\u53d8\u4e86\uff0c\u6240\u4ee5\u9700\u8981\u66f4\u65b0\u771f\u5b9eDOM <li key=2>\u5c0f\u674e---19<\/li> \/\/ \u539f\u865a\u62dfDOM\u4e2dkey\u4e3a2\u7684\u6807\u7b7e\u5185\u5bb9\u4e5f\u53d8\u4e86\uff0c\u6240\u4ee5\u9700\u8981\u66f4\u65b0\u771f\u5b9eDOM \u672c\u6765\u53ea\u6dfb\u52a0\u4e86\u4e00\u4e2a\u5c0f\u738b\uff0c\u4f46\u662f\u5374\u5bfc\u81f4\u6240\u6709\u7684\u771f\u5b9eDOM\u90fd\u8981\u66f4\u65b0\uff0c\u5f71\u54cd\u6548\u7387\uff01 <\/code><\/pre>\n
                                                                                                          \u6709\u8f93\u5165\u7c7b DOM \u6f14\u793a\uff1a<\/p>\n
                                                                                                          \u521d\u59cb\u6570\u636e\uff1a {id: 1, name: '\u5c0f\u5f20', age: 18} {id: 2, name: '\u5c0f\u674e', age: 19} \u521d\u59cb\u7684\u865a\u62dfDOM\uff1a <li key=0> \u5c0f\u5f20---18 <input type=\"text\"\/> \/\/ \u5047\u5982\u5728\u6b64input\u6846\u6e32\u67d3\u4e3a\u771f\u5b9eDOM\u540e\u5411\u5176\u8f93\u5165\u4e86abc <\/li> <li key=1> \u5c0f\u674e---19 <input type=\"text\"\/> <\/li> \u66f4\u65b0\u540e\u7684\u6570\u636e\uff1a {id:3, name: '\u5c0f\u738b', age: 20} {id:1, name: '\u5c0f\u5f20', age: 18} {id:2, name: '\u5c0f\u674e', age: 19} \u66f4\u65b0\u540e\u7684\u865a\u62dfDOM\uff1a <li key=0> \u5c0f\u738b---20 <input type=\"text\"\/> \/\/ \u7528\u5c0f\u738b\u7684key\u548c\u5c0f\u5f20\u7684key\u4f5c\u6bd4\u8f83\uff0c\u53d1\u73b0\u5185\u5bb9\u4e0d\u4e00\u6837\uff0c\u4f46\u662finput\u662f\u4e00\u6837\u7684\uff0c\u6240\u4ee5\u53ea\u66f4\u65b0\u4e86\u5185\u5bb9\uff0c\u800c\u6ca1\u6709\u66f4\u65b0input\u6846\uff0c\u5bfc\u81f4\u539f\u6765\u5728\u5c0f\u5f20\u90a3\u91cc\u8f93\u5165\u7684abc\u73b0\u5728\u5230\u4e86\u5c0f\u738b\u7684\u540e\u9762 <\/li> <li key=1> \u5c0f\u5f20---18 <input type=\"text\"\/> <\/li> <li key=2> \u5c0f\u674e---19 <input type=\"text\"\/> <\/li> <\/code><\/pre>\n
                                                                                                          \u4f7f\u7528\u5143\u7d20\u552f\u4e00\u952e\u4f5c\u4e3akey<\/h3>\n
                                                                                                          \u4f7f\u7528\u5143\u7d20\u552f\u4e00\u952e\u4f5c\u4e3a key\uff0c\u5219\u4e0d\u4f1a\u6709\u4efb\u4f55\u95ee\u9898\uff0c\u4e14\u6548\u7387\u6700\u9ad8<\/p>\n
                                                                                                          \u521d\u59cb\u6570\u636e\uff1a {id: 1, name: '\u5c0f\u5f20', age: 18} {id: 2, name: '\u5c0f\u674e', age: 19} \u521d\u59cb\u7684\u865a\u62dfDOM\uff1a <li key=1>\u5c0f\u5f20---18<\/li> \/\/ \u683c\u5f0f\uff1a<li key={id}>name---age<\/li> <li key=2>\u5c0f\u674e---19<\/li> \u66f4\u65b0\u540e\u7684\u6570\u636e\uff1a {id:3, name: '\u5c0f\u738b', age: 20} \/\/ \u8fd9\u91cc\u9006\u5e8f\u6dfb\u52a0\u4e86\u4e00\u4e2a\u5c0f\u738b\uff0c\u73b0\u5728\u5c0f\u738b\u5904\u4e8e\u6570\u7ec4\u4e2d\u7b2c\u4e00\u4f4d {id:1, name: '\u5c0f\u5f20', age: 18} {id:2, name: '\u5c0f\u674e', age: 19} \u66f4\u65b0\u540e\u7684\u865a\u62dfDOM\uff1a <li key=3>\u5c0f\u738b---20<\/li> \/\/ \u5c0f\u738b\u75283\u53bb\u539f\u865a\u62dfDOM\u4e2d\u5bf9\u6bd4\uff0c\u53d1\u73b0\u6ca1\u6709\u6b64key\uff0c\u5219\u66f4\u65b0\u771f\u5b9eDOM <li key=1>\u5c0f\u5f20---18<\/li> \/\/ \u5c0f\u5f20\u75281\u53bb\u539f\u865a\u62dfDOM\u4e2d\u5bf9\u6bd4\uff0c\u53d1\u73b0\u6709\u6b64key\u4e14\u6807\u7b7e\u5185\u5bb9\u4e00\u81f4\uff0c\u5219\u4e0d\u7528\u91cd\u590d\u66f4\u65b0 <li key=2>\u5c0f\u674e---19<\/li> \/\/ \u5c0f\u674e\u75282\u53bb\u539f\u865a\u62dfDOM\u4e2d\u5bf9\u6bd4\uff0c\u53d1\u73b0\u6709\u6b64key\u4e14\u6807\u7b7e\u5185\u5bb9\u4e00\u81f4\uff0c\u5219\u4e0d\u7528\u91cd\u590d\u66f4\u65b0 <\/code><\/pre>\n
                                                                                                          \u811a\u624b\u67b6<\/h2>\n
                                                                                                          \u4ecb\u7ecd<\/h3>\n
                                                                                                          React \u63d0\u4f9b\u4e86\u4e00\u4e2a\u7528\u4e8e\u521b\u5efa React \u9879\u76ee\u7684\u811a\u624b\u67b6\u5e93\uff1acreate-react-app<\/p>\n
                                                                                                          \u811a\u624b\u67b6\u9879\u76ee\u7684\u6574\u4f53\u6838\u5fc3\u6280\u672f\u67b6\u6784\u4e3a\uff1aReact + Webpack + ES6 + ESLint<\/p>\n
                                                                                                          \u811a\u624b\u67b6\u9879\u76ee\u7684\u7279\u70b9\uff1a\u6a21\u5757\u5316\u3001\u7ec4\u4ef6\u5316\u3001\u5de5\u7a0b\u5316<\/p>\n
                                                                                                          \u521b\u5efa\u9879\u76ee\u5e76\u542f\u52a8<\/h3>\n
                                                                                                            \n
                                                                                                          1. \u5168\u5c40\u5b89\u88c5\u811a\u624b\u67b6\u5e93\uff1a\n
                                                                                                              \n
                                                                                                            • npm install -g create-react-app\uff08\u5168\u5c40\u5b89\u88c5\u540e\u53ef\u4ee5\u5728\u7535\u8111\u4e0a\u4efb\u4f55\u4e00\u4e2a\u5730\u65b9\u521b\u5efa React \u811a\u624b\u67b6\u9879\u76ee\uff09<\/li>\n<\/ul>\n<\/li>\n
                                                                                                            • \u5207\u6362\u5230\u9879\u76ee\u76ee\u5f55\uff0c\u6267\u884c\u547d\u4ee4\uff1a\n
                                                                                                                \n
                                                                                                              • create-react-app hello-react<\/li>\n<\/ul>\n<\/li>\n
                                                                                                              • \u8fdb\u5165\u9879\u76ee\u6587\u4ef6\u5939\uff1a\n
                                                                                                                  \n
                                                                                                                • cd hello-react<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                • \u542f\u52a8\u9879\u76ee\uff1a\n
                                                                                                                    \n
                                                                                                                  • npm start \/ yarn start<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                    \u811a\u624b\u67b6\u751f\u6210\u6587\u4ef6\u4ecb\u7ecd<\/h3>\n
                                                                                                                    \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                    \u7ec4\u4ef6\u5316\u9879\u76ee\u7ed3\u6784<\/h3>\n
                                                                                                                    \u811a\u624b\u67b6\u7ed9\u6211\u4eec\u751f\u6210\u7684 public \u548c src \u6587\u4ef6\u5939\u4e2d\u6709\u5f88\u591a\u6ca1\u7528\u7684\u6587\u4ef6\u548c\u4ee3\u7801\uff0c\u6211\u4eec\u628a\u8fd9\u4e24\u4e2a\u6587\u4ef6\u5939\u5220\u6389\uff0c\u81ea\u5df1\u4ece\u96f6\u5199\u4e00\u4e2a Hello \u7ec4\u4ef6<\/p>\n
                                                                                                                    \u6587\u4ef6\u7ed3\u6784\u56fe\uff1a<\/p>\n
                                                                                                                    \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                      \n
                                                                                                                    • \n
                                                                                                                      index.html\uff08\u552f\u4e00\u9875\u9762\uff09<\/p>\n
                                                                                                                      <!-- \u53ea\u8981\u6709\u8fd9\u4e00\u53e5\u5c31\u884c --><\/span> <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>root\"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      index.js\uff08\u7a0b\u5e8f\u5165\u53e3\u6587\u4ef6\uff09<\/p>\n
                                                                                                                      \/\/ \u5f15\u5165react\u6838\u5fc3\u5e93<\/span> import<\/span> React from<\/span> 'react'<\/span> \/\/ \u5f15\u5165ReactDOM<\/span> import<\/span> ReactDOM from<\/span> 'react-dom\/client'<\/span> \/\/ \u5f15\u5165APP\u7ec4\u4ef6<\/span> import<\/span> App from<\/span> '.\/App'<\/span> \/\/ \u6e32\u67d3App\u7ec4\u4ef6\u5230\u9875\u9762\uff08React18.x\uff09<\/span> const<\/span> root =<\/span> ReactDOM.<\/span>createRoot<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span> root.<\/span>render<\/span>(<\/span><<\/span>App \/<\/span>><\/span>)<\/span> \/\/ React17.x<\/span> \/\/ ReactDOM.render(<App \/>, document.getElementById('root'))<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      App.js\uff08\u6240\u6709\u7ec4\u4ef6\u7684\u58f3\uff09<\/p>\n
                                                                                                                      \/\/ \u6211\u4eec\u8fd9\u91cc\u628aComponent\u5355\u72ec\u5f15\u5165\u4e00\u4e0b\uff0c\u662f\u4e3a\u4e86\u63d0\u9192\u8fd9\u91cc\u7684{Cpmponent}\u4f7f\u7528\u7684\u5e76\u4e0d\u662f\u89e3\u6784\u8d4b\u503c<\/span> \/\/ \u800c\u662f\u6307\u5728'react'\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0cComponent\u4ee5'\u5206\u522b\u66b4\u9732'\u7684\u5f62\u5f0f\u88abexport\u4e86\u51fa\u6765<\/span> \/\/ \u5f53\u7136Component\u662fReact\u4e0a\u7684\u4e00\u4e2a\u5c5e\u6027\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u53ea\u5f15\u5165React<\/span> import<\/span> React,<\/span> { \n     <\/span> Component }<\/span> from<\/span> 'react'<\/span> import<\/span> Hello from<\/span> '.\/components\/Hello\/Hello'<\/span> \/\/ \u5982\u679c\u7ec4\u4ef6\u662f\u4ee5index\u547d\u540d\u7684\uff0c\u5219\u53ea\u9700\u5f15\u5165\u5230\u7ec4\u4ef6\u7684\u7236\u6587\u4ef6\u5939\u5c31\u53ef\u4ee5<\/span> import<\/span> Welcome from<\/span> '.\/components\/Welcome'<\/span> export<\/span> default<\/span> class<\/span> App<\/span> extends<\/span> Component<\/span> { \n     <\/span> render<\/span>(<\/span>)<\/span> { \n     <\/span> return<\/span> (<\/span> <<\/span>div><\/span> \/\/ \u6e32\u67d3\u7ec4\u4ef6<\/span> <<\/span>Hello><\/span><<\/span>\/<\/span>Hello><\/span> <<\/span>Welcome \/<\/span>><\/span> <<\/span>\/<\/span>div><\/span> )<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      Hello.js\uff08Hello\u7ec4\u4ef6\uff0c\u548c\u7ec4\u4ef6\u6709\u5173\u7684\u6587\u4ef6\u540d\u9996\u5b57\u6bcd\u90fd\u5927\u5199\uff09<\/p>\n
                                                                                                                      import<\/span> React from<\/span> 'react'<\/span> \/\/ \u56e0\u4e3a Hello \u7ec4\u4ef6\u4e2d\u6709 text \u8fd9\u4e2a\u7c7b\uff0cWelcome \u7ec4\u4ef6\u4e2d\u4e5f\u6709 text \u8fd9\u4e2a\u7c7b\uff0c\u6240\u4ee5\u5c06\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u90fd\u5f15\u5165\u5230 App \u4e2d\u540e\uff0c\u540e\u5f15\u5165\u7684\u7ec4\u4ef6\u6837\u5f0f\u4f1a\u9876\u66ff\u6389\u5148\u5f15\u5165\u7684\u6837\u5f0f\uff0c\u6240\u4ee5\u6b64\u5904\u4f7f\u7528\u6a21\u5757\u5316\u6837\u5f0f\u8bed\u6cd5<\/span> import<\/span> hello from<\/span> '.\/Hello.module.css'<\/span> export<\/span> default<\/span> class<\/span> Hello<\/span> extends<\/span> React.<\/span>Component<\/span> { \n     <\/span> render<\/span>(<\/span>)<\/span> { \n     <\/span> return<\/span> (<\/span> \/\/ \u6dfb\u52a0\u7c7b\u540d\u65f6\uff0c\u4f7f\u7528\u6a21\u5757\u5316\u6837\u5f0f\u8bed\u6cd5<\/span> <<\/span>h2 className=<\/span>{ \n     <\/span>hello.<\/span>text}<\/span>><\/span>Hello,<\/span> React!<\/span><<\/span>\/<\/span>h2><\/span> )<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      Hello.module.css\uff08\u6a21\u5757\u5316\u6837\u5f0f\u6587\u4ef6\uff0c\u9996\u5b57\u6bcd\u5927\u5199\uff0c\u4e2d\u95f4\u6dfb\u52a0.module\uff09<\/p>\n
                                                                                                                      .text<\/span> { \n     <\/span> color<\/span>:<\/span> pink;<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      Welcome\/index.jsx\uff08Welcome \u6587\u4ef6\u5939\u4e0b index.jsx \/ index.js \u4f1a\u88ab\u8ba4\u4e3a\u662f Welcome \u7ec4\u4ef6\uff0c\u4f7f\u7528 .jsx \u6587\u4ef6\u7ed3\u5c3e\uff0c\u66f4\u5bb9\u6613\u533a\u5206\uff09<\/p>\n
                                                                                                                      import React from 'react' import '.\/index.css' export default class Welcome extends React.Component { render() { return ( <h2 className='text'>Welcome!<\/h2> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                    • \n
                                                                                                                      index.css\uff08\u6837\u5f0f\u6587\u4ef6\uff09<\/p>\n
                                                                                                                      .text<\/span> { \n     <\/span> color<\/span>:<\/span> skyblue;<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                      \u7ec4\u4ef6\u5316\u7f16\u7801\u6d41\u7a0b<\/h2>\n
                                                                                                                        \n
                                                                                                                      1. \u62c6\u5206\u7ec4\u4ef6\n
                                                                                                                          \n
                                                                                                                        • \u6839\u636e\u89c6\u89c9\u7a3f\uff0c\u8003\u8651\u9700\u8981\u62c6\u5206\u4e3a\u54ea\u4e9b\u7ec4\u4ef6<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                        • \u5b9e\u73b0\u9759\u6001\u7ec4\u4ef6\n
                                                                                                                            \n
                                                                                                                          • \u4f7f\u7528\u7ec4\u4ef6\u5b9e\u73b0\u9759\u6001\u9875\u9762\u7684\u6548\u679c<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                          • \u5b9e\u73b0\u52a8\u6001\u7ec4\u4ef6\n
                                                                                                                              \n
                                                                                                                            • \u52a8\u6001\u663e\u793a\u521d\u59cb\u5316\u6570\u636e\n
                                                                                                                                \n
                                                                                                                              • \u6570\u636e\u7c7b\u578b<\/li>\n
                                                                                                                              • \u6570\u636e\u540d\u79f0<\/li>\n
                                                                                                                              • \u4fdd\u5b58\u5728\u54ea\u4e2a\u7ec4\u4ef6<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                              • \u4ea4\u4e92\uff08\u4ece\u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u5f00\u59cb\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                                ToDoList\u6848\u4f8b<\/h3>\n
                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                \u529f\u80fd\u4ecb\u7ecd\uff1a<\/p>\n
                                                                                                                                  \n
                                                                                                                                1. \u8f93\u5165\u680f\u4e2d\u8f93\u5165\u4efb\u52a1\u540d\uff0c\u6309\u56de\u8f66\u5c06\u5176\u6dfb\u52a0\u5230\u5217\u8868\u4e2d\u6700\u4e0a\u65b9<\/li>\n
                                                                                                                                2. \u70b9\u51fb\u6e05\u9664\u5df2\u5b8c\u6210\u4efb\u52a1\u53ef\u4ee5\u5220\u9664\u6240\u6709\u9009\u4e2d\u9879<\/li>\n
                                                                                                                                3. \u5de6\u4e0b\u89d2\u4e3a\u5168\u9009\u6846<\/li>\n<\/ol>\n
                                                                                                                                  \u62c6\u5206\u7ec4\u4ef6<\/h4>\n
                                                                                                                                  \u6211\u4eec\u5c06\u8fd9\u4e2a\u529f\u80fd\u62c6\u5206\u4e3a 4 \u4e2a\u7ec4\u4ef6\u6765\u5b9e\u73b0<\/p>\n
                                                                                                                                  \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                  \u5b9e\u73b0\u9759\u6001\u7ec4\u4ef6<\/h4>\n
                                                                                                                                  \u4f7f\u7528\u7ec4\u4ef6\u5316\u7f16\u7801\u65b9\u5f0f\u7f16\u5199\u6b64\u6848\u4f8b\uff0c\u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n
                                                                                                                                  \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                  \u5b9e\u73b0\u52a8\u6001\u7ec4\u4ef6<\/h4>\n
                                                                                                                                    \n
                                                                                                                                  • \n
                                                                                                                                    App.js<\/p>\n
                                                                                                                                    import<\/span> React from<\/span> 'react'<\/span> import<\/span> Footer from<\/span> '.\/components\/Footer'<\/span> import<\/span> Header from<\/span> '.\/components\/Header'<\/span> import<\/span> List from<\/span> '.\/components\/List'<\/span> import<\/span> '.\/App.css'<\/span> export<\/span> default<\/span> class<\/span> App<\/span> extends<\/span> React.<\/span>Component<\/span> { \n     <\/span> \/\/ \u521d\u59cb\u5316\u72b6\u6001\uff08\u72b6\u6001\u5728\u54ea\u91cc\uff0c\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5\u5c31\u8981\u5199\u5728\u54ea\u91cc\uff09<\/span> state =<\/span> { \n     <\/span> todos<\/span>:<\/span> [<\/span> { \n     <\/span> id<\/span>:<\/span> 1<\/span>,<\/span> name<\/span>:<\/span> '\u5403\u996d'<\/span>,<\/span> done<\/span>:<\/span> true<\/span> }<\/span>,<\/span> { \n     <\/span> id<\/span>:<\/span> 2<\/span>,<\/span> name<\/span>:<\/span> '\u7761\u89c9'<\/span>,<\/span> done<\/span>:<\/span> true<\/span> }<\/span>,<\/span> { \n     <\/span> id<\/span>:<\/span> 3<\/span>,<\/span> name<\/span>:<\/span> '\u6253\u8c46\u8c46'<\/span>,<\/span> done<\/span>:<\/span> false<\/span> }<\/span>,<\/span> { \n     <\/span> id<\/span>:<\/span> 4<\/span>,<\/span> name<\/span>:<\/span> '\u559d\u5976\u8336'<\/span>,<\/span> done<\/span>:<\/span> false<\/span> }<\/span> ]<\/span> }<\/span> \/\/ \u66f4\u65b0\u72b6\u6001\u4e2dtodos\u7684\u9009\u4e2d\u72b6\u6001<\/span> updateTodos<\/span> =<\/span> (<\/span>id,<\/span> done<\/span>)<\/span> =><\/span> { \n     <\/span> const<\/span> { \n     <\/span> todos }<\/span> =<\/span> this<\/span>.<\/span>state const<\/span> newTodos =<\/span> todos.<\/span>map<\/span>(<\/span>v<\/span> =><\/span> { \n     <\/span> if<\/span> (<\/span>v.<\/span>id ===<\/span> id)<\/span> { \n     <\/span> \/\/ \u4fee\u6539\u5f53\u524d\u904d\u5386\u5bf9\u8c61\u7684done\u5c5e\u6027\u503c\u4e3a\u53c2\u6570done\u503c<\/span> return<\/span> { \n     <\/span> ...<\/span>v,<\/span> done }<\/span> }<\/span> else<\/span> { \n     <\/span> return<\/span> v }<\/span> }<\/span>)<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{ \n     <\/span> todos<\/span>:<\/span> newTodos }<\/span>)<\/span> }<\/span> \/\/ \u5411\u72b6\u6001\u4e2d\u7684todos\u6dfb\u52a0\u65b0\u7684\u9879<\/span> addTodos<\/span> =<\/span> (<\/span>todo<\/span>)<\/span> =><\/span> { \n     <\/span> const<\/span> { \n     <\/span> todos }<\/span> =<\/span> this<\/span>.<\/span>state \/\/ \u5728todos\u6570\u7ec4\u6700\u524d\u9762\u6dfb\u52a0\u4e00\u4e2atodo<\/span> let<\/span> newTodos =<\/span> [<\/span>todo,<\/span> ...<\/span>todos]<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{ \n     <\/span> todos<\/span>:<\/span> newTodos }<\/span>)<\/span> }<\/span> \/\/ \u5220\u9664\u72b6\u6001\u4e2dtodos\u7684\u9879<\/span> deleteTodos<\/span> =<\/span> (<\/span>id<\/span>)<\/span> =><\/span> { \n     <\/span> const<\/span> { \n     <\/span> todos }<\/span> =<\/span> this<\/span>.<\/span>state let<\/span> newTodos =<\/span> todos.<\/span>filter<\/span>(<\/span>v<\/span> =><\/span> { \n     <\/span> if<\/span> (<\/span>v.<\/span>id !==<\/span> id)<\/span> { \n     <\/span> return<\/span> true<\/span> }<\/span> else<\/span> { \n     <\/span> return<\/span> false<\/span> }<\/span> }<\/span>)<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{ \n     <\/span> todos<\/span>:<\/span> newTodos }<\/span>)<\/span> }<\/span> \/\/ \u5168\u9009\u548c\u5168\u53d6\u6d88\u64cd\u4f5c<\/span> allTodosAct<\/span> =<\/span> (<\/span>checked<\/span>)<\/span> =><\/span> { \n     <\/span> const<\/span> { \n     <\/span> todos }<\/span> =<\/span> this<\/span>.<\/span>state const<\/span> newTodos =<\/span> todos.<\/span>map<\/span>(<\/span>v<\/span> =><\/span> { \n     <\/span> \/\/ \u4fee\u6539\u6240\u6709\u904d\u5386\u5bf9\u8c61\u7684done\u503c\u4e3achecked\u53c2\u6570\u503c<\/span> return<\/span> { \n     <\/span> ...<\/span>v,<\/span> done<\/span>:<\/span> checked }<\/span> }<\/span>)<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{ \n     <\/span> todos<\/span>:<\/span> newTodos }<\/span>)<\/span> }<\/span> \/\/ \u6e05\u7a7a\u6240\u6709\u9009\u4e2d\u9879<\/span> deleteAllChecked<\/span> =<\/span> (<\/span>)<\/span> =><\/span> { \n     <\/span> const<\/span> { \n     <\/span> todos }<\/span> =<\/span> this<\/span>.<\/span>state \/\/ \u53ea\u8fd4\u56de\u6ca1\u88ab\u9009\u4e2d\u7684\u9879<\/span> const<\/span> newTodos =<\/span> todos.<\/span>filter<\/span>(<\/span>v<\/span> =><\/span> { \n     <\/span> return<\/span> v.<\/span>done ===<\/span> false<\/span> }<\/span>)<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{ \n     <\/span> todos<\/span>:<\/span> newTodos }<\/span>)<\/span> }<\/span> render<\/span>(<\/span>)<\/span> { \n     <\/span> return<\/span> (<\/span> <<\/span>div className=<\/span>'todo-container'<\/span>><\/span> { \n     <\/span>\/* \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u51fd\u6570\u7528\u4e8e\u4fee\u6539\u72b6\u6001\uff0c\u56e0\u4e3a\u5b50\u7ec4\u4ef6\u6ca1\u529e\u6cd5\u76f4\u63a5\u4fee\u6539\u5230\u7236\u7ec4\u4ef6\u7684\u72b6\u6001 *\/<\/span>}<\/span> <<\/span>Header addTodos=<\/span>{ \n     <\/span>this<\/span>.<\/span>addTodos}<\/span> \/<\/span>><\/span> <<\/span>List updateTodos=<\/span>{ \n     <\/span>this<\/span>.<\/span>updateTodos}<\/span> todos=<\/span>{ \n     <\/span>this<\/span>.<\/span>state.<\/span>todos}<\/span> deleteTodos=<\/span>{ \n     <\/span>this<\/span>.<\/span>deleteTodos}<\/span> \/<\/span>><\/span> <<\/span>Footer todos=<\/span>{ \n     <\/span>this<\/span>.<\/span>state.<\/span>todos}<\/span> allTodosAct=<\/span>{ \n     <\/span>this<\/span>.<\/span>allTodosAct}<\/span> deleteAllChecked=<\/span>{ \n     <\/span>this<\/span>.<\/span>deleteAllChecked}<\/span> \/<\/span>><\/span> <<\/span>\/<\/span>div><\/span> )<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    Header.jsx<\/p>\n
                                                                                                                                    import React, { Component } from 'react' import { nanoid } from 'nanoid' import { PropTypes } from 'prop-types' import '.\/index.css' export default class Header extends Component { \/\/ \u9650\u5236\u4f20\u5165\u6b64\u7ec4\u4ef6\u7684props\u7684\u7c7b\u578b\u53ca\u5fc5\u8981\u6027 static propTypes = { addTodos: PropTypes.func.isRequired } addTodo = (event) => { const { addTodos } = this.props \/\/ \u5982\u679c\u6309\u4e0b\u7684\u662f\u56de\u8f66\u952e if (event.keyCode === 13) { \/\/ \u5982\u679c\u8f93\u5165\u6846\u5185\u5bb9\u4e0d\u4e3a\u7a7a if (event.target.value.trim() !== '') { let todo = { id: nanoid(), name: event.target.value, done: false } \/\/ \u56e0\u4e3a\u72b6\u6001\u5728\u7236\u7ec4\u4ef6\u91cc\uff0c\u6240\u4ee5\u9700\u8981\u8c03\u7528\u7236\u7ec4\u4ef6\u7684\u6dfb\u52a0todo\u65b9\u6cd5 addTodos(todo) } event.target.value = '' } } render() { return ( <div className=\"todo-header\"> <input type=\"text\" onKeyUp={this.addTodo} placeholder=\"\u8bf7\u8f93\u5165\u4f60\u7684\u4efb\u52a1\u540d\u79f0\uff0c\u6309\u56de\u8f66\u952e\u786e\u8ba4\" \/> <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    List.jsx<\/p>\n
                                                                                                                                    import React, { Component } from 'react' import Item from '..\/Item' import '.\/index.css' export default class List extends Component { render() { const { todos, updateTodos, deleteTodos } = this.props return ( <ul className=\"todo-main\"> { todos.map((v) => { \/\/ \u62ff\u5230\u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u51fd\u6570\u540e\uff0c\u7ee7\u7eed\u5411\u4e0b\u4e00\u5c42\u5b50\u7ec4\u4ef6\u4f20 return <Item deleteTodos={deleteTodos} updateTodos={updateTodos} key={v.id} todo={v} \/> }) } <\/ul> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    Item.jsx<\/p>\n
                                                                                                                                    import React, { Component } from 'react' import '.\/index.css' export default class Item extends Component { state = { \/\/ \u9f20\u6807\u662f\u5426\u60ac\u6d6e status: false } \/\/ \u4fee\u6539\u72b6\u6001\u4e2d\u4fdd\u5b58\u7684\u9f20\u6807\u60ac\u6d6e\u72b6\u6001 mouseAct = (status) => { return () => { this.setState({ status: status }) } } inputAct = (id) => { return (event) => { const { updateTodos } = this.props \/\/ \u8c03\u7528App\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684updateTodos\u65b9\u6cd5\uff0c\u7528\u4e8e\u4fee\u6539App\u7ec4\u4ef6\u7684\u72b6\u6001 updateTodos(id, event.target.checked) } } render() { console.log('RENDER'); const { id, name, done } = this.props.todo const { status } = this.state return ( \/\/ \u6839\u636e\u72b6\u6001\u4e2d\u7684\u9f20\u6807\u60ac\u6d6e\u72b6\u6001\uff0c\u51b3\u5b9a\u5c55\u793a\u4ec0\u4e48\u989c\u8272 <li style={ \n    { backgroundColor: status ? '#ddd' : 'white' }} onMouseOver={this.mouseAct(true)} onMouseLeave={this.mouseAct(false)} > <label> {\/* \u6ce8\u610f\u4e0d\u8981\u7528defaultChecked\uff0c\u8fd9\u4e2a\u53ea\u4f1a\u5728\u9996\u6b21\u6302\u8f7d\u65f6\u63a7\u5236\u662f\u5426\u9009\u4e2d\uff0c\u4e4b\u540e\u4fee\u6539done\u503c\u90fd\u4e0d\u4f1a\u8fdb\u884c\u63a7\u5236 *\/} <input onChange={this.inputAct(id)} type=\"checkbox\" defaultChecked={done} \/> <span>{name}<\/span> <\/label> {\/* onClick\u9700\u8981\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\uff0c\u6211\u4eec\u76f4\u63a5\u7ed9\u5b83\u4e00\u4e2a\u533f\u540d\u51fd\u6570\uff0c\u7136\u540e\u5728\u8fd9\u4e2a\u533f\u540d\u51fd\u6570\u91cc\u8c03\u7528\u5176\u4ed6\u65b9\u6cd5 *\/} <button onClick={() => { this.props.deleteTodos(id) }} style={ \n    { display: status ? 'block' : 'none' }} className=\"btn btn-danger\" >\u5220\u9664<\/button> <\/li> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                  • \n
                                                                                                                                    Footer.jsx<\/p>\n
                                                                                                                                    import React, { Component } from 'react' import '.\/index.css' export default class Footer extends Component { render() { const { todos, allTodosAct, deleteAllChecked } = this.props \/\/ \u5df2\u5b8c\u6210\u7684\u4e2a\u6570 const doneCount = todos.reduce((pre, cur) => { return pre + (cur.done ? 1 : 0) }, 0) \/\/ \u603b\u4e2a\u6570 const totalCount = todos.length return ( <div className=\"todo-footer\"> <label> <input type=\"checkbox\" checked={doneCount === totalCount && doneCount !== 0} onChange={(event) => { allTodosAct(event.target.checked); }} \/> <\/label> <span> <span>\u5df2\u5b8c\u6210{doneCount}<\/span> \/ \u5168\u90e8{totalCount} <\/span> <button className=\"btn btn-danger\" onClick={deleteAllChecked}>\u6e05\u9664\u5df2\u5b8c\u6210\u4efb\u52a1<\/button> <\/div> ) } } <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                    \u603b\u7ed3<\/h4>\n
                                                                                                                                      \n
                                                                                                                                    1. \u6211\u4eec\u73b0\u5728\u6240\u5b66\u7684\u77e5\u8bc6\u8fd8\u65e0\u6cd5\u652f\u6301\u5144\u5f1f\u7ec4\u4ef6\u95f4\u4f20\u503c\uff0c\u6240\u4ee5\u628a\u5217\u8868\u6570\u636e\u90fd\u5199\u5230\u4e86\u5171\u540c\u7684\u7236\u7ea7\u7ec4\u4ef6 App.js \u4e2d\uff0c\u7531 App \u7ec4\u4ef6\u4f20\u9012\u7ed9\u5404\u4e2a\u5b50\u7ec4\u4ef6<\/li>\n
                                                                                                                                    2. \u72b6\u6001\u5728\u54ea\u91cc\uff0c\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5\u5c31\u5199\u5230\u54ea\u91cc<\/li>\n
                                                                                                                                    3. nanoid \u53ef\u4ee5\u7406\u89e3\u4e3a uuid \u7684\u8f7b\u91cf\u578b\uff0c\u5b89\u88c5\uff1anpm i nanoid<\/li>\n
                                                                                                                                    4. \u5b89\u88c5 prop-types \u53ef\u4ee5\u63a7\u5236\u4f20\u5165\u7ec4\u4ef6 props \u7684\u6570\u636e\u7c7b\u578b\uff1anpm i prop-types<\/li>\n
                                                                                                                                    5. \u4e3a\u9009\u62e9\u6846\u6dfb\u52a0 checked \u5c5e\u6027\u65f6\uff0c\u5fc5\u987b\u6307\u5b9a onClick \u65b9\u6cd5<\/li>\n
                                                                                                                                    6. \u4e3a\u9009\u62e9\u6846\u6dfb\u52a0 defaultChecked \u5c5e\u6027\u65f6\uff0c\u9700\u8981\u77e5\u9053\u5b83\u662f\u975e\u53d7\u63a7\u7ec4\u4ef6\u7684\u5c5e\u6027\uff0c\u7528\u4e8e\u8bbe\u7f6e\u7ec4\u4ef6\u9996\u6b21\u6302\u8f7d\u65f6\u662f\u5426\u88ab\u9009\u4e2d\uff0c\u4e4b\u540e\u65e0\u6cd5\u901a\u8fc7\u6b64\u503c\u6765\u63a7\u5236\u7ec4\u4ef6\u7684\u9009\u4e2d\u72b6\u6001<\/li>\n<\/ol>\n
                                                                                                                                      \u5934\u50cf\u641c\u7d22\u6848\u4f8b<\/h3>\n
                                                                                                                                      \u62c6\u5206\u7ec4\u4ef6<\/h4>\n
                                                                                                                                      \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                      \u6ce8\u610f\uff1a\u8fd9\u91cc\u7684\u5934\u50cf\u5c31\u4e0d\u7528\u5355\u72ec\u5c01\u88c5\u4e3a\u7ec4\u4ef6\u4e86\uff0c\u800c\u662f\u76f4\u63a5\u5728\u5217\u8868\u7ec4\u4ef6\u4e2d\u904d\u5386\u51fa\u6765\u66f4\u4e3a\u65b9\u4fbf<\/p>\n
                                                                                                                                      \u5b9e\u73b0\u9759\u6001\u7ec4\u4ef6<\/h4>\n
                                                                                                                                      \u9879\u76ee\u7ed3\u6784\u5982\u4e0b<\/p>\n
                                                                                                                                      \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                      \u5b9e\u73b0\u52a8\u6001\u7ec4\u4ef6<\/h4>\n
                                                                                                                                        \n
                                                                                                                                      • \n
                                                                                                                                        index.html<\/p>\n
                                                                                                                                        <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span> <<\/span>html<\/span> lang<\/span>=<\/span>\"<\/span>en\"<\/span><\/span>><\/span><\/span> <<\/span>head<\/span>><\/span><\/span> <!-- \u7b2c\u4e09\u65b9css\u8981\u653e\u5230public\u4e0b\uff0c\u4e14\u5fc5\u987b\u50cf\u8fd9\u6837\u5728index.html\u4e2d\u5f15\u5165\uff0c\u800c\u4e0d\u80fd\u901a\u8fc7import\u5f15\u5165\u5230\u7ec4\u4ef6\u4e2d\uff0c\u56e0\u4e3aimport\u53ea\u80fd\u5f15\u5165src\u76ee\u5f55\u4e0b\u7684\u6587\u4ef6 --><\/span> <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>.\/css\/bootstrap.css\"<\/span><\/span>><\/span><\/span> <\/<\/span>head<\/span>><\/span><\/span> <<\/span>body<\/span>><\/span><\/span> <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>root\"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span> <\/<\/span>body<\/span>><\/span><\/span> <\/<\/span>html<\/span>><\/span><\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                      • \n
                                                                                                                                        App.js<\/p>\n
                                                                                                                                        import React, { Component } from 'react' import Jumbotron from '.\/component\/Jumbotron' import Row from '.\/component\/Row' export default class App extends Component { state = { list: [], err: '', isFirst: true, isLoading: false } \/\/ \u56e0\u4e3astate\u4e2d\u5c5e\u6027\u592a\u591a\uff0c\u6211\u4eec\u5c31\u4e0d\u4e00\u4e00\u4e3a\u6bcf\u4e2a\u5c5e\u6027\u90fd\u5199\u4e00\u4e2a\u66f4\u65b0\u7684\u65b9\u6cd5\uff0c\u800c\u662f\u76f4\u63a5\u5199\u4e00\u4e2a\u4fee\u6539state\u7684\u65b9\u6cd5 updateState = (state) => { this.setState(state) } render() { return ( <div className='container'> <Jumbotron updateState={this.updateState} \/> <Row state={this.state} \/> <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                      • \n
                                                                                                                                        Row.jsx<\/p>\n
                                                                                                                                        import React, { Component } from 'react'\nimport '.\/index.css'\nexport default class Row extends Component {\n    render() {\n        const { state: { isFirst, isLoading, err, list } } = this.props\n        return (\n            <div className=\"row\">\n                {\n                    isFirst ? <h2>\u6b22\u8fce\u4f7f\u7528\u7528\u6237\u67e5\u8be2\u7cfb\u7edf\uff0c\u8bf7\u8f93\u5165\u5173\u952e\u5b57\u8fdb\u884c\u641c\u7d22<\/h2> :\n                        isLoading ? <h2>\u6b63\u5728\u52a0\u8f7d\uff0c\u8bf7\u7a0d\u5019...<\/h2> :\n                            err ? <h2>{err}<\/h2> :\n                                list.map(v => {\n                                    const { avatar_url, id, html_url, login } = v\n                                    return (\n                                        <div key={id} className=\"card\">\n                                            <a href={html_url} rel='noreferrer' target=\"_blank\">\n                                                <img alt='head_img' src={avatar_url} style={\n    \n    \n    { width: '100px' }} \/> <\/a> <p className=\"card-text\">{login}<\/p> <\/div> ) }) } <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                      • \n
                                                                                                                                        Jumbotron.jsx<\/p>\n
                                                                                                                                        import React, { Component } from 'react' import axios from 'axios' export default class Jumbotron extends Component { search = () => { const { updateState } = this.props \/\/ \u591a\u7ea7\u89e3\u6784\u8d4b\u503c\uff0c\u5e76\u4ee5\u65b0\u7684\u53d8\u91cf\u540d\u63a5\u6536 const { content: { value: str } } = this \/\/ \u53d1\u8d77\u8bf7\u6c42\uff08\u6b64\u5904\u8c03\u7528\u7684GitHub\u901a\u8fc7\u540d\u5b57\u67e5\u8be2\u7528\u6237\u4fe1\u606f\u7684\u63a5\u53e3\uff09 updateState({ isLoading: true, isFirst: false }) axios.get(`https:\/\/api.github.com\/search\/users?q=${str}`).then( response => { console.log('\u8bf7\u6c42\u6210\u529f\uff0c\u54cd\u5e94\u6570\u636e\u4e3a\uff1a', response) updateState({ list: response.data.items, isLoading: false }) }, error => { console.log('\u8bf7\u6c42\u5931\u8d25\uff0c\u54cd\u5e94\u6570\u636e\u4e3a\uff1a', error) updateState({ isLoading: false, err: error.message }) } ) } render() { return ( <section className=\"jumbotron\"> <h3 className=\"jumbotron-heading\">Search Github Users<\/h3> <div> <input ref={c => { this.content = c }} type=\"text\" placeholder=\"enter the name you search\" \/>&nbsp; <button onClick={this.search}>Search<\/button> <\/div> <\/section> ) } } <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                        React Ajax<\/h2>\n
                                                                                                                                        React \u672c\u8eab\u53ea\u5173\u6ce8\u4e8e\u754c\u9762\uff0c\u5e76\u4e0d\u5305\u542b\u53d1\u9001 ajax \u8bf7\u6c42\u7684\u4ee3\u7801\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u501f\u52a9\u4e8e\u7b2c\u4e09\u65b9\u5e93\uff1aaxios<\/p>\n
                                                                                                                                        React \u7a0b\u5e8f\u7aef\u53e3\u53f7\u4e3a 3000\uff0c\u6211\u4eec\u53c8\u5728\u672c\u5730\u542f\u4e86\u4e24\u4e2a node \u670d\u52a1\u5668\uff0c\u7aef\u53e3\u53f7\u4e3a 5000 \u548c 5001\uff0c\u5f53\u76f4\u63a5\u4f7f\u7528 React \u53bb\u8bf7\u6c42 node \u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e\u65f6\uff0c\u4f1a\u62a5\u8de8\u57df\u95ee\u9898\uff0c\u6240\u4ee5\u9700\u8981\u914d\u7f6e\u4ee3\u7406<\/p>\n
                                                                                                                                        \u8de8\u57df\u95ee\u9898<\/h3>\n
                                                                                                                                        \u4ec0\u4e48\u662f\u8de8\u57df<\/h4>\n
                                                                                                                                        CORS \u5168\u79f0 Cross-Origin Resource Sharing\uff0c\u610f\u4e3a\u8de8\u57df\u8d44\u6e90\u5171\u4eab\u3002\u5f53\u4e00\u4e2a\u8d44\u6e90\u53bb\u8bbf\u95ee\u53e6\u4e00\u4e2a\u4e0d\u540c\u57df\u540d\u6216\u8005\u540c\u57df\u540d\u4e0d\u540c\u7aef\u53e3\u7684\u8d44\u6e90\u65f6\uff0c\u5c31\u4f1a\u53d1\u51fa\u8de8\u57df\u8bf7\u6c42\u3002\u5982\u679c\u6b64\u65f6\u53e6\u4e00\u4e2a\u8d44\u6e90\u4e0d\u5141\u8bb8\u5176\u8fdb\u884c\u8de8\u57df\u8d44\u6e90\u8bbf\u95ee\uff0c\u90a3\u4e48\u8bbf\u95ee\u5c31\u4f1a\u9047\u5230\u8de8\u57df\u95ee\u9898<\/p>\n
                                                                                                                                        \u8de8\u57df\u6307\u7684\u662f\u6d4f\u89c8\u5668\u4e0d\u80fd\u6267\u884c\u5176\u5b83\u7f51\u7ad9\u7684\u811a\u672c\u3002\u662f\u7531\u6d4f\u89c8\u5668\u7684\u540c\u6e90\u7b56\u7565\u9020\u6210\u7684\uff0c\u662f\u6d4f\u89c8\u5668\u5bf9 JavaScript \u65bd\u52a0\u7684\u5b89\u5168\u9650\u5236<\/p>\n
                                                                                                                                        \u540c\u6e90\u7b56\u7565<\/h4>\n
                                                                                                                                        \u540c\u6e90\u7b56\u7565\uff1a\u662f\u7531 Netscape \u63d0\u51fa\u7684\u4e00\u4e2a\u5b89\u5168\u7b56\u7565\uff0c\u5b83\u662f\u6d4f\u89c8\u5668\u6700\u6838\u5fc3\u4e5f\u662f\u6700\u57fa\u672c\u7684\u5b89\u5168\u529f\u80fd\uff0c\u5982\u679c\u7f3a\u5c11\u540c\u6e90\u7b56\u7565\uff0c\u5219\u6d4f\u89c8\u5668\u7684\u6b63\u5e38\u529f\u80fd\u53ef\u80fd\u90fd\u4f1a\u53d7\u5230\u5f71\u54cd\uff0c\u73b0\u5728\u6240\u6709\u652f\u6301 JavaScript \u7684\u6d4f\u89c8\u5668\u90fd\u4f1a\u4f7f\u7528\u8fd9\u4e2a\u7b56\u7565<\/p>\n
                                                                                                                                        \u5728\u89e3\u6790 Ajax \u8bf7\u6c42\u65f6\uff0c\u8981\u6c42\u6d4f\u89c8\u5668\u7684\u8def\u5f84\u4e0e Ajax \u7684\u8bf7\u6c42\u7684\u8def\u5f84\u5fc5\u987b\u6ee1\u8db3\u4ee5\u4e0b\u4e09\u4e2a\u8981\u6c42\uff0c\u5219\u6ee1\u8db3\u540c\u6e90\u7b56\u7565\uff0c\u53ef\u4ee5\u8bbf\u95ee\u670d\u52a1\u5668<\/p>\n
                                                                                                                                          \n
                                                                                                                                        1. \u534f\u8bae\u76f8\u540c<\/li>\n
                                                                                                                                        2. \u57df\u540d\u76f8\u540c<\/li>\n
                                                                                                                                        3. \u7aef\u53e3\u53f7\u76f8\u540c<\/li>\n<\/ol>\n
                                                                                                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                          \u540c\u6e90\u7b56\u7565\u6848\u4f8b\uff1a<\/p>\n
                                                                                                                                            \n
                                                                                                                                          1. \u6ee1\u8db3\u540c\u6e90\u7b56\u7565.\u670d\u52a1\u5668\u53ef\u4ee5\u6b63\u5e38\u8bbf\u95ee\n
                                                                                                                                              \n
                                                                                                                                            • \u6d4f\u89c8\u5668\u5730\u5740 http:\/\/localhost:8090\/findAll<\/li>\n
                                                                                                                                            • Ajax \u8bf7\u6c42\u5730\u5740 http:\/\/localhost:8090\/aaaa<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                            • \u4e0d\u6ee1\u8db3\u540c\u6e90\u7b56\u7565. \u7aef\u53e3\u53f7\u4e0d\u540c. \u5c5e\u4e8e\u8de8\u57df\u8bf7\u6c42\n
                                                                                                                                                \n
                                                                                                                                              • \u6d4f\u89c8\u5668\u5730\u5740 http:\/\/localhost:8091\/findAll<\/li>\n
                                                                                                                                              • Ajax \u8bf7\u6c42\u5730\u5740 http:\/\/localhost:8090\/aaaa<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                              • \u4e0d\u6ee1\u8db3\u540c\u6e90\u7b56\u7565. \u534f\u8bae\u4e0d\u540c. \u5c5e\u4e8e\u8de8\u57df\u8bf7\u6c42\n
                                                                                                                                                  \n
                                                                                                                                                • \u6d4f\u89c8\u5668\u5730\u5740 http:\/\/localhost:8090\/findAll<\/li>\n
                                                                                                                                                • Ajax \u8bf7\u6c42\u5730\u5740 https:\/\/localhost:8090\/aaaa<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                • \u4e0d\u6ee1\u8db3\u540c\u6e90\u7b56\u7565. \u57df\u540d\u4e0d\u540c\uff08\u524d\u63d0: IP\u4e0e\u57df\u540d\u6620\u5c04\uff09\n
                                                                                                                                                    \n
                                                                                                                                                  • \u6d4f\u89c8\u5668\u5730\u5740 http:\/\/www.baidu.com\/findAll<\/li>\n
                                                                                                                                                  • Ajax \u8bf7\u6c42\u5730\u5740 http:\/\/163.177.151.109\/aaaa<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                  • \u6ee1\u8db3\u540c\u6e90\u7b56\u7565. http\u534f\u8bae\uff0c\u9ed8\u8ba4\u7aef\u53e3\u4e3a80<\/strong>\n
                                                                                                                                                      \n
                                                                                                                                                    • \u6d4f\u89c8\u5668\u5730\u5740 http:\/\/10.0.1.1:80\/findAll<\/li>\n
                                                                                                                                                    • Ajax \u8bf7\u6c42\u5730\u5740 http:\/\/10.0.1.1\/aaaa<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                    • \u6ee1\u8db3\u540c\u6e90\u7b56\u7565\uff0chttps\u534f\u8bae\u9ed8\u8ba4\u7aef\u53e3\u4e3a443<\/strong>\n
                                                                                                                                                        \n
                                                                                                                                                      • \u6d4f\u89c8\u5668\u5730\u5740 https:\/\/10.0.1.1\/findAll<\/li>\n
                                                                                                                                                      • Ajax \u8bf7\u6c42\u5730\u5740 https:\/\/10.0.1.1:443\/aaaa<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                                                        \u8de8\u57df\u89e3\u51b3\u65b9\u6848<\/h4>\n
                                                                                                                                                        \u4ee3\u7406\u914d\u7f6e\u65b9\u6848\u89c1\u4e0b\u8282\uff0c\u5176\u4ed6\u65b9\u6848\u89c1\uff1ahttps:\/\/www.cnblogs.com\/xikui\/p\/16071929.html<\/p>\n
                                                                                                                                                        React\u811a\u624b\u67b6\u4ee3\u7406\u914d\u7f6e<\/h3>\n
                                                                                                                                                        \u6211\u5728 localhost:3000 \u7aef\u53e3\uff0c\u8981\u8bf7\u6c42 localhost:5000 \u670d\u52a1\u7684\u6570\u636e<\/p>\n
                                                                                                                                                        \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                        \u5f53\u6211\u4eec\u53d1\u9001\u4e00\u4e2a ajax \u8bf7\u6c42\u7684\u65f6\u5019\uff0c\u8bf7\u6c42\u786e\u5b9e\u5230\u8fbe 5000 \u7aef\u53e3\u4e86\uff0c\u4f46\u662f\u6ca1\u6709\u8fd4\u56de\uff1a<\/p>\n
                                                                                                                                                        \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                        3000 \u7aef\u53e3\u7684 ajax \u5f15\u64ce\u62d2\u7edd\u4e86\u8fd4\u56de\u7684\u54cd\u5e94\uff0c\u6240\u6709\u4ea7\u751f\u4e86\u8de8\u57df<\/p>\n
                                                                                                                                                        Q\uff1a\u4e3a\u4ec0\u4e48\u4ee3\u7406\u53ef\u4ee5\u89e3\u51b3\u8de8\u57df\u5462\uff1f<\/p>\n
                                                                                                                                                        A\uff1a\u56e0\u4e3a\u6211\u4eec\u5728\u914d\u7f6e\u4ee3\u7406\u7684\u65f6\u5019 React \u4f1a\u5e2e\u6211\u4eec\u751f\u6210\u4e00\u4e2a\u4e2d\u95f4\u4eba\uff0c\u901a\u8fc7\u4e2d\u95f4\u4eba\u53bb\u8ddf\u670d\u52a1\u7aef\u62ff\u6570\u636e\uff0c\u90a3\u4e48\u8de8\u57df\u95ee\u9898\u5c31\u89e3\u51b3\u4e86<\/p>\n
                                                                                                                                                        Q\uff1a\u4e3a\u4ec0\u4e48\u4e2d\u95f4\u4eba\u53ef\u4ee5\u62ff\u5230 5000 \u7aef\u53e3\u4e0a\u7684\u6570\u636e\uff0c\u4e2d\u95f4\u4eba\u4e0d\u4e5f\u662f\u5728 3000 \u7aef\u53e3\u4e0a\u7684\u5417<\/p>\n
                                                                                                                                                        A\uff1a\u56e0\u4e3a\u4e2d\u95f4\u4eba\u4e0d\u9075\u5b88 ajax \u5f15\u64ce\u7b56\u7565<\/strong>\uff0c\u6240\u4ee5\u53ef\u80fd\u6b63\u5e38\u5728 5000 \u7aef\u53e3\u62ff\u5230\u8fd4\u56de\u7684\u6570\u636e\uff0c\u800c\u5ba2\u6237\u7aef\u662f\u76f4\u63a5\u5411 3000 \u7aef\u53e3\u8bf7\u6c42\u7684\u6570\u636e\uff0c\u7b26\u5408\u540c\u6e90\u7b56\u7565\u89c4\u8303\uff0c\u8de8\u57df\u89e3\u51b3<\/p>\n
                                                                                                                                                        \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                        \u65b9\u6cd5\u4e00<\/h4>\n
                                                                                                                                                        \u5728 package.json \u4e2d\u8ffd\u52a0\u5982\u4e0b\u914d\u7f6e\uff1a<\/p>\n
                                                                                                                                                        \"proxy\"<\/span>:<\/span>\"http:\/\/localhost:5000\"<\/span> <\/code><\/pre>\n
                                                                                                                                                        \u8bf4\u660e\uff1a<\/p>\n
                                                                                                                                                          \n
                                                                                                                                                        1. \u4f18\u70b9\uff1a\u914d\u7f6e\u7b80\u5355\uff0c\u524d\u7aef\u8bf7\u6c42\u8d44\u6e90\u65f6\u53ef\u4ee5\u4e0d\u52a0\u4efb\u4f55\u524d\u7f00\u3002<\/li>\n
                                                                                                                                                        2. \u7f3a\u70b9\uff1a\u4e0d\u80fd\u914d\u7f6e\u591a\u4e2a\u4ee3\u7406\u3002<\/li>\n
                                                                                                                                                        3. \u5de5\u4f5c\u65b9\u5f0f\uff1a\u4e0a\u8ff0\u65b9\u5f0f\u914d\u7f6e\u4ee3\u7406\uff0c\u5f53\u8bf7\u6c42\u4e86 3000 \u4e0d\u5b58\u5728\u7684\u8d44\u6e90\u65f6\uff0c\u90a3\u4e48\u8be5\u8bf7\u6c42\u4f1a\u8f6c\u53d1\u7ed9 5000\n
                                                                                                                                                            \n
                                                                                                                                                          • \u6bd4\u5982\u8bf4\u8bf7\u6c42 localhost:3000\/index.html\uff0c\u90a3\u4e48\u5c31\u4f1a\u8fd4\u56de\u8fd9\u4e2a\u9759\u6001\u9875\u9762<\/li>\n
                                                                                                                                                          • \u5982\u679c\u8bf7\u6c42 localhost:3000\/aaa.html\uff0c\u5728\u81ea\u5df1\u670d\u52a1\u5668\u4e0a\u6ca1\u627e\u5230\uff0c\u5c31\u4f1a\u53bb 5000 \u670d\u52a1\u5668\u4e0a\u627e<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                                                            \u65b9\u6cd5\u4e8c<\/h4>\n
                                                                                                                                                              \n
                                                                                                                                                            1. \n
                                                                                                                                                              \u7b2c\u4e00\u6b65\uff1a\u521b\u5efa\u4ee3\u7406\u914d\u7f6e\u6587\u4ef6<\/p>\n
                                                                                                                                                              \u5728src\u4e0b\u521b\u5efa\u914d\u7f6e\u6587\u4ef6\uff1asrc\/setupProxy.js \u6ce8\u610f\u6587\u4ef6\u540d\u5fc5\u987b\u5199\u5bf9\uff0c\u4e0d\u7136React\u627e\u4e0d\u7740 <\/code><\/pre>\n<\/li>\n
                                                                                                                                                            2. \n
                                                                                                                                                              \u7f16\u5199 setupProxy.js \u914d\u7f6e\u5177\u4f53\u4ee3\u7406\u89c4\u5219\uff1a<\/p>\n
                                                                                                                                                              \/\/ React 17.x \u7248\u672c\uff1a<\/span> const<\/span> proxy =<\/span> require<\/span>(<\/span>'http-proxy-middleware'<\/span>)<\/span> module.<\/span>exports<\/span> =<\/span> function<\/span>(<\/span>app<\/span>)<\/span> { \n     <\/span> app.<\/span>use<\/span>(<\/span> proxy<\/span>(<\/span>'\/api1'<\/span>,<\/span> { \n     <\/span> \/\/api1\u662f\u9700\u8981\u8f6c\u53d1\u7684\u8bf7\u6c42(\u6240\u6709\u5e26\u6709\/api1\u524d\u7f00\u7684\u8bf7\u6c42\u90fd\u4f1a\u8f6c\u53d1\u7ed95000)<\/span> target<\/span>:<\/span> 'http:\/\/localhost:5000'<\/span>,<\/span> \/\/\u914d\u7f6e\u8f6c\u53d1\u76ee\u6807\u5730\u5740(\u80fd\u8fd4\u56de\u6570\u636e\u7684\u670d\u52a1\u5668\u5730\u5740)<\/span> changeOrigin<\/span>:<\/span> true<\/span>,<\/span> \/\/\u63a7\u5236\u670d\u52a1\u5668\u63a5\u6536\u5230\u7684\u8bf7\u6c42\u5934\u4e2dhost\u5b57\u6bb5\u7684\u503c<\/span> \/* changeOrigin\u8bbe\u7f6e\u4e3atrue\u65f6\uff0c\u670d\u52a1\u5668\u6536\u5230\u7684\u8bf7\u6c42\u5934\u4e2d\u7684host\u4e3a\uff1alocalhost:5000 changeOrigin\u8bbe\u7f6e\u4e3afalse\u65f6\uff0c\u670d\u52a1\u5668\u6536\u5230\u7684\u8bf7\u6c42\u5934\u4e2d\u7684host\u4e3a\uff1alocalhost:3000 changeOrigin\u9ed8\u8ba4\u503c\u4e3afalse\uff0c\u4f46\u6211\u4eec\u4e00\u822c\u5c06changeOrigin\u503c\u8bbe\u4e3atrue *\/<\/span> pathRewrite<\/span>:<\/span> { \n     <\/span>'^\/api1'<\/span>:<\/span> ''<\/span>}<\/span> \/\/\u53bb\u9664\u8bf7\u6c42\u524d\u7f00\uff0c\u4fdd\u8bc1\u4ea4\u7ed9\u540e\u53f0\u670d\u52a1\u5668\u7684\u662f\u6b63\u5e38\u8bf7\u6c42\u5730\u5740(\u5fc5\u987b\u914d\u7f6e)<\/span> }<\/span>)<\/span>,<\/span> proxy<\/span>(<\/span>'\/api2'<\/span>,<\/span> { \n     <\/span> target<\/span>:<\/span> 'http:\/\/localhost:5001'<\/span>,<\/span> changeOrigin<\/span>:<\/span> true<\/span>,<\/span> pathRewrite<\/span>:<\/span> { \n     <\/span>'^\/api2'<\/span>:<\/span> ''<\/span>}<\/span> }<\/span>)<\/span> )<\/span> }<\/span> \/\/ React 18.x \u7248\u672c\uff1a<\/span> const<\/span> { \n     <\/span> createProxyMiddleware }<\/span> =<\/span> require<\/span>(<\/span>'http-proxy-middleware'<\/span>)<\/span> module.<\/span>exports<\/span> =<\/span> function<\/span> (<\/span>app<\/span>)<\/span> { \n     <\/span> app.<\/span>use<\/span>(<\/span> createProxyMiddleware<\/span>(<\/span>'\/api1'<\/span>,<\/span> { \n     <\/span> target<\/span>:<\/span> 'http:\/\/localhost:5000'<\/span>,<\/span> changeOrigin<\/span>:<\/span> true<\/span>,<\/span> pathRewrite<\/span>:<\/span> { \n     <\/span> '^\/api1'<\/span>:<\/span> ''<\/span> }<\/span> }<\/span>)<\/span>,<\/span> createProxyMiddleware<\/span>(<\/span>'\/api2'<\/span>,<\/span> { \n     <\/span> target<\/span>:<\/span> 'http:\/\/localhost:5001'<\/span>,<\/span> changeOrigin<\/span>:<\/span> true<\/span>,<\/span> pathRewrite<\/span>:<\/span> { \n     <\/span> '^\/api2'<\/span>:<\/span> ''<\/span> }<\/span> }<\/span>)<\/span>,<\/span> )<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                              \u8bf4\u660e\uff1a<\/p>\n
                                                                                                                                                                \n
                                                                                                                                                              1. \u4f18\u70b9\uff1a\u53ef\u4ee5\u914d\u7f6e\u591a\u4e2a\u4ee3\u7406\uff0c\u53ef\u4ee5\u7075\u6d3b\u7684\u63a7\u5236\u8bf7\u6c42\u662f\u5426\u8d70\u4ee3\u7406<\/li>\n
                                                                                                                                                              2. \u7f3a\u70b9\uff1a\u914d\u7f6e\u7e41\u7410\uff0c\u524d\u7aef\u8bf7\u6c42\u8d44\u6e90\u65f6\u5fc5\u987b\u52a0\u524d\u7f00<\/li>\n<\/ol>\n
                                                                                                                                                                \u53d1\u8d77\u8bf7\u6c42<\/h3>\n
                                                                                                                                                                import React, { Component } from 'react' \/\/ \u5f15\u5165axios import axios from 'axios' export default class App extends Component { getStudentData = () => { \/\/ 1. \u901a\u8fc7package.json\u914d\u7f6e\u4ee3\u7406\u540e\u7684\u8bf7\u6c42\u65b9\u5f0f\uff1a\u8bbf\u95ee3000\uff0c\u4f1a\u81ea\u52a8\u8f6c\u53d1\u52305000 axios.get(\"http:\/\/localhost:3000\/students\").then( response => { console.log('\u6210\u529f\u8bf7\u6c42\u5230\u6570\u636e\uff1a', response.data); }, error => { console.log('\u5931\u8d25\u539f\u56e0\u4e3a\uff1a', error); } ) \/\/ 2. \u901a\u8fc7setupProxy.js\u914d\u7f6e\u4ee3\u7406\u540e\u7684\u8bf7\u6c42\u65b9\u5f0f\uff1a\u6839\u636e\u8bf7\u6c42\u524d\u7f00\u7684\u4e0d\u540c\u51b3\u5b9a\u8bf7\u6c42\u54ea\u4e2a\u7aef\u53e3 getStudentData = () => { \/\/ \u6839\u636e\u4ee3\u7406\u914d\u7f6e\uff0capi1\u524d\u7f00\u7684\u8bf7\u6c42\u4f1a\u8f6c\u53d1\u52305000\u670d\u52a1\u5668\uff08'\/api1'\u5fc5\u987b\u5199\u5230\u6700\u524d\u9762\uff09 axios.get(\"http:\/\/localhost:3000\/api1\/students\").then( response => { console.log('\u6210\u529f\u8bf7\u6c42\u5230\u6570\u636e\uff1a', response.data); }, error => { console.log('\u5931\u8d25\u539f\u56e0\u4e3a\uff1a', error); } ) } getCarData = () => { \/\/ \u6839\u636e\u4ee3\u7406\u914d\u7f6e\uff0capi2\u524d\u7f00\u4f1a\u8f6c\u53d1\u52305001\u670d\u52a1\u5668 axios.get(\"http:\/\/localhost:3000\/api2\/cars\").then( response => { console.log('\u6210\u529f\u8bf7\u6c42\u5230\u6570\u636e\uff1a', response.data); }, error => { console.log('\u5931\u8d25\u539f\u56e0\u4e3a\uff1a', error); } ) } } render() { return ( <div> <button onClick={this.getStudentData}>\u70b9\u6211\u83b7\u53d6\u5b66\u751f\u6570\u636e<\/button> <button onClick={this.getCarData}>\u70b9\u6211\u83b7\u53d6\u6c7d\u8f66\u6570\u636e<\/button> <\/div> ) } } <\/code><\/pre>\n
                                                                                                                                                                \u6d88\u606f\u8ba2\u9605\u4e0e\u53d1\u5e03<\/h2>\n
                                                                                                                                                                \u5728\u6211\u4eec\u4e4b\u524d\u505a\u8fc7\u7684 ToDoList \u548c\u5934\u50cf\u641c\u7d22\u6848\u4f8b\u4e2d\uff0c\u4e3a\u4e86\u5b9e\u73b0\u5144\u5f1f\u7ec4\u4ef6\u901a\u4fe1\uff0c\u90fd\u9700\u8981\u5c06\u6570\u636e\u653e\u5230\u9876\u5c42 App \u7ec4\u4ef6\u4e2d\uff0c\u7136\u540e\u7531 App \u7ec4\u4ef6\u4e0b\u53d1\u7ed9\u5404\u4e2a\u5b50\u7ec4\u4ef6\u3002\u53ef\u5982\u679c\u5b50\u7ec4\u4ef6\u7684\u5c42\u7ea7\u5f88\u591a\uff0c\u8fd9\u6837\u5199\u8d77\u6765\u5c31\u4f1a\u7279\u522b\u9ebb\u70e6<\/p>\n
                                                                                                                                                                \u6211\u4eec\u901a\u8fc7 PubSub \u5e93\u53ef\u4ee5\u5b9e\u73b0\u5404\u4e2a\u7ec4\u4ef6\u4e4b\u95f4\u7684\u76f8\u4e92\u901a\u4fe1<\/p>\n
                                                                                                                                                                PubSub<\/h3>\n
                                                                                                                                                                  \n
                                                                                                                                                                • \n
                                                                                                                                                                  A \u7ec4\u4ef6\uff1a<\/p>\n
                                                                                                                                                                  \/\/ \u8ba2\u9605search\u6d88\u606f\uff1a\u6bcf\u5f53\u6536\u5230\u540d\u4e3asearch\u7684\u6d88\u606f\u65f6\uff0c\u5c31\u53ef\u4ee5\u5728\u56de\u8c03\u51fd\u6570\u4e2d\u62ff\u5230\u6d88\u606f\u540d\u548c\u6570\u636e\u5185\u5bb9 PubSub.subscribe('search', (msg, data) => { this.setState(data) }) <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                • \n
                                                                                                                                                                  B \u7ec4\u4ef6\uff1a<\/p>\n
                                                                                                                                                                  \/\/ \u53d1\u5e03search\u6d88\u606f\uff0c\u53c2\u6570\u4e3a\u6d88\u606f\u540d\u548c\u6570\u636e\u5185\u5bb9 PubSub.publish('search', { isLoading: true, isFirst: false }) <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                  \u5934\u50cf\u641c\u7d22\u6848\u4f8b\u4f18\u5316<\/h3>\n
                                                                                                                                                                  \u4f7f\u7528 PubSub \u6d88\u606f\u8ba2\u9605\u4e0e\u53d1\u5e03\u6a21\u5f0f\u6765\u4f18\u5316\u4e4b\u524d\u7684\u5934\u50cf\u641c\u7d22\u6848\u4f8b\uff1a<\/p>\n
                                                                                                                                                                    \n
                                                                                                                                                                  • \n
                                                                                                                                                                    \u641c\u7d22\u680f Jumbotron.jsx\uff08\u6d88\u606f\u53d1\u5e03\u7aef\uff09<\/p>\n
                                                                                                                                                                    import React, { Component } from 'react' import axios from 'axios' import PubSub from 'pubsub-js' export default class Jumbotron extends Component { \/\/ \u641c\u7d22\u6846\u70b9\u51fb\u4e8b\u4ef6 search = () => { const { content: { value: str } } = this \/\/ \u53d1\u8d77\u8bf7\u6c42\uff08\u6b64\u5904\u8c03\u7528\u7684GitHub\u901a\u8fc7\u540d\u5b57\u67e5\u8be2\u7528\u6237\u4fe1\u606f\u7684\u63a5\u53e3\uff09 PubSub.publish('search', { isLoading: true, isFirst: false }) axios.get(`https:\/\/api.github.com\/search\/users?q=${str}`).then( response => { \/\/ \u8bf7\u6c42\u5230\u6570\u636e\u540e\uff0c\u53d1\u9001search\u6d88\u606f\uff0c\u6570\u636e\u5185\u5bb9\u4e3a\u521a\u521a\u8bf7\u6c42\u5230\u7684\u7528\u6237\u4fe1\u606flist PubSub.publish('search', { isLoading: false, list: response.data.items }) }, error => { PubSub.publish('search', { isLoading: false, err: error.message }) } ) } render() { return ( <section className=\"jumbotron\"> <h3 className=\"jumbotron-heading\">Search Github Users<\/h3> <div> <input ref={c => { this.content = c }} type=\"text\" placeholder=\"enter the name you search\" \/>&nbsp; <button onClick={this.search}>Search<\/button> <\/div> <\/section> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                  • \n
                                                                                                                                                                    \u5217\u8868 Row.jsx\uff08\u6d88\u606f\u8ba2\u9605\u7aef\uff09<\/p>\n
                                                                                                                                                                    import React, { Component } from 'react'\nimport PubSub from 'pubsub-js'\nimport '.\/index.css'\nexport default class Row extends Component {\n    \/\/ \u65e2\u7136\u662f\u8be5\u7ec4\u4ef6\u8981\u5c55\u793a\u6570\u636e\uff0c\u90a3\u4e48\u5c31\u628a\u6570\u636e\u90fd\u5b58\u653e\u5230\u8be5\u7ec4\u4ef6\u7684\u72b6\u6001\u91cc\uff0c\u4e0d\u9700\u8981\u518d\u653e\u5230App\u7ec4\u4ef6\u4e2d\u4e86\n    state = {\n        list: [],\n        err: '',\n        isFirst: true,\n        isLoading: false\n    }\n\n\t\/\/ \u8ba2\u9605\u6d88\u606f\u4e00\u822c\u5199\u5230\u7ec4\u4ef6\u6302\u8f7d\u5b8c\u6210\u540e\u7684\u94a9\u5b50\u51fd\u6570\u4e2d\n    componentDidMount() {\n        \/**\n         * \u8ba2\u9605search\u6d88\u606f\uff1a\u53ea\u8981\u6709\u4eba\u53d1\u5e03\u540d\u4e3asearch\u7684\u6d88\u606f\uff0c\u56de\u8c03\u51fd\u6570\u5c31\u80fd\u63a5\u6536\u5230\n         * \u4f7f\u7528\u4e00\u4e2a\u53d8\u91cf\u6765\u63a5\u6536\uff0c\u7528\u4e8e\u53d6\u6d88\u8ba2\u9605\n         * msg\uff1a\u6d88\u606f\u540d\n         * data\uff1a\u6d88\u606f\u6570\u636e\n         *\/\n        this.token = PubSub.subscribe('search', (msg, data) => {\n            \/\/ \u62ff\u5230\u641c\u7d22\u680f\u53d1\u9001\u8fc7\u6765\u7684\u6570\u636e\uff0c\u66f4\u65b0\u72b6\u6001\u7528\u4e8e\u5c55\u793a\n            this.setState(data)\n        })\n    }\n\n    componentWillUnmount(){\n        \/\/ \u7ec4\u4ef6\u9500\u6bc1\u65f6\uff0c\u53d6\u6d88\u8ba2\u9605\n        PubSub.unsubscribe(this.token)\n    }\n\n    render() {\n        const { isFirst, isLoading, err, list } = this.state\n        return (\n            <div className=\"row\">\n                {\n                    isFirst ? <h2>\u6b22\u8fce\u4f7f\u7528\u7528\u6237\u67e5\u8be2\u7cfb\u7edf\uff0c\u8bf7\u8f93\u5165\u5173\u952e\u5b57\u8fdb\u884c\u641c\u7d22<\/h2> :\n                        isLoading ? <h2>\u6b63\u5728\u52a0\u8f7d\uff0c\u8bf7\u7a0d\u5019...<\/h2> :\n                            err ? <h2>{err}<\/h2> :\n                                list.map(v => {\n                                    const { avatar_url, id, html_url, login } = v\n                                    return (\n                                        <div key={id} className=\"card\">\n                                            <a href={html_url} rel='noreferrer' target=\"_blank\">\n                                                <img alt='head_img' src={avatar_url} style={\n    \n    \n    { width: '100px' }} \/> <\/a> <p className=\"card-text\">{login}<\/p> <\/div> ) }) } <\/div> ) } } <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                    Fetch\u8bf7\u6c42<\/h2>\n
                                                                                                                                                                    \u6211\u4eec\u5e38\u7528\u7684 Ajax \u8bf7\u6c42\u5c31\u662f\u57fa\u4e8e\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684 XHR<\/strong>\uff08XMLHttpRequest\uff09\u5bf9\u8c61\u6765\u5b9e\u73b0\u7684<\/p>\n
                                                                                                                                                                    \u4e0e XHR \u5bf9\u5e94\u7684\u8fd8\u6709 Fetch\uff0cFetch \u8bf7\u6c42\u65b9\u5f0f\u4f7f\u7528\u4e86 Promise\uff0c\u8fd0\u7528\u4e86 \u201c\u5173\u6ce8\u5206\u79bb\u201d\uff08\u5148\u770b\u770b\u670d\u52a1\u5668\u901a\u4e0d\u901a\uff0c\u518d\u53d6\u6570\u636e\uff09\u7684\u8bbe\u8ba1\u601d\u60f3\uff0c\u4e14\u76f8\u6bd4 XHR \u66f4\u52a0\u7b80\u6d01<\/p>\n
                                                                                                                                                                    \u4f46\u662f Fetch \u517c\u5bb9\u6027\u4e0d\u9ad8<\/p>\n
                                                                                                                                                                    \n
                                                                                                                                                                    https:\/\/segmentfault.com\/a\/10652<\/p>\n<\/blockquote>\n
                                                                                                                                                                    React\u8def\u7531<\/h2>\n
                                                                                                                                                                    SPA\u5355\u9875\u9762\u5e94\u7528<\/h3>\n
                                                                                                                                                                      \n
                                                                                                                                                                    1. \u5355\u9875\u9762 Web \u5e94\u7528\uff1aSingle Page Web Application<\/li>\n
                                                                                                                                                                    2. \u6574\u4e2a\u5e94\u7528\u53ea\u6709\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\uff0c\u4f46\u662f\u5305\u542b\u4e86\u5f88\u591a\u7ec4\u4ef6<\/li>\n
                                                                                                                                                                    3. \u70b9\u51fb\u9875\u9762\u4e2d\u7684\u94fe\u63a5\u4e0d\u4f1a\u5237\u65b0\u6574\u4e2a\u9875\u9762\uff0c\u53ea\u4f1a\u505a\u9875\u9762\u7684\u5c40\u90e8\u66f4\u65b0<\/li>\n
                                                                                                                                                                    4. \u6570\u636e\u90fd\u9700\u8981\u901a\u8fc7 Ajax \u8bf7\u6c42\u83b7\u53d6\uff0c\u5e76\u5728\u524d\u7aef\u5f02\u6b65\u5c55\u73b0<\/li>\n<\/ol>\n
                                                                                                                                                                      \u4ec0\u4e48\u662f\u8def\u7531<\/h3>\n
                                                                                                                                                                      \u4e00\u4e2a\u8def\u7531\u5c31\u662f\u4e00\u4e2a\u6620\u5c04\u5173\u7cfb\uff08key - value\uff09<\/p>\n
                                                                                                                                                                      key \u4e3a\u8def\u5f84\uff0cvalue \u53ef\u80fd\u662f function \u6216 component<\/p>\n
                                                                                                                                                                      \u8def\u7531\u5206\u7c7b<\/h3>\n
                                                                                                                                                                      \u540e\u7aef\u8def\u7531<\/h4>\n
                                                                                                                                                                        \n
                                                                                                                                                                      1. \u540e\u7aef\u8def\u7531\u7684 value \u662f function\uff0c\u7528\u6765\u5904\u7406\u5ba2\u6237\u7aef\u63d0\u4ea4\u7684\u8bf7\u6c42<\/li>\n
                                                                                                                                                                      2. \u6ce8\u518c\u8def\u7531\uff1arouter.get(path, function(req, res))<\/li>\n
                                                                                                                                                                      3. \u5de5\u4f5c\u8fc7\u7a0b\uff1a\u5f53 node \u63a5\u6536\u5230\u4e00\u4e2a\u8bf7\u6c42\u65f6\uff0c\u6839\u636e\u8bf7\u6c42\u8def\u5f84\u627e\u5230\u5339\u914d\u7684\u8def\u7531\uff0c\u8c03\u7528\u8def\u7531\u4e2d\u7684\u51fd\u6570\u6765\u5904\u7406\u8bf7\u6c42\uff0c\u8fd4\u56de\u54cd\u5e94\u6570\u636e<\/li>\n<\/ol>\n
                                                                                                                                                                        \u524d\u7aef\u8def\u7531<\/h4>\n
                                                                                                                                                                          \n
                                                                                                                                                                        1. \u6d4f\u89c8\u5668\u7aef\u8def\u7531\u7684 value \u662f component\uff0c\u7528\u4e8e\u5c55\u793a\u9875\u9762\u5185\u5bb9<\/li>\n
                                                                                                                                                                        2. \u6ce8\u518c\u8def\u7531\uff1a<Route path=\"\/test\" component={Test}><\/code><\/li>\n
                                                                                                                                                                        3. \u5de5\u4f5c\u8fc7\u7a0b\uff1a\u5f53\u6d4f\u89c8\u5668\u7684 path \u53d8\u4e3a \/test<\/code> \u65f6\uff0c\u5f53\u524d\u8def\u7531\u7ec4\u4ef6\u5c31\u4f1a\u53d8\u4e3a Test \u7ec4\u4ef6<\/li>\n<\/ol>\n
                                                                                                                                                                          \u5de5\u4f5c\u539f\u7406<\/h5>\n
                                                                                                                                                                          \u901a\u8fc7\u6d4f\u89c8\u5668 BOM \u5bf9\u8c61\u4e2d\u7684 history<\/strong> \u5bf9\u8c61\u63a7\u5236\u6d4f\u89c8\u5668\u7684 path\uff0c\u6bcf\u5f53\u76d1\u542c\u5230 path \u7684\u53d8\u5316\u65f6\uff0c\u5c31\u6e32\u67d3\u5bf9\u5e94\u7684\u7ec4\u4ef6<\/p>\n
                                                                                                                                                                          history \u5bf9\u8c61\u7684\u4f7f\u7528\uff1a\uff08\u524d\u63d0\u662f\u8fd0\u884c\u5728\u4e00\u4e2a\u670d\u52a1\u4e0b\uff0c\u5373\u5fc5\u987b\u4ee5 IP:\u7aef\u53e3\u7684\u5f62\u5f0f\u8bbf\u95ee\uff09<\/p>\n
                                                                                                                                                                          <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span> <<\/span>html<\/span> lang<\/span>=<\/span>\"<\/span>en\"<\/span><\/span>><\/span><\/span> <<\/span>head<\/span>><\/span><\/span> <<\/span>title<\/span>><\/span><\/span>Document<\/<\/span>title<\/span>><\/span><\/span> <\/<\/span>head<\/span>><\/span><\/span> <<\/span>body<\/span>><\/span><\/span> <<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>http:\/\/www.baidu.com\"<\/span><\/span> onclick<\/span>=<\/span>\"<\/span>return<\/span> push<\/span>(<\/span>'\/test1'<\/span>)<\/span><\/span>\"<\/span><\/span><\/span>><\/span><\/span>push test1<\/<\/span>a<\/span>><\/span><\/span> <<\/span>a<\/span> onclick<\/span>=<\/span>\"<\/span>return<\/span> push<\/span>(<\/span>'\/test2'<\/span>)<\/span><\/span>\"<\/span><\/span><\/span>><\/span><\/span>push test2<\/<\/span>a<\/span>><\/span><\/span> <<\/span>a<\/span> onclick<\/span>=<\/span>\"<\/span>return<\/span> replace<\/span>(<\/span>'\/test3'<\/span>)<\/span><\/span>\"<\/span><\/span><\/span>><\/span><\/span>replace test3<\/<\/span>a<\/span>><\/span><\/span> <<\/span>a<\/span> onclick<\/span>=<\/span>\"<\/span>forward<\/span>(<\/span>)<\/span><\/span>\"<\/span><\/span><\/span>><\/span><\/span>\u524d\u8fdb<\/<\/span>a<\/span>><\/span><\/span> <<\/span>a<\/span> onclick<\/span>=<\/span>\"<\/span>back<\/span>(<\/span>)<\/span><\/span>\"<\/span><\/span><\/span>><\/span><\/span>\u540e\u9000<\/<\/span>a<\/span>><\/span><\/span> <!--\u4f5c\u6b64\u5b9e\u9a8c\u65f6\u5fc5\u987b\u5f15\u5165\u6b64\u6587\u4ef6--><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span> src<\/span>=<\/span>\"<\/span>https:\/\/cdn.bootcss.com\/history\/4.7.2\/history.js\"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span>><\/span><\/span> \/\/ \u65b9\u6cd5\u4e00\uff1a\u901a\u8fc7H5\u7684History\u5bf9\u8c61\u7684api\u6765\u521b\u5efahistory\u5bf9\u8c61<\/span> let<\/span> history =<\/span> History.<\/span>createBrowserHistory<\/span>(<\/span>)<\/span> \/\/ \u65b9\u6cd5\u4e8c\uff1a\u521b\u5efahash\u503chistory\u5bf9\u8c61<\/span> \/\/ let history = History.createHashHistory()<\/span> \/\/ push<\/span> function<\/span> push<\/span>(<\/span>path<\/span>)<\/span> { \n     <\/span> history.<\/span>push<\/span>(<\/span>path)<\/span> \/\/ \u963b\u6b62\u5143\u7d20\u9ed8\u8ba4\u884c\u4e3a<\/span> return<\/span> false<\/span> }<\/span> \/\/ \u66ff\u6362<\/span> function<\/span> replace<\/span>(<\/span>path<\/span>)<\/span> { \n     <\/span> history.<\/span>replace<\/span>(<\/span>path)<\/span> }<\/span> \/\/ \u524d\u8fdb<\/span> function<\/span> back<\/span>(<\/span>)<\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>'back'<\/span>)<\/span>;<\/span> history.<\/span>goBack<\/span>(<\/span>)<\/span> }<\/span> \/\/ \u540e\u9000<\/span> function<\/span> forward<\/span>(<\/span>)<\/span> { \n     <\/span> history.<\/span>goForward<\/span>(<\/span>)<\/span> }<\/span> \/\/ \u76d1\u542c\u8def\u5f84\u53d8\u5316<\/span> history.<\/span>listen<\/span>(<\/span>(<\/span>location<\/span>)<\/span> =><\/span> { \n     <\/span> console.<\/span>log<\/span>(<\/span>'\u8bf7\u6c42\u8def\u7531\u8def\u5f84\u53d8\u5316\u4e86'<\/span>,<\/span> location)<\/span> \/\/ \u6e32\u67d3\u7ec4\u4ef6<\/span> \/\/ ...<\/span> }<\/span>)<\/span> <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span> <\/<\/span>body<\/span>><\/span><\/span> <\/<\/span>html<\/span>><\/span><\/span> <\/code><\/pre>\n
                                                                                                                                                                          \u6d4f\u89c8\u5668\u5386\u53f2\u8bb0\u5f55\u662f\u4e00\u4e2a\u6808\u7684\u7ed3\u6784\uff1a<\/p>\n
                                                                                                                                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                            \n
                                                                                                                                                                          • \u6211\u4eec\u5f53\u524d\u770b\u5230\u7684\u9875\u9762\u80af\u5b9a\u662f\u6808\u9876\u7684\u8bb0\u5f55<\/li>\n
                                                                                                                                                                          • \u8c03\u7528 push \u65b9\u6cd5\u65f6\uff0c\u4f1a\u5411\u6808\u9876\u63a8\u5165\u4e00\u4e2a\u8bb0\u5f55<\/li>\n
                                                                                                                                                                          • \u8c03\u7528 back \u65b9\u6cd5\u65f6\uff0c\u4f1a\u628a\u5f53\u524d\u6808\u9876\u8bb0\u5f55\u79fb\u51fa<\/li>\n
                                                                                                                                                                          • \u8c03\u7528 goForward \u65b9\u6cd5\u65f6\uff0c\u4f1a\u628a\u79fb\u51fa\u7684\u8bb0\u5f55\u79fb\u4e00\u4e2a\u56de\u6765<\/li>\n
                                                                                                                                                                          • \u8c03\u7528 replace \u65b9\u6cd5\u65f6\uff0c\u4f1a\u628a\u5f53\u524d\u6808\u9876\u7684\u8bb0\u5f55\u66ff\u6362\u6210\u65b0\u7684\u8bb0\u5f55\uff0c\u539f\u6765\u7684\u6808\u9876\u8bb0\u5f55\u76f4\u63a5\u4e22\u6389\u4e86<\/li>\n<\/ul>\n
                                                                                                                                                                            react-router-dom<\/h3>\n
                                                                                                                                                                            react-router-dom \u662f React \u7684\u4e00\u4e2a\u63d2\u4ef6\u5e93\uff0c\u4e13\u95e8\u7528\u6765\u5b9e\u73b0\u4e00\u4e2a\u5355\u9875\u9762 WEB<\/strong> \u5e94\u7528\uff08\u8fd8\u6709\u5176\u4ed6\u8def\u7531\u7248\u672c\uff0c\u53ef\u7528\u4e8e\u539f\u751f\u5e94\u7528\uff09<\/p>\n
                                                                                                                                                                            \u6b64\u5904\u8bb2\u89e3\u7684\u662f react-router-dom@5 \u7248\u672c\uff0c\u5b89\u88c5\uff1anpm i react-router-dom@5<\/p>\n
                                                                                                                                                                            \u6848\u4f8b\u5f15\u5165<\/h4>\n
                                                                                                                                                                            \u7528\u8def\u7531\u5b9e\u73b0\uff1a\u901a\u8fc7\u70b9\u51fb\u5de6\u4fa7\u5bfc\u822a\uff0c\u5207\u6362\u53f3\u4fa7\u5c55\u793a\u7684\u7ec4\u4ef6<\/p>\n
                                                                                                                                                                            \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                              \n
                                                                                                                                                                            • \n
                                                                                                                                                                              index.js<\/p>\n
                                                                                                                                                                              import React from \"react\"; import ReactDOM from \"react-dom\/client\"; import App from \".\/App\"; import { BrowserRouter } from \"react-router-dom\"; const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <BrowserRouter> <App \/> <\/BrowserRouter> ) <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                            • \n
                                                                                                                                                                              App.js<\/p>\n
                                                                                                                                                                              import React, { Component } from \"react\";\nimport { Link, Route } from \"react-router-dom\";\nimport Home from \".\/component\/Home\";\nimport About from \".\/component\/About\";\nexport default class App extends Component {\n    render() {\n        return (\n            <div>\n                <div className=\"row\">\n                    <div className=\"col-xs-offset-2 col-xs-8\">\n                        <div className=\"page-header\"><h2>React Router Demo<\/h2><\/div>\n                    <\/div>\n                <\/div>\n                <div className=\"row\">\n                    <div className=\"col-xs-2 col-xs-offset-2\">\n                        <div className=\"list-group\">\n                            {\/* \u539f\u751fhtml\u4e2d\uff0c\u7528<a>\u8df3\u8f6c\u4e0d\u540c\u7684\u9875\u9762 *\/}\n                            {\/* <a className=\"list-group-item\" href=\".\/about.html\">About<\/a>\n\t\t\t\t\t\t\t<a className=\"list-group-item active\" href=\".\/home.html\">Home<\/a> *\/}\n\n                            {\/* \u5728React\u4e2d\u7528\u8def\u7531\u94fe\u63a5\u5b9e\u73b0\u5207\u6362\u7ec4\u4ef6 *\/}\n                            {\/* \u6d4f\u89c8\u5668\u80af\u5b9a\u4e0d\u8ba4\u8bc6Link\u6807\u7b7e\uff0c\u6240\u4ee5React\u4f1a\u5c06\u5176\u8f6c\u6210\u666e\u901aa\u6807\u7b7e\uff0c\u901a\u8fc7\u76d1\u542c\u8def\u5f84\u6765\u963b\u6b62\u5176\u9ed8\u8ba4\u884c\u4e3a *\/}\n                            <Link className=\"list-group-item\" to=\"\/about\">About<\/Link>\n                            {\/* \u6807\u7b7e\u4f53\u5185\u5bb9\u4e5f\u53ef\u7528children\u5c5e\u6027\u6765\u6307\u5b9a *\/}\n                            <Link className=\"list-group-item\" to=\"\/Home\" children=\"Home\" \/>\n                        <\/div>\n                    <\/div>\n                    <div className=\"col-xs-6\">\n                        <div className=\"panel\">\n                            <div className=\"panel-body\">\n                                {\/* \u6ce8\u518c\u8def\u7531 *\/}\n                                <Route path=\"\/about\" component={About}><\/Route>\n                                {\/* \u8def\u75316.x\u7248\u672c\u4ee5\u540e\u5199\u6cd5\uff1a\u5c06component={Home}\u4fee\u6539\u4e3a\uff1aelement={<Home\/>} *\/}\n                                <Route path=\"\/home\" component={Home}><\/Route>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        )\n    }\n}\n<\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                              \u77e5\u8bc6\u70b9\u603b\u7ed3\uff1a<\/p>\n
                                                                                                                                                                                \n
                                                                                                                                                                              1. React \u4e2d\u7684 WEB \u8def\u7531\u5f15\u5165\u7684\u662f react-router-dom<\/li>\n
                                                                                                                                                                              2. <Link><\/code> \u6807\u7b7e\u7528\u4e8e\u7f16\u5199\u8def\u7531\u94fe\u63a5\n
                                                                                                                                                                                  \n
                                                                                                                                                                                • to<\/code> \u5c5e\u6027\u503c\u4e3a\u8981\u8df3\u8f6c\u7684 path \u8def\u5f84<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                • <Route><\/code> \u6807\u7b7e\u7528\u4e8e\u6ce8\u518c\u8def\u7531\uff0c\u5373\u5c55\u793a\u7ec4\u4ef6\n
                                                                                                                                                                                    \n
                                                                                                                                                                                  • path<\/code> \u5c5e\u6027\u503c\u4e3a\u8981\u76d1\u542c\u7684 path \u8def\u5f84<\/li>\n
                                                                                                                                                                                  • component<\/code> \u5c5e\u6027\u503c\u4e3a\u8981\u5c55\u793a\u7684\u7ec4\u4ef6<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                  • \u6574\u4e2a\u5e94\u7528\u53ea\u80fd\u6709\u4e00\u4e2a\u8def\u7531\u5668\uff0c\u5373\u53ea\u80fd\u6709\u4e00\u4e2a <BrowserRouter><\/code> \u6216 <HashRouter><\/code> \u6807\u7b7e\uff0c\u6240\u6709\u7684 <Link><\/code> \u548c <Route><\/code> \u6807\u7b7e\u90fd\u8981\u5199\u5728\u8fd9\u4e2a\u6807\u7b7e\u91cc\uff0c\u6240\u4ee5\u6211\u4eec\u76f4\u63a5\u628a\u8fd9\u4e2a\u6807\u7b7e\u5199\u5230 <App \/><\/code> \u5916\u9762<\/li>\n<\/ol>\n
                                                                                                                                                                                    \u8def\u7531\u7ec4\u4ef6\u548c\u4e00\u822c\u7ec4\u4ef6\u7684\u533a\u522b<\/h4>\n
                                                                                                                                                                                      \n
                                                                                                                                                                                    1. \n
                                                                                                                                                                                      \u4f7f\u7528\u65f6\u7684\u5199\u6cd5\u4e0d\u540c<\/p>\n
                                                                                                                                                                                        \n
                                                                                                                                                                                      • \u4e00\u822c\u7ec4\u4ef6\uff1a<Demo \/><\/code><\/li>\n
                                                                                                                                                                                      • \u8def\u7531\u7ec4\u4ef6\uff1a<Route path=\"\/demo\" component={Demo} \/><\/code><\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                      • \n
                                                                                                                                                                                        \u5b58\u653e\u4f4d\u7f6e\u4e0d\u540c\uff1a<\/p>\n
                                                                                                                                                                                          \n
                                                                                                                                                                                        • \u4e00\u822c\u7ec4\u4ef6\uff1acomponents \u76ee\u5f55\u4e0b<\/li>\n
                                                                                                                                                                                        • \u8def\u7531\u7ec4\u4ef6\uff1apages \u76ee\u5f55\u4e0b<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                        • \n
                                                                                                                                                                                          \u63a5\u6536\u5230\u7684 props \u4e0d\u540c<\/p>\n
                                                                                                                                                                                            \n
                                                                                                                                                                                          • \n
                                                                                                                                                                                            \u4e00\u822c\u7ec4\u4ef6\uff1a\u5199\u7ec4\u4ef6\u6807\u7b7e\u65f6\u4f20\u9012\u4e86\u4ec0\u4e48\uff0c\u5c31\u80fd\u6536\u5230\u4ec0\u4e48<\/p>\n<\/li>\n
                                                                                                                                                                                          • \n
                                                                                                                                                                                            \u8def\u7531\u7ec4\u4ef6\uff1a\u9ed8\u8ba4\u63a5\u6536\u5230\u4e09\u4e2a\u56fa\u5b9a\u7684\u5c5e\u6027\uff1a<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                            \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                            BrowserRouter\u548cHashRouter\u7684\u533a\u522b<\/h4>\n
                                                                                                                                                                                              \n
                                                                                                                                                                                            1. \u5e95\u5c42\u539f\u7406\u4e0d\u4e00\u6837\n
                                                                                                                                                                                                \n
                                                                                                                                                                                              • BrowserRouter \u662f\u4f7f\u7528 H5 \u7684 history\uff08React \u4e2d\u7684 this.props.history \u662f\u5bf9\u5176\u4e8c\u6b21\u5c01\u88c5\u8fc7\u7684\uff0c\u4e0d\u8981\u6df7\u6dc6\uff09 \u5b9e\u73b0\u7684<\/li>\n
                                                                                                                                                                                              • HashRouter \u4f7f\u7528\u7684\u662f URL \u7684\u54c8\u5e0c\u503c\u5b9e\u73b0\u7684<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                              • path \u8868\u73b0\u5f62\u5f0f\u4e0d\u4e00\u6837\n
                                                                                                                                                                                                  \n
                                                                                                                                                                                                • BrowserRouter \u7684\u8def\u5f84\u4e2d\u6ca1\u6709 #<\/code><\/li>\n
                                                                                                                                                                                                • HashRouter \u8def\u5f84\u4e2d\u6709 #<\/code>\uff0c\u5982 localhost:3000\/#\/demo<\/code><\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                • \u5237\u65b0\u540e\u5bf9\u8def\u7531 state \u53c2\u6570\u7684\u5f71\u54cd\u4e0d\u4e00\u6837\n
                                                                                                                                                                                                    \n
                                                                                                                                                                                                  • BrowserRouter \u6ca1\u6709\u4efb\u4f55\u5f71\u54cd\uff0c\u56e0\u4e3a\u8def\u7531 state \u53c2\u6570\u4fdd\u5b58\u5728 history \u5bf9\u8c61\u4e2d<\/li>\n
                                                                                                                                                                                                  • HashRouter \u5237\u65b0\u540e\u4f1a\u5bfc\u81f4\u8def\u7531 state \u53c2\u6570\u7684\u4e22\u5931<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                  • HashRouter \u53ef\u4ee5\u7528\u6765\u89e3\u51b3\u4e00\u4e9b\u8def\u5f84\u9519\u8bef\u76f8\u5173\u7684\u95ee\u9898\uff08\u5982\u672c\u7ae0\u6700\u540e\u4e00\u8282\u7684\u8d44\u6e90\u4e22\u5931\u95ee\u9898\uff09\uff0c\u4e14\u5176\u517c\u5bb9\u6027\u66f4\u5f3a<\/li>\n<\/ol>\n
                                                                                                                                                                                                    NavLink<\/h4>\n
                                                                                                                                                                                                    NavLink \u662f Link \u7684\u5347\u7ea7\u7248\uff0c\u53ef\u4ee5\u6307\u5b9a\u4e00\u4e9b\u5c5e\u6027\uff0c\u5f53\u8be5\u94fe\u63a5\u88ab\u9009\u4e2d\u65f6\u4ea7\u751f\u7279\u5b9a\u6548\u679c<\/p>\n
                                                                                                                                                                                                    \/\/ \u5f53\u8be5\u94fe\u63a5\u88ab\u9009\u4e2d\u65f6\uff0c\u6dfb\u52a0demo\u7c7b\u540d <NavLink activeClassName=\"demo\" className=\"list-group-item\" {...this.props} ><\/NavLink> <\/code><\/pre>\n
                                                                                                                                                                                                    \u5e08\u5085\u9886\u8fdb\u95e8\uff0c\u4fee\u884c\u5728\u4e2a\u4eba\uff0c\u5176\u4ed6\u5c5e\u6027\u8bf7\u53c2\u8003\u5b98\u65b9\u6587\u6863<\/p>\n
                                                                                                                                                                                                    Switch<\/h4>\n
                                                                                                                                                                                                    \n
                                                                                                                                                                                                    Switch \u6807\u7b7e\u5728\u8def\u7531 6.x \u7248\u672c\u88ab\u79fb\u9664<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                    \u5f53\u5207\u6362\u8def\u5f84\u65f6\uff0cReact \u4f1a\u4e00\u4e2a\u8def\u7531\u4e00\u4e2a\u8def\u7531\u7684\u53bb\u67e5\u627e\u5f53\u524d\u8def\u5f84\u6620\u5c04\u7684\u54ea\u4e2a\u7ec4\u4ef6\uff0c\u5f53\u4e00\u4e2a\u8def\u5f84\u6620\u5c04\u4e86\u591a\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u5219\u591a\u4e2a\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u5c55\u793a\uff1a<\/p>\n
                                                                                                                                                                                                    \/\/ \u5f53\u8df3\u8f6c\u81f3'\/about'\u8def\u5f84\u65f6\uff0cAbout\u548cHome\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u6e32\u67d3 <Route path=\"\/about\" component={About}><\/Route> <Route path=\"\/about\" component={Home}><\/Route> <\/code><\/pre>\n
                                                                                                                                                                                                    \u6b64\u65f6\u6211\u4eec\u53ef\u4ee5\u501f\u52a9 <Switch><\/code> \u6807\u7b7e\uff0c\u7528\u8be5\u6807\u7b7e\u5305\u88f9\u8d77\u6765\u7684\u8def\u7531\uff0c\u53ea\u4f1a\u627e\u5230\u7b2c\u4e00\u4e2a\u88ab\u6620\u5c04\u7684\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u63d0\u5347\u6548\u7387\uff0c\u4e5f\u80fd\u9632\u6b62\u591a\u4e2a\u7ec4\u4ef6\u88ab\u6e32\u67d3\uff1a<\/p>\n
                                                                                                                                                                                                    <Switch> \/\/ \u5f53\u8df3\u8f6c\u81f3'\/about'\u8def\u5f84\u65f6\uff0c\u53ea\u4f1a\u6e32\u67d3About\u7ec4\u4ef6 <Route path=\"\/about\" component={About}><\/Route> <Route path=\"\/about\" component={Home}><\/Route> <\/Switch> <\/code><\/pre>\n
                                                                                                                                                                                                    Redirect<\/h4>\n
                                                                                                                                                                                                    \u5f53\u6240\u6709\u8def\u7531\u90fd\u65e0\u6cd5\u5339\u914d\u65f6\uff0c\u5219\u8df3\u8f6c\u5230 <Redirect><\/code> \u6307\u5b9a\u7684\u8def\u7531<\/p>\n
                                                                                                                                                                                                    <NavLink className=\"list-group-item\" to=\"\/about\">about<\/NavLink> {\/* \u867d\u7136\u5728\u70b9\u51fb\u6b64\u94fe\u63a5\u65f6\uff0c\u6b64\u5904'\/def'\u8def\u5f84\u901a\u8fc7Redirect\u6807\u7b7e\u95f4\u63a5\u5339\u914d\u5230\u4e86Home\u7ec4\u4ef6\uff0c\u4f46\u662f\u8be5\u94fe\u63a5\u5e76\u4e0d\u4f1a\u5904\u4e8eactive\u72b6\u6001 *\/} <NavLink className=\"list-group-item\" to=\"\/def\">home<\/NavLink> <Switch> <Route path=\"\/about\" component={About}><\/Route> <Route path=\"\/home\" component={Home}><\/Route> {\/* \u5982\u679c\u4e0a\u9762\u7684\u7684\u8def\u5f84\u90fd\u6ca1\u6709\u5339\u914d\u5230\uff0c\u5219\u81ea\u52a8\u8df3\u8f6c\u5230\/home\u8def\u5f84 *\/} <Redirect to=\"\/home\"><\/Redirect> <\/Switch> <\/code><\/pre>\n
                                                                                                                                                                                                    Redirect \u8fd8\u53ef\u4ee5\u5b9e\u73b0\u9ed8\u8ba4\u8def\u7531\uff1a<\/p>\n
                                                                                                                                                                                                      \n
                                                                                                                                                                                                    • \n
                                                                                                                                                                                                      Home.jsx<\/p>\n
                                                                                                                                                                                                      <Switch> <Route path=\"\/home\/news\" component={News}><\/Route> <Route path=\"\/home\/message\" component={Message}><\/Route> {\/* \u5728\u8df3\u8f6c\u81f3'\/home'\u8def\u5f84\u540e\uff0c\u4f1a\u81ea\u52a8\u8df3\u8f6c\u81f3'\/home\/news'\uff0c\u56e0\u4e3aHome\u7ec4\u4ef6\u5237\u65b0\u65f6\uff0c\u4e0a\u9762\u7684\u4e24\u4e2a\u8def\u7531\u4f1a\u88ab\u6ce8\u518c\uff0c\u7136\u540e\u4f1a\u4f9d\u6b21\u5339\u914d\uff0c\u5339\u914d\u4e0d\u5230\u5219\u89e6\u53d1Redirect *\/} <Redirect to=\"\/home\/news\"><\/Redirect> <\/Switch> <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                      replace\u6a21\u5f0f<\/h4>\n
                                                                                                                                                                                                      \u8def\u7531\u94fe\u63a5\u9ed8\u8ba4\u4e3a push \u6a21\u5f0f\uff0c\u6dfb\u52a0 replace \u5173\u952e\u5b57\u53ef\u5c06\u5176\u8bbe\u7f6e\u4e3a replace \u6a21\u5f0f\uff08push \u548c replace \u7684\u533a\u522b\u8bf7\u89c1\u3010\u524d\u7aef\u8def\u7531 -> \u5de5\u4f5c\u539f\u7406\u3011\uff09<\/p>\n
                                                                                                                                                                                                      \/\/ \u6dfb\u52a0replace\u5173\u952e\u5b57 <Link replace to=\"\/home\/message\/item\">Item<\/Link> <\/code><\/pre>\n
                                                                                                                                                                                                      \u70b9\u51fb\u6b64\u94fe\u63a5\u540e\uff0c\u4e0a\u4e00\u4e2a\u94fe\u63a5\u7684\u5386\u53f2\u8bb0\u5f55\u5c06\u6d88\u5931\uff0c\u6b64\u65f6\u6d4f\u89c8\u5668\u56de\u9000\u5c06\u76f4\u63a5\u56de\u9000\u5230\u4e0a\u4e0a\u4e2a\u94fe\u63a5<\/p>\n
                                                                                                                                                                                                      \u6a21\u7cca\u5339\u914d\u4e0e\u4e25\u683c\u5339\u914d<\/h4>\n
                                                                                                                                                                                                      \u6a21\u7cca\u5339\u914d\uff1a\u53ea\u8981 <Route><\/code> \u7684\u8def\u5f84\u5904\u5728\u8def\u7531\u94fe\u63a5\u8def\u5f84\u7684\u5f00\u5934\uff0c\u5c31\u53ef\u4ee5\u5339\u914d\u5230<\/p>\n
                                                                                                                                                                                                      \u4e25\u683c\u5339\u914d\uff1a<Route><\/code> \u7684\u8def\u5f84\u5fc5\u987b\u548c\u8def\u7531\u94fe\u63a5\u7684\u8def\u5f84\u5b8c\u5168\u4e00\u81f4\uff0c\u624d\u80fd\u5339\u914d\u5230<\/p>\n
                                                                                                                                                                                                        \n
                                                                                                                                                                                                      • \u4f7f\u7528 extact<\/code> \u5173\u952e\u5b57\uff0c\u6216 exact={true}<\/code><\/li>\n<\/ul>\n
                                                                                                                                                                                                        \u4f8b\u5b50\uff1a<\/p>\n
                                                                                                                                                                                                        \/\/ \u6a21\u7cca\u5339\u914d1 <NavLink className=\"list-group-item\" to=\"\/home\/a\">home<\/NavLink> <Route path=\"\/home\" component={Home}><\/Route> \/\/ \u53ef\u4ee5\u5339\u914d\u5230 \/\/ \u6a21\u7cca\u5339\u914d2 <NavLink className=\"list-group-item\" to=\"\/home\/a\/b\">home<\/NavLink> <Route path=\"\/home\/a\" component={Home}><\/Route> \/\/ \u53ef\u4ee5\u5339\u914d\u5230 \/\/ \u6a21\u7cca\u5339\u914d3 <NavLink className=\"list-group-item\" to=\"a\/home\">home<\/NavLink> <Route path=\"\/home\" component={Home}><\/Route> \/\/ \u4e0d\u80fd\u5339\u914d\u5230\uff0c\u8def\u5f84\u5fc5\u987b\u5904\u5728\u8def\u7531\u94fe\u63a5\u8def\u5f84\u7684\u5f00\u5934 \/\/ \u4e25\u683c\u5339\u914d1 <NavLink className=\"list-group-item\" to=\"\/home\/a\">home<\/NavLink> <Route path=\"\/home\" component={Home}><\/Route> \/\/ \u4e0d\u80fd\u5339\u914d\u5230\uff0c\u8def\u5f84\u4e0d\u4e00\u81f4 \/\/ \u4e25\u683c\u5339\u914d2 <NavLink className=\"list-group-item\" to=\"\/home\">home<\/NavLink> <Route path=\"\/home\" component={Home}><\/Route> \/\/ \u53ef\u4ee5\u5339\u914d\u5230 <\/code><\/pre>\n
                                                                                                                                                                                                        \n
                                                                                                                                                                                                        exact \u5173\u952e\u5b57\u8981\u8c28\u614e\u4f7f\u7528\uff0c\u53ef\u80fd\u5bfc\u81f4\u4e8c\u7ea7\u8def\u7531\u65e0\u6cd5\u6b63\u5e38\u5c55\u793a<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                        \u5d4c\u5957\u8def\u7531<\/h4>\n
                                                                                                                                                                                                        \u6848\u4f8b\uff1a\u5148\u70b9\u51fb\u5de6\u4fa7 home \u5bfc\u822a\uff0c\u53f3\u4fa7\u4f1a\u51fa\u73b0 news \u548c message \u5bfc\u822a\uff0c\u518d\u70b9\u51fb news\uff0c\u4e0b\u65b9\u51fa\u73b0 news \u76f8\u5173\u7684\u5185\u5bb9<\/p>\n
                                                                                                                                                                                                        \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                          \n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          App.js<\/p>\n
                                                                                                                                                                                                          <NavLink to=\"\/about\">about<\/NavLink> <NavLink to=\"\/home\">home<\/NavLink> <Switch> <Route path=\"\/about\" component={About}><\/Route> <Route path=\"\/home\" component={Home}><\/Route> <\/Switch> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          Home.jsx<\/p>\n
                                                                                                                                                                                                          <NavLink to=\"\/home\/news\">news<\/NavLink> <NavLink to=\"\/home\/message\">message<\/NavLink> <Route path=\"\/home\/news\" component={News}><\/Route> <Route path=\"\/home\/message\" component={Message}><\/Route> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          News.jsx<\/p>\n
                                                                                                                                                                                                          <ul> <li>news001<\/li> <li>news002<\/li> <li>news003<\/li> <\/ul> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                        • \n
                                                                                                                                                                                                          Message.jsx<\/p>\n
                                                                                                                                                                                                          <ul> <li>message01<\/li> <li>message02<\/li> <li>message03<\/li> <\/ul> <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                          \u5d4c\u5957\u8def\u7531\u5339\u914d\u903b\u8f91\uff1a<\/p>\n
                                                                                                                                                                                                            \n
                                                                                                                                                                                                          1. \u70b9\u51fb\u5de6\u4fa7 home \u83dc\u5355\u65f6\uff0c\u8def\u7531\u8df3\u8f6c\u5230 \/home\uff0c\u6e32\u67d3 Home \u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                          2. \u70b9\u51fb\u53f3\u4fa7 news \u83dc\u5355\u65f6\uff0c\u8def\u7531\u8df3\u8f6c\u5230 \/home\/news\uff0c\u56e0\u4e3a\u5148\u6ce8\u518c\u7684 about \u548c home \u8def\u7531\uff0c\u6240\u4ee5\u5148\u5bf9\u8fd9\u4e24\u4e2a\u8fdb\u884c\u5339\u914d<\/li>\n
                                                                                                                                                                                                          3. \u901a\u8fc7\u6a21\u7cca\u5339\u914d\uff0c\u5339\u914d\u5230\u4e86 home\uff08\u5982\u679c\u6dfb\u52a0 exact \u5173\u952e\u5b57\u5219\u65e0\u6cd5\u5339\u914d\uff09\uff0c\u6240\u4ee5\u6e32\u67d3 Home \u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                          4. Home \u7ec4\u4ef6\u5728\u6302\u8f7d\u65f6\u53c8\u6ce8\u518c\u4e86 \/home\/news \u548c \/home\/message \u8def\u7531\uff0c\u56e0\u6b64\u53c8\u5339\u914d\u5230\u4e86 \/home\/news\uff0c\u6545\u5c55\u793a News \u7ec4\u4ef6<\/li>\n<\/ol>\n
                                                                                                                                                                                                            \u77e5\u8bc6\u70b9\uff1a<\/p>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                            1. \u6ce8\u518c\u5b50\u8def\u7531\u65f6\uff0c\u8981\u5728\u524d\u9762\u5199\u4e0a\u7236\u8def\u7531\u7684 path \u503c<\/li>\n
                                                                                                                                                                                                            2. \u54ea\u4e2a\u8def\u7531\u6240\u5728\u7684\u7ec4\u4ef6\u5148\u88ab\u6302\u8f7d\uff0c\u5219\u5c31\u5148\u6ce8\u518c\u54ea\u4e2a\u8def\u7531<\/li>\n
                                                                                                                                                                                                            3. \u6bcf\u5f53\u8def\u7531\u5207\u6362\u65f6\uff0c\u90fd\u4f1a\u5148\u4ece\u7b2c\u4e00\u4e2a\u6ce8\u518c\u7684\u8def\u7531\u5f00\u59cb\u5339\u914d<\/li>\n
                                                                                                                                                                                                            4. \u5982\u679c\u7ed9\u8def\u7531\u6dfb\u52a0\u4e86 exact \u5173\u952e\u5b57\uff0c\u5219\u65e0\u6cd5\u4f7f\u7528\u5d4c\u5957\u8def\u7531<\/li>\n<\/ol>\n
                                                                                                                                                                                                              \u5411\u8def\u7531\u7ec4\u4ef6\u4f20\u9012\u53c2\u6570<\/h4>\n
                                                                                                                                                                                                              \u4f20\u9012params\u53c2\u6570<\/h5>\n
                                                                                                                                                                                                              \/\/ \u4f20\u9012\u53c2\u6570 <Link to=\"\/home\/message\/item\/zhangsan\/18\">Item<\/Link> \/\/ \u63a5\u6536\u53c2\u6570\uff0c\u547d\u540d\u4e3aname\u548cage <Route path=\"\/home\/message\/item\/:name\/:age\" component={Item}><\/Route> <\/code><\/pre>\n
                                                                                                                                                                                                              \u63a5\u6536\u5230\u53c2\u6570\u4f1a\u4fdd\u5b58\u5230\u8def\u7531\u7ec4\u4ef6\u7684 props \u4e2d\u7684 match \u5bf9\u8c61\u4e2d\uff1a<\/p>\n
                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                              \u5237\u65b0\u9875\u9762\u6570\u636e\u4e5f\u4e0d\u4f1a\u4e22\u5931\uff0c\u56e0\u4e3a\u53c2\u6570\u4fdd\u5b58\u5728 url \u91cc<\/p>\n
                                                                                                                                                                                                              \u6b64\u79cd\u8def\u7531\u4f20\u53c2\u65b9\u5f0f\u6700\u5e38\u7528<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                              \u4f20\u9012search\u53c2\u6570<\/h5>\n
                                                                                                                                                                                                              \/\/ \u4f20\u9012search\u53c2\u6570\uff0c\u5728\u8def\u5f84\u540e\u8ddf -> ?key=value <Link to=\"\/home\/message\/item?name=zhangsan&age=18\">Item<\/Link> \/\/ \u6ce8\u518c\u8def\u7531\u65e0\u9700\u4fee\u6539 <Route path=\"\/home\/message\/item\" component={Item}><\/Route> <\/code><\/pre>\n
                                                                                                                                                                                                              search \u53c2\u6570\u4e5f\u4f1a\u4f20\u9012\u5230\u8def\u7531\u7ec4\u4ef6\u7684 props \u5bf9\u8c61\u4e2d\uff1a<\/p>\n
                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                              \u4e3a\u4e86\u65b9\u4fbf\u4f7f\u7528\uff0c\u6211\u4eec\u9700\u8981\u628a ?key=value<\/code> \u7684\u5b57\u7b26\u4e32\u5f62\u5f0f\u8f6c\u4e3a\u4e00\u4e2a\u5bf9\u8c61<\/p>\n
                                                                                                                                                                                                              \u6b64\u65f6\u53ef\u4ee5\u501f\u52a9 qs<\/code> \u5e93\uff1a<\/p>\n
                                                                                                                                                                                                              import qs from 'qs' let search = this.props.location.search \/\/ ?name=zhangsan&age=18 \/\/ \u5728\u89e3\u6790\u524d\u9700\u8981\u53bb\u6389\u524d\u9762\u7684\u95ee\u53f7 qs.parse(search.slice(1)) \/\/ {name: zhangsan, age: 18} \/\/ \u4e5f\u53ef\u4ee5\u5c06\u5bf9\u8c61\u8f6c\u6362\u4e3a?name=key\u7684\u5f62\u5f0f\uff1a qs.stringfy(obj) <\/code><\/pre>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                              \u5237\u65b0\u9875\u9762\u6570\u636e\u4e5f\u4e0d\u4f1a\u4e22\u5931\uff0c\u56e0\u4e3a\u53c2\u6570\u4fdd\u5b58\u5728 url \u91cc<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                              \u4f20\u9012state\u53c2\u6570<\/h5>\n
                                                                                                                                                                                                              \u6ce8\u610f\uff1a\u4e0d\u8981\u548c\u72b6\u6001 state \u641e\u6df7\u4e86<\/p>\n
                                                                                                                                                                                                              \/\/ \u4f20\u9012stete\u53c2\u6570\u65f6\uff0cto\u8981\u4f7f\u7528\u5bf9\u8c61\u5f62\u5f0f\uff0c\u5c06\u539f\u6765\u7684path\u8def\u5f84\u5199\u5230pathname\u5c5e\u6027\u4e2d\uff0c\u8981\u4f20\u9012\u7684\u53c2\u6570\u5199\u5230state\u5bf9\u8c61\u4e2d <Link to={ \n  { pathname: \"\/home\/message\/item\", state: { name: 'zhangsan', age: 18 } }}>Item<\/Link> \/\/ \u6ce8\u518c\u8def\u7531\u4e0d\u9700\u8981\u6539 <Route path=\"\/home\/message\/item\" component={Item}><\/Route> <\/code><\/pre>\n
                                                                                                                                                                                                              \u4f20\u9012\u7684\u53c2\u6570\u4f1a\u4fdd\u5b58\u5230\u8def\u7531\u7ec4\u4ef6\u7684 props \u5bf9\u8c61\u4e2d\uff1a<\/p>\n
                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                              \u5237\u65b0\u9875\u9762\u6570\u636e\u4e5f\u4e0d\u4f1a\u4e22\u5931\uff0c\u53ef\u4ee5\u5982\u679c\u628a\u6d4f\u89c8\u5668\u7f13\u5b58\u5168\u90e8\u6e05\u7a7a\u540e\u518d\u5237\u65b0\u5c31\u4f1a\u4e22\u5931\u4e86<\/p>\n
                                                                                                                                                                                                              \u56e0\u6b64\u5728\u4f7f\u7528 state \u53c2\u6570\u65f6\u6700\u597d\u52a0\u4e2a\u7a7a\u5224\u65ad<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                              \u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<\/h4>\n
                                                                                                                                                                                                              \u6211\u4eec\u4e4b\u524d\u8bb2\u7684\u90fd\u662f\u901a\u8fc7\u70b9\u51fb\u8def\u7531\u94fe\u63a5\u548c\u6d4f\u89c8\u5668\u7684\u524d\u8fdb\u540e\u9000\u6765\u5207\u6362\u8def\u7531\u7684<\/p>\n
                                                                                                                                                                                                              \u4e0b\u9762\u6211\u4eec\u6765\u8bf4\u8bf4\u5982\u4f55\u901a\u8fc7\u4ee3\u7801\u6765\u5b9e\u73b0\u8def\u7531\u8df3\u8f6c<\/p>\n
                                                                                                                                                                                                              \u9700\u8981\u501f\u52a9\u4e8e\u8def\u7531\u7ec4\u4ef6\u7684 props \u4e2d\u7684 history \u5bf9\u8c61\uff0c\u5b83\u6709\u5982\u4e0b\u51e0\u4e2a\u65b9\u6cd5\uff1a<\/p>\n
                                                                                                                                                                                                                \n
                                                                                                                                                                                                              • go(n)<\/code>\uff1a\u524d\u8fdb\u6216\u540e\u9000 n \u4e2a\u8bb0\u5f55<\/li>\n
                                                                                                                                                                                                              • goBack()<\/code>\uff1a\u540e\u9000 1 \u4e2a\u8bb0\u5f55<\/li>\n
                                                                                                                                                                                                              • goForward()<\/code>\uff1a\u524d\u8fdb 1 \u4e2a\u8bb0\u5f55<\/li>\n
                                                                                                                                                                                                              • push(path, state)<\/code>\uff1apush \u6a21\u5f0f\u5207\u6362\u8def\u7531\uff0c\u53ef\u4ee5\u4f20\u9012\u8def\u7531 path \u548c state \u53c2\u6570<\/li>\n
                                                                                                                                                                                                              • replace(path, state)<\/code>\uff1areplace \u6a21\u5f0f\u5207\u6362\u8def\u7531\uff0c\u53ef\u4ee5\u4f20\u9012\u8def\u7531 path \u548c state \u53c2\u6570<\/li>\n<\/ul>\n
                                                                                                                                                                                                                \/\/ \u70b9\u51fb\u6309\u94ae\uff0c\u8df3\u8f6c\u8def\u7531 <button onClick={this.jump}>button<\/button> jump = () => { \/\/ 1. \u8df3\u8f6c\u8def\u7531 this.props.history.push(\"\/home\/message\") \/\/ 2. \u8df3\u8f6c\u8def\u7531\uff0c\u5e76\u643a\u5e26params\u53c2\u6570 this.props.history.push(\"\/home\/message\/zhangsan\/18\") \/\/ <Route>\u6807\u7b7e\u9700\u8981\u63a5\u6536\u53c2\u6570 \/\/ 3. \u8df3\u8f6c\u8def\u7531\uff0c\u5e76\u643a\u5e26state\u53c2\u6570 this.props.history.push(\"\/home\/message\", {name: 'zhangsan', age: 18}) } <\/code><\/pre>\n
                                                                                                                                                                                                                withRouter<\/h4>\n
                                                                                                                                                                                                                \u5f53\u6211\u4eec\u60f3\u8981\u5728\u4e00\u822c\u7ec4\u4ef6\u4e2d\u63a7\u5236\u8def\u7531\u7684\u524d\u8fdb\u4e0e\u56de\u9000\u65f6\uff0c\u53d1\u73b0\u65e0\u6cd5\u5b9e\u73b0\uff0c\u56e0\u4e3a\u4e00\u822c\u7ec4\u4ef6\u4e2d\u62ff\u4e0d\u5230 history \u5bf9\u8c61\uff0c\u8fd9\u662f\u8def\u7531\u7ec4\u4ef6\u7279\u6709\u7684<\/p>\n
                                                                                                                                                                                                                \u4f46\u662f withRouter \u53ef\u4ee5\u52a0\u5de5\u4e00\u822c\u7ec4\u4ef6\uff0c\u8ba9\u4e00\u822c\u7ec4\u4ef6\u5177\u5907\u8def\u7531\u7ec4\u4ef6\u6240\u7279\u6709\u7684 API<\/strong>\uff0c\u5b83\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u8fd4\u56de\u52a0\u5de5\u540e\u7684\u65b0\u7ec4\u4ef6<\/p>\n
                                                                                                                                                                                                                import { withRouter } from \"react-router-dom\"; class App extends Component { } export default withRouter(App) \/\/ \u52a0\u5de5App\u7ec4\u4ef6\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728App\u7ec4\u4ef6\u7684props\u4e2d\u62ff\u5230history\u5bf9\u8c61 <\/code><\/pre>\n
                                                                                                                                                                                                                \u8d44\u6e90\u4e22\u5931\u95ee\u9898<\/h4>\n
                                                                                                                                                                                                                \u5047\u5982 bootstrap.css \u6587\u4ef6\u5939\u653e\u5728 public\/src \u76ee\u5f55\u4e0b\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                \u5f53\u8df3\u8f6c\u7684 path \u503c\u4e3a\u591a\u7ea7\u65f6\uff0c\u5982\u679c\u5237\u65b0\u9875\u9762\uff0cbootstrap.css \u6837\u5f0f\u4f1a\u4e22\u5931\uff0c\u6f14\u793a\u5982\u4e0b\uff1a<\/p>\n
                                                                                                                                                                                                                \u9996\u5148\u8981\u914d\u7f6e\u591a\u7ea7 path \u4e0e\u7ec4\u4ef6\u6620\u5c04\uff1a<\/p>\n
                                                                                                                                                                                                                <NavLink className=\"list-group-item\" to=\"\/zz\/about\">about<\/NavLink> <NavLink className=\"list-group-item\" to=\"\/zz\/home\">home<\/NavLink> <Route path=\"\/zz\/about\" component={About}><\/Route> <Route path=\"\/zz\/home\" component={Home}><\/Route> <\/code><\/pre>\n
                                                                                                                                                                                                                \u9879\u76ee\u542f\u52a8\u540e\uff0c\u9875\u9762\u9ed8\u8ba4 url \u4e3a http:\/\/localhost:3000\uff0c\u9875\u9762\u5c55\u793a\u5982\u4e0b\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                \u6b64\u65f6\u70b9\u51fb about \u94fe\u63a5\uff0c\u9875\u9762\u5c55\u793a\u5982\u4e0b\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                \u7136\u540e\u5237\u65b0\u9875\u9762\uff0c\u4f1a\u53d1\u73b0\u6240\u6709\u6837\u5f0f\u90fd\u6ca1\u4e86\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                \u67e5\u770b\u4e00\u4e0b\u6d4f\u89c8\u5668\u8bf7\u6c42\uff0c\u53d1\u73b0\u5728\u8bf7\u6c42 bootstrap.css \u65f6\u88ab\u6dfb\u52a0\u4e86\u4e00\u4e2a zz \u524d\u7f00\uff0c\u6240\u4ee5\u6ca1\u8bf7\u6c42\u5230\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                \u6ca1\u8bf7\u6c42\u5230\u4e3a\u4ec0\u4e48\u72b6\u6001\u7801\u8fd8\u662f 200 \u5462\uff1f\u56e0\u4e3a\u5f53 path \u8def\u5f84\u4e3a \/<\/code> \u6216\u8005\u8bf7\u6c42\u7684\u8d44\u6e90\u6ca1\u8bf7\u6c42\u5230\u65f6\uff0c\u5219\u9ed8\u8ba4\u4f1a\u5c06 index.html \u8fd4\u56de\uff1a<\/p>\n
                                                                                                                                                                                                                \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                \u5728\u5931\u53bb bootstrap \u6837\u5f0f\u540e\uff0c\u9875\u9762\u5c31\u53d8\u6210\u4e86\u5149\u79c3\u79c3\u7684\u6837\u5b50<\/p>\n
                                                                                                                                                                                                                \n
                                                                                                                                                                                                                \u89e3\u51b3\u8d44\u6e90\u4e22\u5931\u95ee\u9898\u6709\u4e09\u79cd\u65b9\u5f0f\uff1a<\/p>\n
                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                1. \n
                                                                                                                                                                                                                  \u5728\u5f15\u5165\u8d44\u6e90\u65f6\uff0c\u4e0d\u8981\u7528\u76f8\u5bf9\u8def\u5f84\uff1a<\/p>\n
                                                                                                                                                                                                                  <!-- \u4fee\u6539\u524d --><\/span> <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>.\/css\/bootstrap.css\"<\/span><\/span>><\/span><\/span> <!-- \u4fee\u6539\u540e --><\/span> <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>\/css\/bootstrap.css\"<\/span><\/span>><\/span><\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                2. \n
                                                                                                                                                                                                                  \u5728\u5f15\u5165\u8d44\u6e90\u65f6\uff0c\u4f7f\u7528 %PUBLIC_URL%<\/code>\uff08\u53ea\u9002\u7528\u4e8e React \u811a\u624b\u67b6\u4e2d\uff09\uff1a<\/p>\n
                                                                                                                                                                                                                  <!-- \u4fee\u6539\u524d --><\/span> <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>.\/css\/bootstrap.css\"<\/span><\/span>><\/span><\/span> <!-- \u4fee\u6539\u540e --><\/span> <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>%PUBLIC_URL%\/css\/bootstrap.css\"<\/span><\/span>><\/span><\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                3. \n
                                                                                                                                                                                                                  \u4f7f\u7528 HashRouter<\/code> \u66ff\u6362 BrowserRouter<\/code>\uff1a<\/p>\n
                                                                                                                                                                                                                  \/\/ \u4fee\u6539\u524d\uff1a root.render( <BrowserRouter> <App \/> <\/BrowserRouter> ) \/\/ \u4fee\u6539\u540e\uff1a \/\/ HashRouter\u4f1a\u7ed9url\u6dfb\u52a0'#'\u53f7\uff0c'#'\u53f7\u540e\u7684\u8def\u5f84\u6d4f\u89c8\u5668\u662f\u4e0d\u4f1a\u53bb\u8bf7\u6c42\u7684\uff0c\u6240\u4ee5\u76f8\u5f53\u4e8e\u76f4\u63a5\u8bf7\u6c42localhost:3000 root.render( <HashRouter> <App \/> <\/HashRouter> ) <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                  Ant Design\u7ec4\u4ef6\u5e93<\/h2>\n
                                                                                                                                                                                                                  Ant Design\uff08\u7b80\u79f0 antd\uff09\u662f\u57fa\u4e8e Ant Design \u8bbe\u8ba1\u4f53\u7cfb\u7684 React UI \u7ec4\u4ef6\u5e93\uff0c\u4e3b\u8981\u7528\u4e8e\u7814\u53d1\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u4ea7\u54c1<\/p>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                  • \u5b89\u88c5\uff1anpm i antd<\/code><\/li>\n
                                                                                                                                                                                                                  • \u5728 App \u7ec4\u4ef6\u4e2d\u5f15\u5165 antd \u6837\u5f0f\u6587\u4ef6\uff1aimport 'antd\/dist\/antd.min.css'<\/code><\/li>\n
                                                                                                                                                                                                                  • \u5f15\u5165 antd \u7ec4\u4ef6\uff1aimport { Button } from 'antd'<\/code><\/li>\n
                                                                                                                                                                                                                  • \u8c03\u7528 antd \u7ec4\u4ef6\uff1a<Button type=\"primary\">Button<\/Button><\/code><\/li>\n<\/ul>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                    \u9664 antd \u5916\uff0c\u5176\u4ed6\u5e38\u7528\u7ec4\u4ef6\u5e93\u8fd8\u6709 element-ui\uff08Vue \/ React\uff09\uff0cvant-ui\uff08\u79fb\u52a8\u7aef\uff09<\/p>\n
                                                                                                                                                                                                                    \u53e6\u5916\uff0c\u5982\u679c\u89c9\u5f97 antd \u5b98\u7f51\u6587\u6863\u5199\u7684\u6ca1\u90a3\u4e48\u8be6\u7ec6\uff0c\u53ef\u4ee5\u67e5\u770b 3.x \u7248\u672c\u7684\u6587\u6863<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                                    \u6837\u5f0f\u6309\u9700\u5f15\u5165<\/h3>\n
                                                                                                                                                                                                                    \u4e0a\u9762\u5f15\u5165\u6837\u5f0f\u6587\u4ef6\u7684\u65b9\u5f0f\u52a0\u8f7d\u4e86\u5168\u90e8\u7684 antd \u7ec4\u4ef6\u7684\u6837\u5f0f\uff08gzipped \u540e\u4e00\u5171\u5927\u7ea6 60kb\uff09<\/p>\n
                                                                                                                                                                                                                    \u6211\u4eec\u5e0c\u671b React \u80fd\u591f\u6309\u7167\u9700\u8981\u53bb\u52a0\u8f7d\u7ec4\u4ef6\u4ee3\u7801\u548c\u6837\u5f0f<\/p>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                    https:\/\/www.bilibili.com\/video\/BV1wy4y1D7JT?p=95<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                                    \u81ea\u5b9a\u4e49\u4e3b\u9898<\/h3>\n
                                                                                                                                                                                                                    antd \u9ed8\u8ba4\u4e3b\u9898\u8272\u662f\u84dd\u8272\uff0c\u5176\u5b9e\u662f\u56e0\u4e3a\u5176 less \u6837\u5f0f\u6587\u4ef6\u4e2d\u6709\u4e2a\u53d8\u91cf\u5b9a\u4e49\u7684\u662f\u84dd\u8272\uff0c\u6240\u4ee5\u89e3\u6790\u51fa\u6765\u7684 css \u4ee3\u7801\u90fd\u5e26\u6709\u84dd\u8272\uff0c\u6211\u4eec\u53ea\u9700\u60f3\u529e\u6cd5\u4fee\u6539\u90a3\u4e2a\u53d8\u91cf\u5373\u53ef<\/p>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                    https:\/\/ant.design\/docs\/react\/use-with-create-react-app-cn<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                                    Redux<\/h2>\n
                                                                                                                                                                                                                    \u4ecb\u7ecd<\/h3>\n
                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                    • Redux \u662f\u4ec0\u4e48\n
                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                      • Redux \u662f\u4e00\u4e2a\u4e13\u95e8\u7528\u4e8e\u505a\u72b6\u6001\u7ba1\u7406<\/strong>\u7684 js \u5e93\uff08\u5e76\u4e0d\u5c5e\u4e8e React \u63d2\u4ef6\u5e93\uff09<\/li>\n
                                                                                                                                                                                                                      • \u5b83\u53ef\u4ee5\u7528\u5728 React\uff0cAngular\uff0cVue \u7b49\u9879\u76ee\u4e2d\uff0c\u4f46\u57fa\u672c\u4e0a\u90fd\u662f\u548c React \u914d\u5408\u4f7f\u7528<\/li>\n
                                                                                                                                                                                                                      • \u4f5c\u7528\uff1a\u96c6\u4e2d\u5f0f\u7ba1\u7406 React \u5e94\u7528\u4e2d\u591a\u4e2a\u7ec4\u4ef6\u5171\u4eab<\/strong>\u7684\u72b6\u6001<\/li>\n
                                                                                                                                                                                                                      • \u7c7b\u4f3c\u4e8e Vue \u4e2d\u7684 Vuex<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                      • \u4ec0\u4e48\u60c5\u51b5\u4e0b\u9700\u8981\u4f7f\u7528 Redux\uff1f\n
                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                        • \u67d0\u4e2a\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c\u9700\u8981\u8ba9\u5176\u4ed6\u7ec4\u4ef6\u53ef\u4ee5\u968f\u65f6\u62ff\u5230\uff08\u5171\u4eab\uff09<\/li>\n
                                                                                                                                                                                                                        • \u4e00\u4e2a\u7ec4\u4ef6\u9700\u8981\u6539\u53d8\u53e6\u4e00\u4e2a\u7ec4\u4ef6\u7684\u72b6\u6001\uff08\u901a\u4fe1\uff09<\/li>\n
                                                                                                                                                                                                                        • \u603b\u4f53\u539f\u5219\uff1a\u80fd\u4e0d\u7528\u5c31\u4e0d\u7528\uff0c\u5982\u679c\u6d88\u606f\u8ba2\u9605\u6a21\u5f0f\u7528\u7740\u6bd4\u8f83\u5403\u529b\u65f6\u624d\u8003\u8651\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                          \u5de5\u4f5c\u539f\u7406<\/h3>\n
                                                                                                                                                                                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                          Redux \u5de5\u4f5c\u6d41\u7a0b\uff1a<\/p>\n
                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                          1. React Components\uff08\u6211\u4eec\u7684\u7ec4\u4ef6\uff09\u8981\u4fee\u6539\u72b6\u6001<\/li>\n
                                                                                                                                                                                                                          2. \u5148\u7531 Action Creators \u521b\u9020\u4e00\u4e2a action \u5bf9\u8c61\uff0c\u7528\u4e8e\u8868\u793a\u3010\u5982\u4f55\u4fee\u6539\u3011\u548c\u3010\u4fee\u6539\u7684\u503c\u662f\u4ec0\u4e48\u3011<\/li>\n
                                                                                                                                                                                                                          3. \u7136\u540e\u5c06\u6b64 action \u5bf9\u8c61\u53d1\u9001\u7ed9 Store\uff0cStore \u518d\u5c06\u4e0a\u4e00\u6b21\u7684\u72b6\u6001\u548c action \u5bf9\u8c61\u4f20\u9012\u7ed9 Reducers \u8fdb\u884c\u52a0\u5de5\n
                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                            • \u5982\u679c\u662f\u7b2c\u4e00\u6b21\u4f20\u9012\u72b6\u6001\uff0c\u5373\u521d\u59cb\u5316\u72b6\u6001\uff0c\u5219 previousState \u503c\u4e3a undefined\uff0caction \u7684 type \u503c\u4e3a @@init<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                            • Reducers \u8fd4\u56de\u52a0\u5de5\u540e\u7684\u65b0\u72b6\u6001\u7ed9 Store<\/li>\n
                                                                                                                                                                                                                            • Store \u518d\u5c06\u65b0\u7684\u72b6\u6001\u8fd4\u56de\u7ed9\u6211\u4eec\u7684\u7ec4\u4ef6\uff0c\u6700\u7ec8\u5b8c\u6210\u4e00\u6b21\u72b6\u6001\u7684\u4fee\u6539<\/li>\n<\/ol>\n
                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                              \u53ef\u4ee5\u628a React Components \u7406\u89e3\u4e3a\u9910\u5385\u7684\u987e\u5ba2\uff08\u6211\u8981\u5403\u4ec0\u4e48\u83dc\uff09\uff0cAction Creators \u5c31\u662f\u670d\u52a1\u5458\uff08\u8bb0\u5f55\u83dc\u5355\uff09\uff0cStore \u4e3a\u4f20\u83dc\u5458\uff08\u628a\u83dc\u5355\u62ff\u7ed9\u53a8\u5b50\uff0c\u53a8\u5b50\u505a\u597d\u540e\u518d\u628a\u83dc\u4e0a\u7ed9\u987e\u5ba2\uff09\uff0cReducers \u5219\u4e3a\u53a8\u5b50\uff08\u6839\u636e\u83dc\u5355\u505a\u83dc\uff09<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                                              \u6848\u4f8b\u5f15\u5165<\/h3>\n
                                                                                                                                                                                                                              \u8fd9\u91cc\u901a\u8fc7\u4e00\u4e2a\u8ba1\u7b97\u5668\u6848\u4f8b\uff0c\u4f9d\u6b21\u5f15\u51fa Redux \u7684\u5404\u4e2a API \u7684\u4f7f\u7528\u65b9\u5f0f<\/p>\n
                                                                                                                                                                                                                              \u6848\u4f8b\uff1a\u6709\u4e0b\u56fe\u8fd9\u6837\u7684\u4e00\u4e2a\u8ba1\u7b97\u5668\uff0c\u4e0a\u65b9\u5c55\u793a\u8ba1\u7b97\u7ed3\u679c\uff0c\u5de6\u4fa7\u4e0b\u62c9\u6846\u53ef\u4ee5\u9009\u62e9\u8981\u52a0\u6216\u51cf\u7684\u503c\uff0c\u53f3\u65b9\u7684\u6309\u94ae\u4f9d\u6b21\u4e3a\u52a0\u3001\u51cf\u3001\u5947\u6570\u65f6\u518d\u52a0\u30011 \u79d2\u540e\u518d\u52a0<\/p>\n
                                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                              \u76ee\u5f55\u7ed3\u6784\uff1a<\/p>\n
                                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                              \u4ee3\u7801\u8bb2\u89e3\uff1a<\/p>\n
                                                                                                                                                                                                                                \n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                index.js<\/p>\n
                                                                                                                                                                                                                                import React from \"react\"; import ReactDOM from \"react-dom\/client\"; import App from \".\/App\"; import store from \".\/redux\/store\"; const root = ReactDOM.createRoot(document.getElementById('root')) root.render(<App><\/App>) \/\/ \u76d1\u542cstore\u7684\u503c\u53d8\u5316 store.subscribe(() => { \/\/ \u76f4\u63a5\u91cd\u65b0\u6e32\u67d3\u6574\u4e2aApp \/\/ \u91cd\u65b0\u6e32\u67d3\u6240\u6709\u7ec4\u4ef6\uff0c\u4f1a\u4e0d\u4f1a\u6709\u6548\u7387\u95ee\u9898\uff1f\u4e0d\u4f1a\u7684\uff0c\u6709DOM\u7684diffing\u7b97\u6cd5 root.render(<App><\/App>) }) <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                App.js<\/p>\n
                                                                                                                                                                                                                                import React, { Component } from 'react' import Count from '.\/components\/Count' export default class App extends Component { render() { return ( <div> <Count><\/Count> <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                constant.js<\/p>\n
                                                                                                                                                                                                                                \/* \u8be5\u6a21\u5757\u662f\u7528\u4e8e\u5b9a\u4e49action\u5bf9\u8c61\u4e2dtype\u7c7b\u578b\u7684\u5e38\u91cf\u503c\uff0c\u76ee\u7684\u53ea\u6709\u4e00\u4e2a\uff1a\u4fbf\u4e8e\u7ba1\u7406\u7684\u540c\u65f6\u9632\u6b62\u7a0b\u5e8f\u5458\u5355\u8bcd\u5199\u9519 *\/<\/span> export<\/span> const<\/span> INCREMENT<\/span> =<\/span> 'increment'<\/span> export<\/span> const<\/span> DECREMENT<\/span> =<\/span> 'decrement'<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                count_action.js<\/p>\n
                                                                                                                                                                                                                                \/* \u8be5\u6587\u4ef6\u4e13\u95e8\u4e3aCount\u7ec4\u4ef6\u751f\u6210action\u5bf9\u8c61\uff1b\u5982\u679c\u662f\u5f02\u6b65action\uff0c\u5219\u751f\u6210action\u51fd\u6570 *\/<\/span> import<\/span> { \n     <\/span> INCREMENT<\/span>,<\/span> DECREMENT<\/span> }<\/span> from<\/span> \".\/constant\"<\/span>;<\/span> export<\/span> const<\/span> createIncrementAction<\/span> =<\/span> data<\/span> =><\/span> (<\/span>{ \n     <\/span> type<\/span>:<\/span> INCREMENT<\/span>,<\/span> data }<\/span>)<\/span> export<\/span> const<\/span> createDecrementAction<\/span> =<\/span> data<\/span> =><\/span> (<\/span>{ \n     <\/span> type<\/span>:<\/span> DECREMENT<\/span>,<\/span> data }<\/span>)<\/span> export<\/span> const<\/span> createIncrementAsyncAction<\/span> =<\/span> (<\/span>data,<\/span> timeout<\/span>)<\/span> =><\/span> { \n     <\/span> \/\/ \u5f02\u6b65action\u9700\u8981\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u5728\u51fd\u6570\u4f53\u4e2d\u7f16\u5199\u5f02\u6b65\u903b\u8f91<\/span> \/\/ \u672c\u6765dispatch\u65b9\u6cd5\u53ea\u63a5\u6536\u666e\u901a\u5bf9\u8c61\uff0c\u4f46\u662f\u6211\u4eec\u8fd9\u91cc\u63d0\u4f9b\u7684\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u6b64\u65f6\u5c31\u9700\u8981\u501f\u52a9\u4e8eredux-thunk<\/span> \/\/ \u6709\u4e86redux-thunk\u540e\uff0cstore\u4f1a\u5e2e\u6211\u4eec\u8c03\u8fd9\u4e2a\u51fd\u6570\uff0c\u5e76\u4e14store\u628adispatch\u4f5c\u4e3a\u53c2\u6570\u4f20\u4e86\u8fc7\u6765\u4f9b\u6211\u4eec\u4f7f\u7528<\/span> return<\/span> (<\/span>dispatch<\/span>)<\/span> =><\/span> { \n     <\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> { \n     <\/span> dispatch<\/span>(<\/span>createIncrementAction<\/span>(<\/span>data *<\/span> 1<\/span>)<\/span>)<\/span> }<\/span>,<\/span> timeout)<\/span>;<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                count_reducer.js<\/p>\n
                                                                                                                                                                                                                                \/* 1. \u8be5\u6587\u4ef6\u9002\u7528\u4e8e\u521b\u5efa\u4e00\u4e2a\u4e3aCount\u7ec4\u4ef6\u670d\u52a1\u7684reducer\uff0creducer\u7684\u672c\u8d28\u5c31\u662f\u4e00\u4e2a\u51fd\u6570 2. reducer\u51fd\u6570\u4f1a\u63a5\u6536\u5230\u4e24\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u4e3a\uff1a\u4e4b\u524d\u7684\u72b6\u6001preState\u548c\u52a8\u4f5c\u5bf9\u8c61action *\/<\/span> import<\/span> { \n     <\/span> INCREMENT<\/span>,<\/span> DECREMENT<\/span> }<\/span> from<\/span> \".\/constant\"<\/span>;<\/span> const<\/span> initState =<\/span> 0<\/span>;<\/span> \/\/ \u521d\u59cb\u503c<\/span> export<\/span> default<\/span> function<\/span> countReducer<\/span>(<\/span>preState =<\/span> initState,<\/span> action<\/span>)<\/span> { \n     <\/span> \/* \u4f7f\u7528store\u65f6\uff0c\u4f1a\u5148\u521d\u59cb\u5316store\uff0c\u6b64\u65f6\u67e5\u770bpreState\u548caction\u5bf9\u8c61\uff1a console.log(preState) \/\/ 0 console.log(action) \/\/ @@redux\/INITr.b.d.y.h.k *\/<\/span> \/\/ \u4eceaction\u5bf9\u8c61\u4e2d\u83b7\u53d6type\u548cdata<\/span> const<\/span> { \n     <\/span> type,<\/span> data }<\/span> =<\/span> action;<\/span> \/\/ \u6839\u636etype\u51b3\u5b9a\u5982\u4f55\u52a0\u5de5\u6570\u636e<\/span> switch<\/span> (<\/span>type)<\/span> { \n     <\/span> case<\/span> INCREMENT<\/span>:<\/span> \/\/ \u5982\u679c\u662f\u52a0<\/span> return<\/span> preState +<\/span> data;<\/span> case<\/span> DECREMENT<\/span>:<\/span> \/\/ \u5982\u679c\u662f\u51cf<\/span> return<\/span> preState -<\/span> data;<\/span> \/* \u8fd9\u91cc\u53ea\u5173\u6ce8\u8c13\u8bed\uff1a\u5373\u505a\u4ec0\u4e48\uff1b\u800c\u4e0d\u5173\u6ce8\u72b6\u8bed\uff1a\u5728\u4ec0\u4e48\u4ec0\u4e48\u65f6\u5019 \u8fd9\u91cc\u53ea\u5173\u6ce8\u52a0\u6216\u51cf\u8fd9\u4e2a\u52a8\u4f5c\uff0c\u5f02\u6b65\u52a0\u672c\u8d28\u4e0a\u8fd8\u662f\u8c03\u7528\u52a0\u64cd\u4f5c\uff0c\u6240\u4ee5\u5f02\u6b65\u7684\u4ee3\u7801\u4e0d\u5e94\u8be5\u5199\u5230\u8fd9\u91cc case 'asyncDecrement': \u5982\u679c\u662f\u5f02\u6b65\u52a0 return ... *\/<\/span> default<\/span>:<\/span> \/\/ \u5982\u679c\u6ca1\u4f20type\uff0c\u5373\u521d\u59cb\u5316\u64cd\u4f5c<\/span> return<\/span> preState;<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                store.js<\/p>\n
                                                                                                                                                                                                                                \/* \u8be5\u6587\u4ef6\u4e13\u95e8\u7528\u4e8e\u66b4\u9732\u4e00\u4e2astore\u5bf9\u8c61\uff0c\u6574\u4e2a\u5e94\u7528\u53ea\u6709\u4e00\u4e2astore\u5bf9\u8c61 *\/<\/span> \/\/ \u5f15\u5165createSotre\uff0c\u4e13\u95e8\u7528\u4e8e\u521b\u5efaredux\u4e2d\u6700\u4e3a\u6838\u5fc3\u7684store\u5bf9\u8c61<\/span> \/\/ \u5f15\u5165applyMiddleware\uff0c\u7528\u4e8e\u652f\u6301\u4e2d\u95f4\u4ef6<\/span> import<\/span> { \n     <\/span> createStore,<\/span> applyMiddleware }<\/span> from<\/span> \"redux\"<\/span>;<\/span> \/\/ \u5f15\u5165redux-thunk\u4e2d\u95f4\u4ef6\uff0c\u8be5\u4e2d\u95f4\u4ef6\u5141\u8bb8\u4e3astore.dispatch()\u65b9\u6cd5\u4f20\u9012\u4e00\u4e2a\u51fd\u6570\uff0c\u7528\u4e8e\u652f\u6301\u5f02\u6b65action\uff0c<\/span> import<\/span> thunk from<\/span> \"redux-thunk\"<\/span>;<\/span> \/\/ \u5f15\u5165\u4e3aCount\u7ec4\u4ef6\u670d\u52a1\u7684reducer<\/span> import<\/span> countReducer from<\/span> '.\/count_reducer'<\/span> \/\/ \u66b4\u9732sotre\uff0c\u5e76\u6ce8\u518cthunk\u4e2d\u95f4\u4ef6<\/span> export<\/span> default<\/span> createStore<\/span>(<\/span>countReducer,<\/span> applyMiddleware<\/span>(<\/span>thunk)<\/span>)<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                Count.jsx<\/p>\n
                                                                                                                                                                                                                                import React, { Component } from \"react\"; import store from \"..\/..\/redux\/store\"; import { createIncrementAction, createDecrementAction, createIncrementAsyncAction, } from \"..\/..\/redux\/count_action\"; export default class Count extends Component { state = { name: \"zhangsan\", }; \/* \/\/ \u9875\u9762\u6302\u8f7d\u540e\uff0c\u76d1\u542cstore\u5bf9\u8c61 \/\/ \u5982\u679c\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u8981\u901a\u8fc7\u4fee\u6539\u72b6\u6001\u6765\u89e6\u53d1\u6e32\u67d3\uff0c\u5219\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u8981\u5199\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\uff0c\u6240\u4ee5\u6211\u4eec\u628a\u5b83\u63d0\u53d6\u5230index.js\u4e2d componentDidMount(){ \/\/ \u56e0\u4e3astore\u7684\u503c\u6539\u53d8\u5e76\u4e0d\u80fd\u89e6\u53d1\u9875\u9762\u7684\u6e32\u67d3\uff0c\u800c\u4e14\u6211\u4eec\u4e5f\u4e0d\u80fd\u624b\u52a8\u901a\u8fc7this.render()\u8fdb\u884c\u6e32\u67d3 \/\/ \u6240\u4ee5\u9700\u8981\u5bf9store\u7684\u503c\u8fdb\u884c\u76d1\u542c\uff0c\u53ea\u8981\u53d1\u751f\u6539\u53d8\uff0c\u5c31\u624b\u52a8\u8c03\u7528\u4e00\u4e0bsetState\u65b9\u6cd5\u89e6\u53d1\u9875\u9762\u6e32\u67d3 store.subscribe(()=>{ this.setState({}) }) } *\/ add = () => { const { value } = this.opt; store.dispatch(createIncrementAction(value * 1)); }; sub = () => { const { value } = this.opt; store.dispatch(createDecrementAction(value * 1)); }; addIfOdd = () => { const count = store.getState(); const { value } = this.opt; if (count % 2 !== 0) { store.dispatch(createIncrementAction(value * 1)); } }; addAsync = () => { const { value } = this.opt; \/\/ \u5f02\u6b65\u903b\u8f91\u4e0d\u518d\u5199\u5230\u7ec4\u4ef6\u91cc\uff0c\u800c\u662f\u4ea4\u7ed9\u5f02\u6b65action\u5904\u7406 \/\/ dispatch\u672c\u6765\u53ea\u80fd\u63a5\u53d7\u4e00\u4e2a\u666e\u901aaction\u5bf9\u8c61\uff0c\u4f46\u662f\u8fd9\u91cc\u4f20\u9012\u7684\u53c2\u6570\u65f6\u4e00\u4e2a\u51fd\u6570\uff0c\u5219\u9700\u8981redux-thunk\u4e2d\u95f4\u4ef6 store.dispatch(createIncrementAsyncAction(value * 1, 1000)); }; render() { return ( <div> <h1>\u5f53\u524d\u6c42\u548c\u4e3a\uff1a{store.getState()}<\/h1> <select ref={(v) => { this.opt = v; }} > <option value=\"1\">1<\/option> <option value=\"2\">2<\/option> <option value=\"3\">3<\/option> <option value=\"4\">4<\/option> <option value=\"5\">5<\/option> <\/select> &nbsp; <button onClick={this.add}>+<\/button>&nbsp; <button onClick={this.sub}>-<\/button> &nbsp; <button onClick={this.addIfOdd}>\u5f53\u524d\u6c42\u548c\u4e3a\u5947\u6570\u518d\u52a0<\/button> &nbsp; <button onClick={this.addAsync}>1\u79d2\u540e\u518d\u52a0<\/button> <\/div> ); } } <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                API<\/h3>\n
                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                1. store.dispatch(action)<\/code>\n
                                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                                  • \u8f6c\u53d1 action \u5bf9\u8c61\u7ed9 reducer<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                  • createStore(reducer,applyMiddleware(thunk))<\/code>\n
                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                    • \u66b4\u9732 store \u5bf9\u8c61\uff0c\u5e76\u4e3a\u5176\u6ce8\u518c reducer \u548c redux-thunk<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                    • store.substribe(callback)<\/code>\n
                                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                                      • \u76d1\u542c store \u72b6\u6001\u7684\u53d8\u5316<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                        \u603b\u7ed3<\/h3>\n
                                                                                                                                                                                                                                        store \u72b6\u6001\u4fee\u6539\u6d41\u7a0b\uff1a<\/p>\n
                                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                                        1. \u6240\u6709\u7684\u516c\u5171\u72b6\u6001\u90fd\u4fdd\u5b58\u5230 store \u5bf9\u8c61\u4e2d<\/li>\n
                                                                                                                                                                                                                                        2. \u7ec4\u4ef6\u9700\u8981\u4fee\u6539 store \u72b6\u6001\u65f6\uff0c\u9700\u8981\u901a\u8fc7 store.dispatch()<\/code> \u4f20\u9012\u4e00\u4e2a action<\/li>\n
                                                                                                                                                                                                                                        3. action \u7531 count_action.js \u6587\u4ef6\u4e13\u95e8\u521b\u5efa\uff0c \u9700\u7531\u7ec4\u4ef6\u8c03\u7528\u5176\u66b4\u9732\u7684\u65b9\u6cd5<\/li>\n
                                                                                                                                                                                                                                        4. action \u4f1a\u88ab\u4f20\u9012\u5230 count_reducer.js \u5b9a\u4e49\u7684 reducer \u51fd\u6570\u4e2d\uff0c\u7531 reducer \u5b8c\u6210 store \u72b6\u6001\u7684\u4fee\u6539<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                          \u6ce8\u610f\uff1a<\/p>\n
                                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                                          1. store \u5bf9\u8c61\u7684\u72b6\u6001\u66f4\u6539\u5e76\u4e0d\u80fd\u89e6\u53d1\u9875\u9762\u6e32\u67d3\uff0c\u4f46\u53ef\u4ee5\u901a\u8fc7 store.subscribe()<\/code> \u76d1\u542c store \u72b6\u6001\u7684\u66f4\u6539\uff0c\u7136\u540e\u91cd\u65b0\u6e32\u67d3\u6574\u4e2a App \u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                          2. \u6240\u6709 type \u7c7b\u578b\u503c\u63a8\u8350\u5b9a\u4e49\u5230\u4e00\u4e2a\u5e38\u91cf\u6587\u4ef6\u4e2d\uff0c\u53ef\u4ee5\u9632\u6b62\u5355\u8bcd\u5199\u9519\uff0c\u4e5f\u65b9\u4fbf\u7edf\u4e00\u4fee\u6539<\/li>\n
                                                                                                                                                                                                                                          3. \u5f02\u6b65\u903b\u8f91\u53ef\u4ee5\u4e0d\u5199\u5230\u7ec4\u4ef6\u4e2d\uff0c\u800c\u662f\u4ea4\u7ed9\u5f02\u6b65 action\u5904\u7406<\/li>\n
                                                                                                                                                                                                                                          4. \u4f20\u9012\u7684 action \u5982\u679c\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5219\u9700\u8981\u5f15\u5165 redux-thunk \u652f\u6301<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                            React-redux<\/h2>\n
                                                                                                                                                                                                                                            \u4e3a\u4e86\u65b9\u4fbf\u4e0e React \u96c6\u6210\uff0cRedux \u5b98\u65b9\u63d0\u4f9b\u4e86\u4e00\u4e2a react-redux \u7ed1\u5b9a\u5e93<\/p>\n
                                                                                                                                                                                                                                            \u5b89\u88c5\uff1anpm -i react-redux<\/p>\n
                                                                                                                                                                                                                                            \u539f\u7406\u56fe<\/h3>\n
                                                                                                                                                                                                                                            \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                                            \u57fa\u672c\u4f7f\u7528<\/h3>\n
                                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                                            1. \u521b\u5efa\u5bb9\u5668\u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                            2. \u5c06 redux\u72b6\u6001\u4f20\u9012\u7ed9\u5bb9\u5668\u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                            3. \u7ed1\u5b9a\u5bb9\u5668\u7ec4\u4ef6\u548c UI \u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                            4. \u5728\u5bb9\u5668\u7ec4\u4ef6\u4e2d\u7f16\u5199\u83b7\u53d6\u72b6\u6001\u548c\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5\uff0c\u5e76\u6620\u5c04\u5230 UI \u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                            5. \u5728 UI \u7ec4\u4ef6\u4e2d\u901a\u8fc7 props \u83b7\u53d6\u72b6\u6001\u548c\u8c03\u7528\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                                              \u5c06 Redux \u7ae0\u8282\u7684\u8ba1\u7b97\u5668\u901a\u8fc7 react-redux \u4f18\u5316\uff1a<\/p>\n
                                                                                                                                                                                                                                              \u76ee\u5f55\u7ed3\u6784\uff1a<\/p>\n
                                                                                                                                                                                                                                              \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                                              \u4ee3\u7801\u5c55\u793a\uff1a<\/p>\n
                                                                                                                                                                                                                                                \n
                                                                                                                                                                                                                                              • \n
                                                                                                                                                                                                                                                \u5bb9\u5668\u7ec4\u4ef6 Count.jsx<\/p>\n
                                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                                • connect(mapStateToProps, mapDispatchToProps)(UIComponent)<\/code>\n
                                                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                                                  • \u521b\u5efa\u5e76\u66b4\u9732\u4e00\u4e2a\u7ed1\u5b9a\u4e86 UIComponent \u7ec4\u4ef6\u7684\u5bb9\u5668\u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                                  • mapStateToProps\uff1a\u6620\u5c04\u72b6\u6001\u5230 UI \u7ec4\u4ef6\u4e0a\uff0c\u9ed8\u8ba4\u63a5\u6536\u72b6\u6001\u53c2\u6570<\/li>\n
                                                                                                                                                                                                                                                  • mapDispatchToProps\uff1a\u6620\u5c04\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5\u5230 UI \u7ec4\u4ef6\u4e0a\uff0c\u9ed8\u8ba4\u63a5\u6536 dispatch \u53c2\u6570<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                    \/\/ \u5f15\u5165Count\u7684UI\u7ec4\u4ef6 import CountUI from \"..\/..\/components\/Count\"; \/\/ \u5f15\u5165action creator import { createIncrementAction, createDecrementAction, createIncrementAsyncAction, } from \"..\/..\/redux\/count_action\"; \/\/ \u5f15\u5165connect\u7528\u4e8e\u8fde\u63a5UI\u7ec4\u4ef6\u4e0e\u5bb9\u5668\u7ec4\u4ef6\uff0c\u4ee5\u53ca\u6620\u5c04\u72b6\u6001\u548c\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5 import { connect } from \"react-redux\"; \/\/ \u6620\u5c04\u72b6\u6001\uff08\u5373\u8be5\u51fd\u6570\u7684\u8fd4\u56de\u503c\uff09\u5230UI\u7ec4\u4ef6\u7684props\u4e2d \/\/ \u6b64\u51fd\u6570\u662f\u7531react-redux\u5e2e\u6211\u4eec\u8c03\u7684\uff0c\u5b83\u5728\u8c03\u7684\u65f6\u5019\u4f20\u4e86\u72b6\u6001\u4f5c\u4e3a\u53c2\u6570 function mapStateToProps(state) { return { count: state }; } \/\/ \u6620\u5c04\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5\uff08\u5373\u8be5\u51fd\u6570\u7684\u8fd4\u56de\u503c\uff09\u5230UI\u7ec4\u4ef6\u7684props\u4e2d \/\/ \u6b64\u51fd\u6570\u662f\u7531react-redux\u5e2e\u6211\u4eec\u8c03\u7684\uff0c\u5b83\u5728\u8c03\u7684\u65f6\u5019\u4f20\u4e86dispatch\u4f5c\u4e3a\u53c2\u6570 function mapDispatchToProps(dispatch) { return { add: (value) => { \/\/ \u8c03\u7528redux\u7684api\u64cd\u4f5c\u72b6\u6001 dispatch(createIncrementAction(value)); }, sub: (value) => { dispatch(createDecrementAction(value)); }, addIfOdd: (value) => { dispatch(createIncrementAction(value)); }, addAsync: (value, time) => { dispatch(createIncrementAsyncAction(value, time)); }, }; } \/\/ \u4f7f\u7528connect()()\u521b\u5efa\u5e76\u66b4\u9732\u4e00\u4e2a\u7ed1\u5b9a\u4e86CountUI\u7ec4\u4ef6\u7684\u5bb9\u5668\u7ec4\u4ef6 \/\/ connect()\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5b83\u53c8\u8fd4\u56de\u4e86\u4e00\u4e2a\u51fd\u6570\uff0c\u6211\u4eec\u5728\u540e\u9762\u518d\u52a0\u4e00\u4e2a()\u6765\u8c03\u7528\u8fd4\u56de\u7684\u51fd\u6570 export default connect(mapStateToProps, mapDispatchToProps)(CountUI); <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                  • \n
                                                                                                                                                                                                                                                    App.js<\/p>\n
                                                                                                                                                                                                                                                    import React, { Component } from 'react' import Count from '.\/containers\/Count' import store from '.\/redux\/store' export default class App extends Component { render() { return ( <div> {\/* \u5c06redux\u72b6\u6001\u4f20\u9012\u7ed9\u5bb9\u5668\u7ec4\u4ef6\uff0c\u6ce8\u610f\u4e0d\u662f\u76f4\u63a5\u5728\u5bb9\u5668\u7ec4\u4ef6\u4e2d\u5f15\u5165redux\u72b6\u6001 *\/} <Count store={store}><\/Count> <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                  • \n
                                                                                                                                                                                                                                                    UI \u7ec4\u4ef6 Count.jsx<\/p>\n
                                                                                                                                                                                                                                                    \/\/ UI\u7ec4\u4ef6\u4e2d\u4e0d\u518d\u4f7f\u7528\u4efb\u4f55redux\u7684API import React, { Component } from \"react\"; export default class Count extends Component { state = { name: \"zhangsan\", }; add = () => { const { value } = this.opt; {\/* \u8c03\u7528\u5bb9\u5668\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5 *\/} this.props.add(value * 1); }; sub = () => { const { value } = this.opt; this.props.sub(value * 1); }; addIfOdd = () => { const { value } = this.opt; if (this.props.count % 2 !== 0) { this.props.addIfOdd(value * 1); } }; addAsync = () => { const { value } = this.opt; this.props.addAsync(value * 1, 1000); }; render() { return ( <div> {\/* \u4ece\u5bb9\u5668\u7ec4\u4ef6\u4f20\u9012\u7684props\u4e2d\u83b7\u53d6\u72b6\u6001 *\/} <h1>\u5f53\u524d\u6c42\u548c\u4e3a\uff1a{this.props.count}<\/h1> <select ref={(v) => { this.opt = v; }} > <option value=\"1\">1<\/option> <option value=\"2\">2<\/option> <option value=\"3\">3<\/option> <option value=\"4\">4<\/option> <option value=\"5\">5<\/option> <\/select> &nbsp; <button onClick={this.add}>+<\/button>&nbsp; <button onClick={this.sub}>-<\/button> &nbsp; <button onClick={this.addIfOdd}>\u5f53\u524d\u6c42\u548c\u4e3a\u5947\u6570\u518d\u52a0<\/button> &nbsp; <button onClick={this.addAsync}>1\u79d2\u540e\u518d\u52a0<\/button> <\/div> ); } } <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                    \u7f16\u7801\u4f18\u5316<\/h3>\n
                                                                                                                                                                                                                                                    \u6620\u5c04\u7b80\u5199<\/h4>\n
                                                                                                                                                                                                                                                    \/* \/\/ connect()\u65b9\u6cd5\u9700\u8981\u63a5\u6536\u4e24\u4e2a\u51fd\u6570\uff0c\u6211\u4eec\u4e0d\u518d\u5355\u72ec\u5b9a\u4e49 function mapStateToProps(state) { return { count: state }; } function mapDispatchToProps(dispatch) { return { add: (value) => { dispatch(createIncrementAction(value)); }, sub: (value) => { dispatch(createDecrementAction(value)); }, addIfOdd: (value) => { dispatch(createIncrementAction(value)); }, addAsync: (value, time) => { dispatch(createIncrementAsyncAction(value, time)); }, }; } *\/ export default connect( \/\/ \u539f\u6765\u7684mapStateToProps\u7b80\u5199\u53ef\u4ee5\u4e3a\u7bad\u5934\u51fd\u6570 state => ({ count: state }), \/\/ \u539f\u6765\u7684mapDispatchToProps\u53ef\u4ee5\u7b80\u5199\u4e3a\u5bf9\u8c61\uff0c\u56e0\u4e3areact-redux\u5e2e\u6211\u4eec\u505a\u4e86\u5904\u7406 \/\/ \u6211\u4eec\u53ea\u9700\u5199\u4e0a\u3010\u65b9\u6cd5\u540d:action creator\u3011\u5373\u53ef\uff0creact-redux\u4f1a\u81ea\u52a8\u63a5\u6536UI\u7ec4\u4ef6\u4f20\u9012\u7684\u53c2\u6570\uff0c\u5e76\u901a\u8fc7dispatch\u5e2e\u6211\u4eec\u8f6c\u53d1 { add: createIncrementAction, sub: createDecrementAction, addIfOdd: createIncrementAction, addAsync: createIncrementAsyncAction, } )(CountUI); <\/code><\/pre>\n
                                                                                                                                                                                                                                                    \u53d6\u6d88store\u76d1\u542c<\/h4>\n
                                                                                                                                                                                                                                                    \u4f7f\u7528 react-redux \u4e4b\u540e\uff0c\u53ef\u4ee5\u4e0d\u518d\u901a\u8fc7\u76d1\u542c store \u7684\u53d8\u5316\u6765\u624b\u52a8\u6e32\u67d3 App\uff0c\u5bb9\u5668\u7ec4\u4ef6\u4f1a\u81ea\u52a8\u76d1\u542c\u5e76\u6e32\u67d3<\/p>\n
                                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                                    • \n
                                                                                                                                                                                                                                                      index.js<\/p>\n
                                                                                                                                                                                                                                                      import<\/span> React from<\/span> \"react\"<\/span>;<\/span> import<\/span> ReactDOM from<\/span> \"react-dom\/client\"<\/span>;<\/span> import<\/span> App from<\/span> \".\/App\"<\/span>;<\/span> import<\/span> store from<\/span> \".\/redux\/store\"<\/span>;<\/span> const<\/span> root =<\/span> ReactDOM.<\/span>createRoot<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span>)<\/span> root.<\/span>render<\/span>(<\/span><<\/span>App><\/span><<\/span>\/<\/span>App><\/span>)<\/span> \/* \/\/ \u76d1\u542cstore\u7684\u503c\u53d8\u5316 store.subscribe(() => { \/\/ \u76f4\u63a5\u91cd\u65b0\u6e32\u67d3\u6574\u4e2aApp \/\/ \u91cd\u65b0\u6e32\u67d3\u6240\u6709\u7ec4\u4ef6\uff0c\u4f1a\u4e0d\u4f1a\u6709\u6548\u7387\u95ee\u9898\uff1f\u4e0d\u4f1a\u7684\uff0c\u6709DOM\u7684diffing\u7b97\u6cd5 root.render(<App><\/App>) }) *\/<\/span> <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                      store\u4f20\u9012\u7b80\u5199<\/h4>\n
                                                                                                                                                                                                                                                      \u539f\u6765\u6211\u4eec\u9700\u8981\u624b\u52a8\u7ed9\u5bb9\u5668\u5bf9\u8c61\u4f20\u9012 store\uff1a<\/p>\n
                                                                                                                                                                                                                                                      export default class App extends Component { render() { return ( <div> {\/* \u5c06redux\u72b6\u6001\u4f20\u9012\u7ed9\u5bb9\u5668\u7ec4\u4ef6 *\/} <Count store={store}><\/Count> {\/* \u5982\u679c\u5bb9\u5668\u7ec4\u4ef6\u5f88\u591a\uff0c\u5c31\u8981\u4f20\u9012\u5f88\u591a\u6b21store *\/} <A store={store}><\/A> <B store={store}><\/B> <C store={store}><\/C> <\/div> ) } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                      \u73b0\u5728\u901a\u8fc7 <Provider\/><\/code> \u6807\u7b7e\uff0c\u53ef\u4ee5\u81ea\u52a8\u5c06 store \u4f20\u9012\u7ed9\u6240\u6709\u5bb9\u5668\u7ec4\u4ef6\uff1a<\/p>\n
                                                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                                                      • \n
                                                                                                                                                                                                                                                        index.js<\/p>\n
                                                                                                                                                                                                                                                        import React from \"react\"; import ReactDOM from \"react-dom\/client\"; import App from \".\/App\"; import { Provider } from \"react-redux\/es\/exports\"; import store from \".\/redux\/store\"; const root = ReactDOM.createRoot(document.getElementById('root')) root.render( \/\/ \u4f7f\u7528Provider\u6807\u7b7e\u5c06App\u7ec4\u4ef6\u5305\u88f9\u5e76\u4f20\u9012store\uff0cApp\u4e2d\u7684\u6240\u6709\u5bb9\u5668\u7ec4\u4ef6\u90fd\u4f1a\u63a5\u6536\u5230store <Provider store={store}> <App \/> <\/Provider> ) <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                        \u5bb9\u5668\u7ec4\u4ef6+UI\u7ec4\u4ef6\u6574\u5408<\/h4>\n
                                                                                                                                                                                                                                                        \u4e4b\u524d\u6211\u4eec\u90fd\u662f\u5bb9\u5668\u7ec4\u4ef6\u5199\u5230 containers \u4e2d\uff0cUI \u7ec4\u4ef6\u5199\u5230 components \u4e2d<\/p>\n
                                                                                                                                                                                                                                                        \u6211\u4eec\u53ef\u4ee5\u628a\u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u5408\u4e3a\u4e00\u4e2a\u6587\u4ef6\uff0c\u4f7f\u9879\u76ee\u7ed3\u6784\u66f4\u6e05\u6670<\/p>\n
                                                                                                                                                                                                                                                        \u4e00\u822c\u5408\u6210\u540e\u7684\u6587\u4ef6\u8fd8\u662f\u5199\u5230 containers \u76ee\u5f55\u4e2d\uff0c\u56e0\u4e3a\u8be5\u6587\u4ef6\u91cc\u9762\u8c03\u7528\u4e86 redux \u7684 API\uff0c\u5df2\u7ecf\u4e0d\u7b26\u5408 UI \u7ec4\u4ef6\u7684\u5b9a\u4e49\u4e86<\/p>\n
                                                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                                                        • \n
                                                                                                                                                                                                                                                          Count.jsx<\/p>\n
                                                                                                                                                                                                                                                          import { connect } from \"react-redux\"; import React, { Component } from \"react\"; \/\/ \u539fUI\u7ec4\u4ef6\u5185\u5bb9 class Count extends Component { render() { return ( \/\/ ... ); } } \/\/ \u539f\u5bb9\u5668\u7ec4\u4ef6\u5185\u5bb9 export default connect((state) => ({ count: state }), { add: createIncrementAction, sub: createDecrementAction, addIfOdd: createIncrementAction, addAsync: createIncrementAsyncAction, })(Count); \/\/ \u4f20\u5165UI\u7ec4\u4ef6Count <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                          \u591a\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab<\/h3>\n
                                                                                                                                                                                                                                                          \u5728\u4e4b\u524d\u7684 redux \u6848\u4f8b\u4e2d\uff0c\u6211\u4eec\u53ea\u4f7f\u7528\u4e86\u4e00\u4e2a Count \u7ec4\u4ef6\uff0c\u65e0\u6cd5\u4f53\u4f1a\u5230\u591a\u4e2a\u7ec4\u4ef6\u5171\u4eab\u72b6\u6001\u7684\u6a21\u5f0f<\/p>\n
                                                                                                                                                                                                                                                          \u672c\u8282\u7f16\u5199\u4e86\u4e00\u4e2a\u591a\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab\u6848\u4f8b\uff1a\u6709 A\u3001B \u4e24\u4e2a\u7ec4\u4ef6\uff0cA \u7ec4\u4ef6\u5c55\u793a\u6c42\u548c\u7ed3\u679c\uff0cB \u7ec4\u4ef6\u5c55\u793a\u6570\u7ec4\u3002A \u7ec4\u4ef6\u53ef\u4ee5\u5411 B \u7ec4\u4ef6\u7684\u6570\u7ec4\u4e2d\u6dfb\u52a0\u5143\u7d20\uff0cB \u7ec4\u4ef6\u53ef\u4ee5\u4fee\u6539 A \u7ec4\u4ef6\u7684\u6c42\u548c\u7ed3\u679c<\/p>\n
                                                                                                                                                                                                                                                          \u6587\u4ef6\u76ee\u5f55\uff1a<\/p>\n
                                                                                                                                                                                                                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            index.js<\/p>\n
                                                                                                                                                                                                                                                            import React from \"react\"; import App from \".\/App\"; import ReactDOM from 'react-dom\/client' import { Provider } from 'react-redux\/es\/exports' import store from '.\/redux\/store' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <Provider store={store}> <App \/> <\/Provider> ) <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            App.js<\/p>\n
                                                                                                                                                                                                                                                            import React, { Component } from 'react' import A from '.\/containers\/A' import B from '.\/containers\/B' export default class App extends Component { render() { return ( <div> <A><\/A> <hr><\/hr> <B><\/B> <\/div> ) } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            aReducer.js<\/p>\n
                                                                                                                                                                                                                                                            import<\/span> { \n     <\/span> ADD<\/span> }<\/span> from<\/span> \"..\/constant\"<\/span>;<\/span> const<\/span> initState =<\/span> 0<\/span>;<\/span> export<\/span> default<\/span> function<\/span> aReducer<\/span>(<\/span>preState =<\/span> initState,<\/span> action<\/span>)<\/span> { \n     <\/span> const<\/span> { \n     <\/span> type,<\/span> data }<\/span> =<\/span> action switch<\/span> (<\/span>type)<\/span> { \n     <\/span> case<\/span> ADD<\/span>:<\/span> return<\/span> preState +<\/span> data;<\/span> default<\/span>:<\/span> return<\/span> preState }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            bReducer.js<\/p>\n
                                                                                                                                                                                                                                                            import<\/span> { \n     <\/span> PUSH<\/span> }<\/span> from<\/span> \"..\/constant\"<\/span>;<\/span> const<\/span> initState =<\/span> [<\/span>]<\/span> \/\/ Reducer\u5fc5\u987b\u662f\u4e00\u4e2a\u7eaf\u51fd\u6570<\/span> export<\/span> default<\/span> function<\/span> bReducer<\/span>(<\/span>preState =<\/span> initState,<\/span> action<\/span>)<\/span> { \n     <\/span> const<\/span> { \n     <\/span> type,<\/span> data }<\/span> =<\/span> action;<\/span> switch<\/span> (<\/span>type)<\/span> { \n     <\/span> case<\/span> PUSH<\/span>:<\/span> \/\/ \u4ee5\u4e0b\u5199\u6cd5\u4f1a\u4f7freducer\u4e0d\u6ee1\u8db3\u7eaf\u51fd\u6570\u7684\u5b9a\u4e49\uff0c\u56e0\u4e3a\u4fee\u6539\u4e86\u53c2\u6570\u7684\u503c\uff08\u5411\u539f\u6570\u7ec4\u4e2d\u6dfb\u52a0\u4e86\u65b0\u5143\u7d20\uff09<\/span> \/\/ preState.push(data)<\/span> \/\/ return preState \/\/ reducer\u4f1a\u5bf9\u4fee\u6539\u524d\u540e\u7684preState\u8fdb\u884c\u6d45\u6bd4\u8f83\uff0c\u6b64\u5904\u6bd4\u8f83\u7ed3\u679c\u76f8\u7b49\uff0c\u6240\u4ee5\u4e0d\u4f1a\u5237\u65b0\u9875\u9762<\/span> return<\/span> [<\/span>...<\/span>preState,<\/span> data]<\/span> default<\/span>:<\/span> return<\/span> preState;<\/span> }<\/span> }<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            store.js<\/p>\n
                                                                                                                                                                                                                                                            import<\/span> { \n     <\/span> createStore,<\/span> applyMiddleware,<\/span> combineReducers }<\/span> from<\/span> \"redux\"<\/span>;<\/span> import<\/span> thunk from<\/span> \"redux-thunk\"<\/span>;<\/span> import<\/span> aReducer from<\/span> \".\/reducers\/a_reducer\"<\/span>;<\/span> import<\/span> bReducer from<\/span> \".\/reducers\/b_reducer\"<\/span>;<\/span> \/\/ \u6ce8\u518c\u591a\u4e2areducer\u65f6\uff0c\u9700\u8981\u4f7f\u7528combineReducer()\u65b9\u6cd5\u5c06\u5176\u6574\u5408\u5230\u4e00\u8d77<\/span> \/\/ \u53c2\u6570\u4f20\u7684\u662f\u5bf9\u8c61\uff0cstore\u72b6\u6001\u4fdd\u5b58\u7684\u5c31\u662f\u8fd9\u4e2a\u5bf9\u8c61\uff1b\u53c2\u6570\u4f20\u7684\u662f\u6570\u7ec4\uff0cstore\u72b6\u6001\u4fdd\u5b58\u7684\u5c31\u662f\u4e00\u4e2a\u6570\u7ec4\uff1b\u663e\u7136\u4f7f\u7528\u5bf9\u8c61\u66f4\u5408\u7406<\/span> \/\/ \u5f53reducer\u5f88\u591a\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u6574\u5408\u64cd\u4f5c\u5355\u72ec\u653e\u5230reducers\u6587\u4ef6\u5939\u4e0b\u7684index.js\u6587\u4ef6\u4e2d<\/span> const<\/span> allReducers =<\/span> combineReducers<\/span>(<\/span>{ \n     <\/span> \/\/ aReducer\u4e2d\u7684\u6570\u5b57\uff0c\u5728store\u72b6\u6001\u4e2d\u7528a\u5c5e\u6027\u4fdd\u5b58<\/span> a<\/span>:<\/span> aReducer,<\/span> \/\/ bReducer\u4e2d\u7684\u6570\u7ec4\uff0c\u5728store\u72b6\u6001\u4e2d\u7528b\u5c5e\u6027\u4fdd\u5b58<\/span> b<\/span>:<\/span> bReducer }<\/span>)<\/span> export<\/span> default<\/span> createStore<\/span>(<\/span>allReducers,<\/span> applyMiddleware<\/span>(<\/span>thunk)<\/span>)<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            constant.js<\/p>\n
                                                                                                                                                                                                                                                            export<\/span> const<\/span> ADD<\/span> =<\/span> 'add'<\/span> export<\/span> const<\/span> PUSH<\/span> =<\/span> 'push'<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            a_action.js<\/p>\n
                                                                                                                                                                                                                                                            import<\/span> { \n     <\/span> ADD<\/span> }<\/span> from<\/span> \"..\/constant\"<\/span>;<\/span> export<\/span> const<\/span> createAddAction<\/span> =<\/span> data<\/span> =><\/span> (<\/span>{ \n     <\/span> type<\/span>:<\/span> ADD<\/span>,<\/span> data }<\/span>)<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            b_action.js<\/p>\n
                                                                                                                                                                                                                                                            import<\/span> { \n     <\/span> PUSH<\/span> }<\/span> from<\/span> \"..\/constant\"<\/span>;<\/span> export<\/span> const<\/span> createPushAction<\/span> =<\/span> data<\/span> =><\/span> (<\/span>{ \n     <\/span> type<\/span>:<\/span> PUSH<\/span>,<\/span> data }<\/span>)<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            \u5bb9\u5668\u7ec4\u4ef6 A.jsx<\/p>\n
                                                                                                                                                                                                                                                            import React, { Component } from \"react\"; import { connect } from \"react-redux\"; import { createAddAction } from \"..\/..\/redux\/actions\/a_action\"; import { createPushAction } from \"..\/..\/redux\/actions\/b_action\"; class A extends Component { render() { console.log(\"a-props:\", this.props); return ( <div> <h1>\u6211\u662fA\u7ec4\u4ef6\uff0c\u6211\u7684\u6c42\u548c\u7ed3\u679c\u4e3a{this.props.state.a}<\/h1> <button onClick={() => { \/\/ \u64cd\u4f5cB\u7ec4\u4ef6\u7684\u72b6\u6001 this.props.push(\"item\"); }} > \u5411B\u7ec4\u4ef6\u6570\u7ec4\u6dfb\u52a0\u5143\u7d20 <\/button> <\/div> ); } } export default connect( \/\/ \u8fd9\u91cc\u7684\u53c2\u6570state\u5c31\u662fstore\u4e2d\u7684\u72b6\u6001\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u6574\u4e2astate\u4f20\u8fc7\u53bb\uff0c\u4e5f\u53ef\u4ee5\u53ea\u4f20store\u72b6\u6001\u4e2d\u7684\u90e8\u5206\u5c5e\u6027 (state) => ({ state }), \/\/ \u5411UI\u7ec4\u4ef6\u4f20\u9012\u64cd\u4f5c\u72b6\u6001\u7684\u65b9\u6cd5 { add: createAddAction, push: createPushAction } )(A); <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                          • \n
                                                                                                                                                                                                                                                            \u5bb9\u5668\u7ec4\u4ef6 B.jsx<\/p>\n
                                                                                                                                                                                                                                                            import React, { Component } from \"react\"; import { connect } from \"react-redux\"; import { createAddAction } from \"..\/..\/redux\/actions\/a_action\"; import { createPushAction } from \"..\/..\/redux\/actions\/b_action\"; class B extends Component { render() { console.log(\"b-props:\", this.props); return ( <div> <h1>\u6211\u662fB\u7ec4\u4ef6\uff0c\u6211\u7684\u6570\u7ec4\u5143\u7d20\u4e3a{this.props.state.b}<\/h1> <button onClick={() => { \/\/ \u64cd\u4f5cA\u7ec4\u4ef6\u7684\u72b6\u6001 this.props.add(1); }} > A\u7ec4\u4ef6\u7ed3\u679c+1 <\/button> <\/div> ); } } \/\/ (state) => ({ state }) \u76f8\u5f53\u4e8e\uff1a(state) => (state: state)\uff0c\u8fd9\u91cc\u662f\u952e\u503c\u5bf9\u540c\u540d\u65f6\u7684\u7b80\u5316\u5199\u6cd5\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u7528\u5176\u4ed6\u7684\u952e\u540d\u6765\u4f20\u9012 export default connect((state) => ({ state }), { add: createAddAction, push: createPushAction, })(B); <\/code><\/pre>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                            Redux\u5f00\u53d1\u8005\u5de5\u5177<\/h3>\n
                                                                                                                                                                                                                                                            \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                                                            \u5b89\u88c5\u6b65\u9aa4\uff1a<\/p>\n
                                                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                                                            1. \n
                                                                                                                                                                                                                                                              \u5728\u6d4f\u89c8\u5668\u4e2d\u5b89\u88c5 Redux-DevTools \u63d2\u4ef6<\/p>\n<\/li>\n
                                                                                                                                                                                                                                                            2. \n
                                                                                                                                                                                                                                                              \u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u63d2\u4ef6\u6269\u5c55\uff1anpm i redux-devtools-extension<\/p>\n<\/li>\n
                                                                                                                                                                                                                                                            3. \n
                                                                                                                                                                                                                                                              \u5728 store.js \u4e2d\u5bf9\u63d2\u4ef6\u8fdb\u884c\u652f\u6301<\/p>\n
                                                                                                                                                                                                                                                              \/\/ \u5f15\u5165composeWithDevTools<\/span> import<\/span> { \n     <\/span> composeWithDevTools }<\/span> from<\/span> \"redux-devtools-extension\"<\/span>;<\/span> \/\/ \u5c06composeWithDevTools\u4f5c\u4e3acreateStore\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4f20\u9012\u5e76\u8c03\u7528<\/span> export<\/span> default<\/span> createStore<\/span>(<\/span>allReducers,<\/span> composeWithDevTools<\/span>(<\/span>)<\/span>)<\/span> \/\/ \u5982\u679c\u4e4b\u524d\u5df2\u7ecf\u6709\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u5219\u5c06\u4e4b\u524d\u7684\u53c2\u6570\u4f5c\u4e3acomposeWithDevTools\u7684\u53c2\u6570<\/span> \/\/ export default createStore(allReducers, composeWithDevTools(applyMiddleware(thunk))) <\/span> <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                              \u7ec4\u4ef6\u901a\u4fe1\u65b9\u5f0f\u603b\u7ed3<\/h2>\n
                                                                                                                                                                                                                                                              \u7ec4\u4ef6\u95f4\u7684\u5173\u7cfb\uff1a<\/strong><\/p>\n
                                                                                                                                                                                                                                                                \n
                                                                                                                                                                                                                                                              • \u7236\u5b50\u7ec4\u4ef6<\/li>\n
                                                                                                                                                                                                                                                              • \u5144\u5f1f\u7ec4\u4ef6\uff08\u975e\u5d4c\u5957\u7ec4\u4ef6\uff09<\/li>\n
                                                                                                                                                                                                                                                              • \u7956\u5b59\u7ec4\u4ef6\uff08\u8de8\u7ea7\u7ec4\u4ef6\uff09<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                \u5e38\u7528\u901a\u4fe1\u65b9\u5f0f\uff1a<\/strong><\/p>\n
                                                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                                                1. props\n
                                                                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                                                                  • children props<\/li>\n
                                                                                                                                                                                                                                                                  • render props<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                                                  • \u6d88\u606f\u8ba2\u9605\u4e0e\u53d1\u5e03\n
                                                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                                                    • pubsub<\/li>\n
                                                                                                                                                                                                                                                                    • event<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                                                    • \u72b6\u6001\u96c6\u4e2d\u5f0f\u7ba1\u7406\n
                                                                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                                                                      • redux<\/li>\n
                                                                                                                                                                                                                                                                      • dva<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                                                      • context<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                        \u901a\u4fe1\u65b9\u5f0f\u9009\u62e9\uff1a<\/strong><\/p>\n
                                                                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                                                                        • \u7236\u5b50\u7ec4\u4ef6\uff1aprops<\/li>\n
                                                                                                                                                                                                                                                                        • \u5144\u5f1f\u7ec4\u4ef6\uff1a\u6d88\u606f\u8ba2\u9605\u4e0e\u53d1\u5e03\u3001\u72b6\u6001\u96c6\u4e2d\u5f0f\u7ba1\u7406<\/li>\n
                                                                                                                                                                                                                                                                        • \u8de8\u7ea7\u7ec4\u4ef6\uff1a\u6d88\u606f\u8ba2\u9605\u4e0e\u53d1\u5e03\u3001\u72b6\u6001\u96c6\u4e2d\u5f0f\u7ba1\u7406\u3001context\uff08\u5f00\u53d1\u4e2d\u8f83\u5c11\u4f7f\u7528\uff09<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                          \u9879\u76ee\u6253\u5305\u8fd0\u884c<\/h2>\n
                                                                                                                                                                                                                                                                          \u6253\u5305\uff1a<\/p>\n
                                                                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                                                                          1. \u505c\u6b62 react \u7a0b\u5e8f<\/li>\n
                                                                                                                                                                                                                                                                          2. npm run build<\/li>\n
                                                                                                                                                                                                                                                                          3. \u751f\u6210 build \u6587\u4ef6\u5939<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                            \u8fd0\u884c\uff1a<\/p>\n
                                                                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                                                                            • \u751f\u4ea7\u73af\u5883\u4e2d\uff0c\u80af\u5b9a\u662f\u5c06\u6253\u5305\u540e\u7684\u6587\u4ef6\u653e\u5230\u540e\u53f0\u670d\u52a1\u8fd0\u884c<\/li>\n
                                                                                                                                                                                                                                                                            • \u5982\u679c\u8981\u5728\u6211\u4eec\u81ea\u5df1\u7535\u8111\u4e0a\u8981\u6a21\u62df\u4e00\u4e2a\u670d\u52a1\u7684\u8bdd\uff0c\u53ef\u4ee5\u4f7f\u7528 serve \u5305\uff1anpm i serve -g<\/li>\n
                                                                                                                                                                                                                                                                            • \u6267\u884c\u547d\u4ee4\uff1a\u8fdb\u5165 build \u6587\u4ef6\u5939\uff0c\u6267\u884c serve\uff1b\u6216\u8005\u5728 build \u7684\u4e0a\u7ea7\u76ee\u5f55\uff0c\u6267\u884c serve build<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                              React\u6269\u5c55<\/h2>\n
                                                                                                                                                                                                                                                                              setState<\/h3>\n
                                                                                                                                                                                                                                                                              \u6dfb\u52a0\u56de\u8c03\u51fd\u6570<\/h4>\n
                                                                                                                                                                                                                                                                                \n
                                                                                                                                                                                                                                                                              • setState(newState, [callback])<\/code> \u53ef\u4ee5\u63a5\u6536\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u5373\u56de\u8c03\u51fd\u6570\uff0c\u5b83\u5728\u72b6\u6001\u66f4\u65b0\u5b8c\u6bd5\u4e14\u754c\u9762\u91cd\u65b0 render \u540e\u624d\u88ab\u8c03\u7528<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                                import React, { Component } from \"react\"; export default class SetState extends Component { state = { count: 0 }; \/* add = () => { \/\/ \u4fee\u6539\u72b6\u6001 this.setState({ count: this.state.count + 1 }); \/\/ \u6253\u5370\u4fee\u6539\u540e\u7684\u72b6\u6001\u503c console.log(this.state.count); \/\/ \u56e0\u4e3asetState\u662f\u5f02\u6b65\u8c03\u7528\u7684\uff0c\u6240\u4ee5\u8fd9\u91cc\u6253\u5370\u7684\u6c38\u8fdc\u662f\u4fee\u6539\u524d\u7684\u72b6\u6001 }; *\/ add = () => { \/\/ \u6dfb\u52a0\u56de\u8c03\u51fd\u6570 this.setState({ count: this.state.count + 1 }, () => { console.log(this.state.count); \/\/ \u56e0\u4e3a\u662f\u72b6\u6001\u66f4\u65b0\u5b8c\u6bd5\u540e\u6267\u884c\uff0c\u6240\u4ee5\u6253\u5370\u7684\u662f\u4fee\u6539\u540e\u7684\u72b6\u6001\u503c }); }; render() { return ( <div> <h2>Count\u503c\u4e3a{this.state.count}<\/h2> <button onClick={this.add}>\u70b9\u6211+1<\/button> <\/div> ); } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                \u63a5\u6536\u539fstate\u548cprops<\/h4>\n
                                                                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                                                                • setState(fn(preState, props), [callback])<\/code>\uff1a\u8c03\u7528 setState \u65f6\u53ef\u4ee5\u4e0d\u76f4\u63a5\u4f20\u65b0\u7684 state \u5bf9\u8c61\uff0c\u800c\u662f\u4f20\u9012\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u53ef\u4ee5\u63a5\u6536\u539f state \u72b6\u6001\u548c props \u5bf9\u8c61\uff0c\u4e14\u8fd4\u56de\u503c\u5c31\u662f\u8981\u4fee\u6539\u7684\u72b6\u6001\u503c<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                                  import React, { Component } from \"react\"; export default class SetState extends Component { state = { count: 0 }; add = () => { this.setState((state, props) => { \/\/ \u4ece\u539f\u72b6\u6001\u4e2d\u53d6\u51facount+1\u540e\uff0c\u5c01\u88c5\u4e3a\u5bf9\u8c61\u8fd4\u56de return { count: state.count + 1 }; }); }; render() { return ( <div> <h2>Count\u503c\u4e3a{this.state.count}<\/h2> <button onClick={this.add}>\u70b9\u6211+1<\/button> <\/div> ); } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                  lazyLoad<\/h3>\n
                                                                                                                                                                                                                                                                                  lazyLoad \u4e00\u822c\u7528\u4e8e\u8def\u7531\u7684\u61d2\u52a0\u8f7d<\/p>\n
                                                                                                                                                                                                                                                                                  \u5f53\u6211\u4eec\u4f7f\u7528\u8def\u7531\u540e\u7b2c\u4e00\u6b21\u8bbf\u95ee\u9875\u9762\u65f6\uff0c\u4f1a\u4e00\u6b21\u6027\u628a\u6240\u6709\u8d44\u6e90\u90fd\u8bf7\u6c42\u8fc7\u6765\uff0c\u7136\u540e\u5728\u5207\u6362\u8def\u7531\u7684\u65f6\u5019\u4e0d\u4f1a\u518d\u6b21\u8bf7\u6c42\u8d44\u6e90<\/p>\n
                                                                                                                                                                                                                                                                                  \u6211\u4eec\u5e0c\u671b\u7684\u662f\u5207\u6362\u5230\u54ea\u4e2a\u8def\u7531\uff0c\u5c31\u53bb\u8bf7\u6c42\u54ea\u4e2a\u7ec4\u4ef6\u7684\u8d44\u6e90<\/p>\n
                                                                                                                                                                                                                                                                                  \/\/ \u5f15\u5165lazy\u548cSuspense import React, { Component, lazy, Suspense } from \"react\"; \/\/ \u5f15\u5165Loading\u7ec4\u4ef6\uff0c\u5fc5\u987b\u5199\u5230\u61d2\u52a0\u8f7d\u7ec4\u4ef6\u7684\u4e0a\u9762 import Loading from \".\/component\/Loading\"; \/\/ \u61d2\u52a0\u8f7d\u5f0f\u5f15\u5165\u7ec4\u4ef6\uff0c\u6240\u6709\u61d2\u52a0\u8f7d\u7ec4\u4ef6\u8d44\u6e90\u90fd\u4f1a\u88ab\u5206\u522b\u6253\u5305 const Home = lazy(() => import('.\/component\/Home')) const About = lazy(() => import('.\/component\/About')) \/\/ \u4f7f\u7528Suspense\u7ec4\u4ef6\u5305\u88f9\u8def\u7531\u7ec4\u4ef6\uff0c\u6307\u5b9a\u5728\u52a0\u8f7d\u5f97\u5230\u8def\u7531\u6253\u5305\u6587\u4ef6\u524d\u663e\u793a\u4e00\u4e2a\u81ea\u5b9a\u4e49Loading\u7ec4\u4ef6 <Suspense fallback={<Loading \/>}> <Route path=\"\/about\" component={About}><\/Route> <Route path=\"\/home\" component={Home}><\/Route> <\/Suspense> <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                  Hooks<\/h3>\n
                                                                                                                                                                                                                                                                                  Hook \u662f React 16.8.0 \u7248\u672c\u589e\u52a0\u7684\u65b0\u7279\u6027 \/ \u65b0\u8bed\u6cd5<\/p>\n
                                                                                                                                                                                                                                                                                  \u53ef\u4ee5\u8ba9\u4f60\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u4f7f\u7528 state \u4ee5\u53ca\u5176\u4ed6\u7684 React \u7279\u6027<\/p>\n
                                                                                                                                                                                                                                                                                  State Hook<\/h4>\n
                                                                                                                                                                                                                                                                                  State Hook \u8ba9\u51fd\u6570\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u6709 state \u72b6\u6001\uff0c\u5e76\u8fdb\u884c\u72b6\u6001\u6570\u636e\u7684\u8bfb\u5199\u64cd\u4f5c<\/p>\n
                                                                                                                                                                                                                                                                                  \u8bed\u6cd5\uff1aconst [xxx, setXxx] = React.useState(initValue) <\/code><\/p>\n
                                                                                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                                                                                  • useState(initValue)<\/code> \u8bf4\u660e\uff1a\n
                                                                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                                                                    • initValue \u662f state \u7684\u521d\u59cb\u5316\u503c\uff0c\u5e76\u4e14\u4f1a\u5728\u5185\u90e8\u4f5c\u7f13\u5b58\uff0c\u5373\u4f7f\u4fee\u6539 state \u540e\u5f15\u8d77\u89c6\u56fe\u6e32\u67d3\u5bfc\u81f4\u518d\u6b21\u6267\u884c\u5230 useState \u7684\u65f6\u5019\u5e76\u4e0d\u4f1a\u91cd\u65b0\u521d\u59cb\u5316 state<\/li>\n
                                                                                                                                                                                                                                                                                    • \u8fd4\u56de\u503c\uff1a\u5305\u542b 2 \u4e2a\u5143\u7d20\u7684\u6570\u7ec4 \u2014\u2014 \u7b2c1\u4e2a\u5143\u7d20\u4e3a\u5f53\u524d\u72b6\u6001\u503c\uff0c\u7b2c 2 \u4e2a\u4e3a\u66f4\u65b0\u6b64\u72b6\u6001\u503c\u7684\u51fd\u6570<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                                                                                                                    • setXxx()<\/code> \u7684 2 \u79cd\u5199\u6cd5:\n
                                                                                                                                                                                                                                                                                        \n
                                                                                                                                                                                                                                                                                      • setXxx(newValue)<\/code>\uff1a\u53c2\u6570\u4e3a\u975e\u51fd\u6570\u503c\uff0c\u76f4\u63a5\u6307\u5b9a\u65b0\u7684\u72b6\u6001\u503c\uff0c\u5185\u90e8\u7528\u5176\u8986\u76d6\u539f\u6765\u7684\u72b6\u6001\u503c<\/li>\n
                                                                                                                                                                                                                                                                                      • setXxx(value => newValue)<\/code>\uff1a\u53c2\u6570\u4e3a\u51fd\u6570\uff0c\u63a5\u6536\u539f\u672c\u7684\u72b6\u6001\u503c\uff0c\u8fd4\u56de\u65b0\u7684\u72b6\u6001\u503c\uff0c\u5185\u90e8\u7528\u5176\u8986\u76d6\u539f\u6765\u7684\u72b6\u6001\u503c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                                        import React from \"react\"; export default function Demo() { \/\/ \u6709\u51e0\u4e2a\u72b6\u6001\uff0c\u5c31\u8981\u5199\u51e0\u4e2auseState \/\/ \u5e76\u4e0d\u80fd\u76f4\u63a5\u7528\u4e00\u4e2a\u5bf9\u8c61\u6765\u7ba1\u7406\u72b6\u6001\uff0c\u56e0\u4e3a\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5\u4f1a\u76f4\u63a5\u628a\u6574\u4e2a\u5bf9\u8c61\u66ff\u6362\u6389\uff0c\u800c\u4e0d\u662f\u53ea\u66ff\u6362\u6389\u5bf9\u8c61\u4e2d\u7684\u67d0\u4e2a\u5c5e\u6027 const [count, setCount] = React.useState(0); const [name, setName] = React.useState(\"zhangsan\"); function changeCount() { setCount(count + 1); } function changeName() { setName(\"lisi\"); } return ( <div> <h2>\u5f53\u524dCount\u4e3a{count}<\/h2> <h2>\u6211\u7684Name\u4e3a{name}<\/h2> <button onClick={changeCount}>\u70b9\u6211\u4fee\u6539Count<\/button> <button onClick={changeName}>\u70b9\u6211\u4fee\u6539Name<\/button> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        Effect Hook<\/h4>\n
                                                                                                                                                                                                                                                                                        Effect Hook \u53ef\u4ee5\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6a21\u62df\u751f\u547d\u5468\u671f\u94a9\u5b50\uff0c\u5305\u542b componentDidMount\u3001componentDidUpdate\u3001componentWillUnmount<\/p>\n
                                                                                                                                                                                                                                                                                        \u8bed\u6cd5\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                        React.<\/span>useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> { \n   <\/span> \/\/ \u6b64\u5904\u4ee3\u7801\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u4f1a\u6267\u884c\u4e00\u6b21\uff0c\u5373componentDidMount<\/span> \/\/ \u6b64\u5904\u4ee3\u7801\u8fd8\u4f1a\u5728useEffect()\u4f20\u5165\u7684\u7b2c\u4e8c\u4e2a\u6570\u7ec4\u53c2\u6570\u4e2d\u7684\u72b6\u6001\u6539\u53d8\u65f6\u4f1a\u6267\u884c\u4e00\u6b21\uff0c\u5373componentDidUpdate<\/span> return<\/span> (<\/span>)<\/span> =><\/span> { \n   <\/span> \/\/ \u6b64\u5904\u4ee3\u7801\u5728\u7ec4\u4ef6\u5c06\u8981\u5378\u8f7d\u65f6\u6267\u884c\u4e00\u6b21\uff0c\u5373componentWillUnmount<\/span> }<\/span> }<\/span>,<\/span> [<\/span>state1,<\/span> state2]<\/span>)<\/span> <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        \u4f7f\u7528\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                        import React from \"react\"; import ReactDOM from \"react-dom\"; export default function Demo() { const [count, setCount] = React.useState(0); const [name, setName] = React.useState(\"zhangsan\"); React.useEffect(() => { console.log(\"AAA\"); return () => { console.log(\"BBB\"); }; }, [count]); \/\/ \u53ea\u76d1\u542ccount\u72b6\u6001 function changeCount() { setCount((count) => count + 1); } function changeName() { setName(\"lisi\"); } function unmount() { \/\/ \u5378\u8f7d\u6302\u8f7d\u5230root\u4e0a\u7684\u7ec4\u4ef6 ReactDOM.unmountComponentAtNode(document.getElementById(\"root\")); } return ( <div> <h2>\u5f53\u524dcount\u4e3a{count}<\/h2> <h2>\u6211\u7684Name\u4e3a{name}<\/h2> <button onClick={changeCount}>\u70b9\u6211\u4fee\u6539Count<\/button> <button onClick={changeName}>\u70b9\u6211\u4fee\u6539Name<\/button> <button onClick={unmount}>\u70b9\u6211\u5378\u8f7d\u7ec4\u4ef6<\/button> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        Ref Hook<\/h4>\n
                                                                                                                                                                                                                                                                                        Ref Hook \u53ef\u4ee5\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u5b58\u50a8 \/ \u67e5\u627e\u7ec4\u4ef6\u5185\u7684\u6807\u7b7e\u6216\u4efb\u610f\u5176\u5b83\u6570\u636e\uff0c\u4e0e\u4e4b\u524d\u8bb2\u7684 createRef \u529f\u80fd\u662f\u4e00\u6837\u7684<\/p>\n
                                                                                                                                                                                                                                                                                        import React from \"react\"; export default function Demo() { \/\/ \u521b\u5efa\u5bb9\u5668 const myRef = React.useRef(); function show() { console.log(myRef.current.value); } return ( <div> {\/* \u5c06\u8be5\u8282\u70b9\u4fdd\u5b58\u5230\u5bb9\u5668 *\/} <input type=\"text\" ref={myRef} \/> <button onClick={show}>\u70b9\u6211\u5c55\u793a\u8f93\u5165\u6846\u5185\u5bb9<\/button> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        Fragment<\/h3>\n
                                                                                                                                                                                                                                                                                        <Fragment><\/code> \u6807\u7b7e\u4e0d\u4f1a\u88ab\u89e3\u6790\u5230\u9875\u9762\u4e0a\uff0c\u53ea\u80fd\u63a5\u6536\u4e00\u4e2a key<\/code> \u5c5e\u6027\u7528\u4e8e\u904d\u5386<\/p>\n
                                                                                                                                                                                                                                                                                        \/\/ \u5f15\u5165Fragment\u6807\u7b7e import React, { Component, Fragment } from 'react' import Demo from '.\/components\/HookDemo' export default class App extends Component { render() { return ( \/\/ \u56e0\u4e3a\u6b64\u5904\u53ea\u80fd\u6709\u4e00\u4e2a\u6839\u6807\u7b7e\uff0c\u5982\u679c\u7528div\u7684\u8bdd\u53c8\u89c9\u5f97\u591a\u4f59\uff0c\u6240\u4ee5\u53ef\u4ee5\u4f7f\u7528Fragment <Fragment key={1}> <Demo \/> <\/Fragment> ) } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        context<\/h3>\n
                                                                                                                                                                                                                                                                                        context \u662f\u4e00\u79cd\u3010\u7956\u7ec4\u4ef6\u3011\u4e0e\u3010\u540e\u4ee3\u7ec4\u4ef6\u3011\u4e4b\u95f4\u7684\u901a\u4fe1\u65b9\u5f0f<\/p>\n
                                                                                                                                                                                                                                                                                        \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js <\/p>\n
                                                                                                                                                                                                                                                                                        import React, { Component } from \"react\"; \/\/ 1. \u9996\u5148\u8981\u521b\u5efaContext const myContext = React.createContext(); \/\/ 2. \u4eceContext\u4e2d\u53d6\u51faProvider\u7ec4\u4ef6 const { Provider } = myContext; export default class A extends Component { state = { name: \"tom\" }; render() { return ( <div> <h2>\u6211\u662fA\u7ec4\u4ef6\uff0c\u6211\u7684\u7528\u6237\u540d\u662f\uff1a<\/h2> {\/* 3. \u5c06name\u4f20\u9012\u7ed9\u6240\u6709\u5b50\u7ec4\u4ef6 *\/} <Provider value={this.state.name}> <B \/> <\/Provider> <\/div> ); } } class B extends Component { render() { \/\/ \u4e0d\u58f0\u660e\u662f\u53d6\u4e0d\u5230\u7684 console.log(this.context) \/\/ undefined return ( <div> <h2>\u6211\u662fB\u7ec4\u4ef6<\/h2> <C \/> <\/div> ); } } \/\/ \u7b2c\u4e00\u79cd\u4f7f\u7528\u65b9\u5f0f\uff0c\u53ea\u9002\u7528\u4e8e\u7c7b\u7ec4\u4ef6\uff1a class C extends Component { \/\/ \u5148\u58f0\u660e\uff0c\u8868\u793a\u6211\u9700\u8981\u4f7f\u7528Context static contextType = myContext; render() { return ( <div> <h2>\u6211\u662fC\u7ec4\u4ef6<\/h2> {\/* \u4f7f\u7528this.context\u83b7\u53d6\u7956\u7ec4\u4ef6\u4f20\u9012\u7684\u503c *\/} <h2>\u6211\u4eceA\u7ec4\u4ef6\u63a5\u6536\u5230\u7684\u7528\u6237\u540d\u662f\uff1a{this.context}<\/h2> <\/div> ); } } \/\/ \u7b2c\u4e8c\u79cd\u4f7f\u7528\u65b9\u5f0f\uff0c\u9002\u7528\u4e8e\u7c7b\u7ec4\u4ef6\u548c\u51fd\u6570\u7ec4\u4ef6 \/\/ \u4eceContext\u4e2d\u83b7\u53d6Consumer\u7ec4\u4ef6 const { Consumer } = myContext; function C() { return ( \/\/ \u4f7f\u7528Consumer\u7ec4\u4ef6\u5305\u88f9 <Consumer> {\/* value\u503c\u5c31\u662f\u7956\u7ec4\u4ef6\u4f20\u9012\u7684\u503c *\/} {(value) => { return ( <div> <h2>\u6211\u662fC\u7ec4\u4ef6<\/h2> <h2>\u6211\u4eceA\u7ec4\u4ef6\u63a5\u6536\u5230\u7684\u7528\u6237\u540d\u662f{value}<\/h2> <\/div> ); }} <\/Consumer> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                        React.Component\u4f18\u5316<\/h3>\n
                                                                                                                                                                                                                                                                                        React.Component \u5b58\u5728\u4e24\u4e2a\u95ee\u9898\uff0c\u4f1a\u5f71\u54cd\u6548\u7387\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          \n
                                                                                                                                                                                                                                                                                        1. \u53ea\u8981\u6267\u884c\u4e86 setState()\uff0c\u5373\u4f7f\u4e0d\u6539\u53d8\u72b6\u6001\u6570\u636e, \u7ec4\u4ef6\u4e5f\u4f1a\u91cd\u65b0 render<\/li>\n
                                                                                                                                                                                                                                                                                        2. \u53ea\u5f53\u524d\u7ec4\u4ef6\u91cd\u65b0 render()\uff0c\u5c31\u4f1a\u81ea\u52a8\u91cd\u65b0 render \u5b50\u7ec4\u4ef6\uff0c\u7eb5\u4f7f\u5b50\u7ec4\u4ef6\u6ca1\u6709\u7528\u5230\u7236\u7ec4\u4ef6\u7684\u4efb\u4f55\u6570\u636e<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                                          \u4ea7\u751f\u8fd9\u4e24\u4e2a\u95ee\u9898\u7684\u539f\u56e0\u662f\u56e0\u4e3a\uff1a\u63a7\u5236\u9875\u9762\u5237\u65b0\u7684 shouldComponentUpdate() \u51fd\u6570\u603b\u662f\u8fd4\u56de true<\/p>\n
                                                                                                                                                                                                                                                                                          \u4e3a\u4e86\u63d0\u9ad8\u6548\u7387\uff0c\u6211\u4eec\u5e0c\u671b\u53ea\u6709\u5f53\u7ec4\u4ef6\u7684 state \u6216 props \u53d1\u751f\u6539\u53d8\u65f6\uff0cshouldComponentUpdate \u51fd\u6570\u624d\u8fd4\u56de true\uff0c\u5177\u4f53\u5b9e\u73b0\u4e3a\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          import React, { Component } from \"react\"; export default class Parent extends Component { state = { car: \"BMW\" }; \/\/ \u91cd\u65b0shouldComponentUpdate\u65b9\u6cd5\uff0c\u6bd4\u8f83\u72b6\u6001\u662f\u5426\u771f\u7684\u6539\u53d8\u4e86\uff0c\u53ea\u6709\u6539\u53d8\u65f6\u624d\u8fd4\u56detrue shouldComponentUpdate(nextProps, nextState) { return !(this.state.car === nextState.car); } render() { return ( <div> <h1>\u6211\u7684\u5ea7\u9a7e\uff1a{this.state.car}<\/h1> <button onClick={() => { \/\/ \u6267\u884c\u4e86setState()\u65b9\u6cd5\uff0c\u4f46\u662f\u6ca1\u6709\u4fee\u6539\u72b6\u6001 this.setState({}); }} > \u70b9\u6211\u6362\u8f66 <\/button> <Child car={this.state.car} \/> <\/div> ); } } class Child extends Component { \/\/ \u5b50\u7ec4\u4ef6\u9700\u8981\u6bd4\u8f83props shouldComponentUpdate(nextProps, nextState) { return !(this.props.car === nextProps.car); } render() { return <h1>\u6211\u7238\u7238\u7684\u5ea7\u9a7e\uff1a{this.props.car}<\/h1>; } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                          \u9664\u4e86\u624b\u52a8\u7f16\u5199 shouldComponentUpdate \u65b9\u6cd5\u5916\uff0cReact \u8fd8\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86 PureComponent<\/strong> \u7ec4\u4ef6\uff0c\u8be5\u7ec4\u4ef6\u5df2\u7ecf\u5e2e\u6211\u4eec\u7f16\u5199\u597d\u4e86 shouldComponentUpdate \u65b9\u6cd5\uff0c\u5b83\u4f1a\u5e2e\u6211\u4eec\u6bd4\u8f83 state \u548c props \u4e2d\u7684\u6240\u6709\u5c5e\u6027\uff0c\u4e0d\u9700\u8981\u6211\u4eec\u518d\u4e00\u4e2a\u4e00\u4e2a\u53bb\u6bd4\u8f83\u4e86<\/p>\n
                                                                                                                                                                                                                                                                                          \u9700\u8981\u6ce8\u610f\uff1aPureComponent \u5728\u6bd4\u8f83\u65f6\u4f7f\u7528\u7684\u662f\u6d45\u6bd4\u8f83<\/p>\n
                                                                                                                                                                                                                                                                                          import React, { Component, PureComponent } from \"react\"; export default class Parent extends Component { state = { car: \"BMW\" }; render() { return ( <div> <h1>\u6211\u7684\u5ea7\u9a7e\uff1a{this.state.car}<\/h1> <button onClick={() => { \/\/ \u8fd9\u91cc\u53ea\u662f\u5728\u539f\u6765\u7684state\u4e0a\u505a\u4fee\u6539\uff0c\u56e0\u6b64newState\u548cstate\u7684\u5730\u5740\u662f\u4e00\u6837\u7684 const newState = this.state; \/\/ \u5c06BMW\u66ff\u6362\u6210\u4e86Audi\uff0c\u7236\u5b50\u7ec4\u4ef6\u90fd\u5e94\u8be5\u91cd\u65b0\u6e32\u67d3 newState.car = \"Audi\"; this.setState(newState); }} > \u70b9\u6211\u6362\u8f66 <\/button> {\/* \u4e3a\u4e86\u9a8c\u8bc1\u6d45\u6bd4\u8f83\uff0c\u8fd9\u91cc\u5c31\u4e0d\u4f20this.state.car\u4e86\uff0c\u800c\u662f\u76f4\u63a5\u4f20this.state\uff0c\u8ba9PureComponent\u5bf9\u65b0\u65e7state\u5bf9\u8c61\u8fdb\u884c\u6bd4\u8f83 *\/} <Child car={this.state} \/> <\/div> ); } } \/\/ \u5b50\u7ec4\u4ef6\u7ee7\u627fPureComponent\uff0c\u5b83\u5df2\u7ecf\u5e2e\u6211\u4eec\u91cd\u5199\u597d\u4e86shouldComponentUpdate\u51fd\u6570\uff0c\u5b83\u5728\u6e32\u67d3\u524d\u4f1a\u81ea\u52a8\u5e2e\u6211\u4eec\u6d45\u6bd4\u8f83state\u548cprops \/\/ \u56e0\u4e3a\u662f\u6d45\u6bd4\u8f83\uff0cshouldComponentUpdate\u51fd\u6570\u76f8\u5f53\u4e8e\u8fd4\u56de\u4e86!(this.state === nextState)\uff0c\u6240\u4ee5\u8fd4\u56de\u7684\u662ffalse\uff0c\u4e0d\u4f1a\u91cd\u65b0\u6e32\u67d3\u9875\u9762 class Child extends PureComponent { render() { return <h1>Child<\/h1>; } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                          render props<\/h3>\n
                                                                                                                                                                                                                                                                                          \u6211\u4eec\u4e4b\u524d\u7f16\u5199\u7684\u7236\u5b50\u5173\u7cfb\u7ec4\u4ef6\uff0c\u4e00\u822c\u90fd\u662f\u5728\u7236\u7ec4\u4ef6\u4e2d\u5f15\u5165\u5b50\u7ec4\u4ef6\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          export default class A extends Component { render() { return ( \/\/ \u5728A\u7ec4\u4ef6\u4e2d\u5f15\u5165B\u7ec4\u4ef6\uff0cB\u5c31\u662fA\u7684\u5b50\u7ec4\u4ef6 <B \/> ); } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                          \u8fd8\u53ef\u4ee5\u4e0d\u5c06\u5b50\u7ec4\u4ef6\u5199\u5230\u7236\u7ec4\u4ef6\u4e2d\uff0c\u800c\u662f\u901a\u8fc7\u6807\u7b7e\u7684\u5d4c\u5957\u6765\u5b9e\u73b0\u7236\u5b50\u5173\u7cfb\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          import React, { Component, PureComponent } from \"react\"; export default class Parent extends Component { render() { return ( \/\/ A\u6807\u7b7e\u5305\u88f9B\u6807\u7b7e\uff0cB\u5c31\u662fA\u7684\u5b50\u7ec4\u4ef6 \/\/ B\u6807\u7b7e\u4f1a\u4f20\u5165\u5230A\u7ec4\u4ef6\u7684props\u4e2d <A> <B \/> <\/A> ); } } class A extends PureComponent { render() { return ( <div> \u6211\u662fA\u7ec4\u4ef6 {\/* \u6e32\u67d3B\u7ec4\u4ef6 *\/} {this.props.children} <\/div> ); } } class B extends PureComponent { render() { return <div>\u6211\u662fB\u7ec4\u4ef6<\/div>; } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                          \u9875\u9762\u6548\u679c\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          \"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.js<\/p>\n
                                                                                                                                                                                                                                                                                          \u867d\u7136\u8fd9\u79cd\u5199\u6cd5\u80fd\u591f\u5b9e\u73b0\u7236\u5b50\u5173\u7cfb\uff0c\u4f46\u662f A \u7ec4\u4ef6\u65e0\u6cd5\u4e3a B \u7ec4\u4ef6\u4f20\u503c\uff0c\u6b64\u65f6\u6211\u4eec\u9700\u8981\u501f\u52a9 render props<\/strong>\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                          render props \u7684\u597d\u5904\u662f\u6bd4\u8f83\u7075\u6d3b\uff0c\u4e0d\u518d\u5c06\u5b50\u7ec4\u4ef6\u5199\u6b7b\u5230\u7236\u7ec4\u4ef6\u4e2d\uff0c\u800c\u662f\u50cf Vue \u4e2d\u7684\u63d2\u69fd\u4e00\u6837\uff0c\u60f3\u8ba9\u8c01\u505a\u5b50\u7ec4\u4ef6\uff0c\u76f4\u63a5\u5c06\u5176\u5199\u5230\u63d2\u69fd\u4e2d\u5373\u53ef<\/p>\n
                                                                                                                                                                                                                                                                                          import React, { Component, PureComponent } from \"react\"; export default class Parent extends Component { render() { return ( <A \/\/ \u4e3aA\u7ec4\u4ef6\u7684props\u4f20\u9012render\u51fd\u6570\uff0c\u5e76\u63a5\u6536data\u53c2\u6570 render={(data) => { \/\/ \u8fd4\u56deB\u7ec4\u4ef6\uff0c\u5e76\u5c06data\u4f20\u9012\u81f3B\u7ec4\u4ef6\u7684props\u4e2d return <B data={data}><\/B>; \/\/ \u597d\u5904\uff1a\u8fd9\u79cd\u5199\u6cd5\u7684\u597d\u5904\u662f\uff0c\u6211\u4eec\u60f3\u8ba9\u8c01\u505aA\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff0c\u76f4\u63a5\u5728\u8fd9\u91ccreturn\u5c31\u884c\uff0c\u800c\u4e0d\u7528\u5199\u6b7b\u5230A\u7ec4\u4ef6\u5185\u90e8\uff0c\u6bd4\u8f83\u7075\u6d3b \/\/ \u8fd9\u79cd\u5199\u6cd5\u7c7b\u4f3c\u4e8eVue\u4e2d\u7684slot\u63d2\u69fd return <C data={data}><\/C>; }} \/> ); } } class A extends PureComponent { render() { return ( <div> \u6211\u662fA\u7ec4\u4ef6 {\/* \u8c03\u7528render\u51fd\u6570\uff0c\u5e76\u4f20\u9012\u53c2\u6570\uff0c\u6b64\u53c2\u6570\u4f1a\u4f20\u9012\u81f3B\u7ec4\u4ef6\u7684props\u4e2d *\/} {this.props.render(\"abc\")} <\/div> ); } } class B extends PureComponent { render() { return <div>\u6211\u662fB\u7ec4\u4ef6\uff0c\u6211\u4eceA\u7ec4\u4ef6\u63a5\u6536\u5230\u7684\u5185\u5bb9\u4e3a{this.props.data}<\/div>; } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                          \u9519\u8bef\u8fb9\u754c<\/h3>\n
                                                                                                                                                                                                                                                                                          \u9519\u8bef\u8fb9\u754c\uff08Error Boundary\uff09\uff1a\u6307\u9650\u5236\u9519\u8bef\u7684\u5f71\u54cd\u8303\u56f4<\/p>\n
                                                                                                                                                                                                                                                                                          \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u9875\u9762\u4e0a\u4efb\u4f55\u4e00\u4e2a\u7ec4\u4ef6\u62a5\u9519\uff0c\u6574\u4e2a\u9875\u9762\u90fd\u4f1a\u65e0\u6cd5\u6e32\u67d3\u3002\u6211\u4eec\u5e0c\u671b\u62a5\u9519\u7684\u7ec4\u4ef6\u4e0d\u8981\u5f71\u54cd\u5230\u5176\u4ed6\u7ec4\u4ef6\uff0c\u5e76\u5728\u81ea\u5df1\u7684\u4f4d\u7f6e\u5c55\u793a\u4e00\u6761\u63d0\u793a\u4fe1\u606f\uff0c\u5982 \u201c\u670d\u52a1\u5668\u7e41\u5fd9\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5 \u2026\u201d<\/p>\n
                                                                                                                                                                                                                                                                                          \u6ce8\u610f\uff1a\u9519\u8bef\u8fb9\u754c\u53ea\u80fd\u6355\u83b7\u540e\u4ee3\u7ec4\u4ef6<\/strong>\u7684\u751f\u547d\u5468\u671f\u51fd\u6570<\/strong>\u4e2d\u4ea7\u751f\u7684\u9519\u8bef\uff08render \u51fd\u6570\u5c5e\u4e8e\u751f\u547d\u5468\u671f\u51fd\u6570\uff09<\/p>\n
                                                                                                                                                                                                                                                                                          \u5b9e\u73b0\u9519\u8bef\u8fb9\u754c\u9700\u8981\u501f\u52a9\u4e24\u4e2a\u751f\u547d\u5468\u671f\u51fd\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                                                                                          • getDerivedStateFromError\uff1a\u53ea\u8981\u540e\u4ee3\u7ec4\u4ef6\u4e2d\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\u62a5\u9519\uff0c\u5c31\u4f1a\u89e6\u53d1\uff0c\u4e00\u822c\u7528\u4e8e\u4fee\u6539\u9519\u8bef\u6807\u8bc6\uff0c\u65b9\u4fbf\u5224\u65ad\u7ec4\u4ef6\u662f\u5426\u62a5\u9519<\/li>\n
                                                                                                                                                                                                                                                                                          • componentDidCatch\uff1a\u53ea\u8981\u540e\u4ee3\u7ec4\u4ef6\u4e2d\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\u62a5\u9519\uff0c\u5c31\u4f1a\u89e6\u53d1\uff0c\u4e00\u822c\u7528\u4e8e\u8bb0\u5f55\u9519\u8bef\u65e5\u5fd7\uff0c\u53cd\u9988\u670d\u52a1\u5668<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                                            import React, { Component } from \"react\"; export default class Parent extends Component { state = { hasError: false }; static getDerivedStateFromError(error) { \/\/ \u5728render\u4e4b\u524d\u89e6\u53d1 \/\/ \u8fd4\u56de\u7684\u5bf9\u8c61\u4f1a\u53bb\u4fee\u6539state return { hasError: true }; } componentDidCatch(error, info) { \/\/ \u7edf\u8ba1\u9875\u9762\u9519\u8bef\u4fe1\u606f console.log(error, info); } render() { return ( <div> \u6211\u662f\u7236\u7ec4\u4ef6 {\/* \u5982\u679c\u8be5\u7ec4\u4ef6\u62a5\u9519\uff0c\u5219\u5c55\u793a\u63d0\u793a\u8bed *\/} {this.state.hasError ? \"\u670d\u52a1\u5668\u7e41\u5fd9\uff0c\u8bf7\u7a0d\u5019\u518d\u8bd5...\" : <Child \/>} <\/div> ); } } class Child extends Component { render() { \/\/ \u968f\u4fbf\u8c03\u7528\u4e00\u4e2a\u4e0d\u5b58\u5728\u7684\u51fd\u6570\uff0c\u5f15\u53d1\u62a5\u9519 abc(); return <div>\u6211\u662f\u5b50\u7ec4\u4ef6<\/div>; } } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                            \n
                                                                                                                                                                                                                                                                                            \u6ce8\u610f\uff1a\u53ea\u6709\u9879\u76ee\u6253\u5305\u5e76\u653e\u5230\u670d\u52a1\u5668\u4e0a\u8fd0\u884c\u65f6\uff0c\u9519\u8bef\u8fb9\u754c\u624d\u4f1a\u8d77\u6548\u679c<\/p>\n<\/blockquote>\n
                                                                                                                                                                                                                                                                                            ReactRouter@6<\/h2>\n
                                                                                                                                                                                                                                                                                            \u4e0eRouter@5\u7248\u672c\u4e0d\u540c<\/h3>\n
                                                                                                                                                                                                                                                                                            ReactRouter@6 \u5220\u9664\u4e86 5 \u7248\u672c\u4e2d\u7684\u4e00\u4e9b\u6807\u7b7e\u548c\u5c5e\u6027\uff0c\u540c\u65f6\u65b0\u589e\u4e86\u4e00\u4e9b\u65b0\u6807\u7b7e\u548c\u65b0\u5c5e\u6027<\/p>\n
                                                                                                                                                                                                                                                                                              \n
                                                                                                                                                                                                                                                                                            • \u5220\u9664 <Switch><\/code> \u6807\u7b7e\uff0c\u53d6\u800c\u4ee3\u4e4b\u7684\u662f <Routes\/><\/code> \u6807\u7b7e<\/li>\n
                                                                                                                                                                                                                                                                                            • \u5220\u9664 component<\/code> \u5c5e\u6027\uff0c\u53d6\u800c\u4ee3\u4e4b\u7684\u662f element<\/code> \u5c5e\u6027<\/li>\n
                                                                                                                                                                                                                                                                                            • \u5220\u9664 activeClassName<\/code> \u5c5e\u6027<\/li>\n
                                                                                                                                                                                                                                                                                            • \u65b0\u589e <Navigate><\/code> \u6807\u7b7e<\/li>\n
                                                                                                                                                                                                                                                                                            • \u65b0\u589e caseSensitive<\/code> \u5c5e\u6027<\/li>\n
                                                                                                                                                                                                                                                                                            • \u65b0\u589e end<\/code> \u5c5e\u6027<\/li>\n
                                                                                                                                                                                                                                                                                            • \u2026<\/li>\n<\/ul>\n
                                                                                                                                                                                                                                                                                              import React from \"react\"; import { Route, NavLink, Routes, Navigate } from \"react-router-dom\"; import Home from \".\/component\/Home\"; import About from \".\/component\/About\"; export default function App() { return ( <div> <div className=\"row\"> <div className=\"col-xs-offset-2 col-xs-8\"> <div className=\"page-header\"><h2>React Router Demo<\/h2><\/div> <\/div> <\/div> <div className=\"row\"> <div className=\"col-xs-2 col-xs-offset-2\"> <div className=\"list-group\"> {\/* Navlink\u7ec4\u4ef6\u5728\u88ab\u9009\u4e2d\u65f6\u9ed8\u8ba4\u4f1a\u6dfb\u52a0'active'\u7c7b\u540d\uff0c\u5982\u679c\u60f3\u8981\u4fee\u6539\u7c7b\u540d\uff0c\u4e4b\u524d\u4f7f\u7528\u7684\u662factiveClassName\u5c5e\u6027 *\/} {\/* \u8def\u75316.x\u7248\u672c\u4e4b\u540e\u5220\u9664\u4e86\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5982\u679c\u60f3\u8981\u81ea\u5b9a\u4e49\u7c7b\u540d\uff0c\u9700\u8981\u8ba9className\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570 *\/} {\/* \u8fd9\u4e2a\u51fd\u6570\u63a5\u6536\u4e00\u4e2a\u5bf9\u8c61\uff1a{isActive: true\/false}\uff0c\u9009\u4e2d\u65f6isActive\u503c\u4e3atrue\uff0c\u672a\u9009\u4e2d\u65f6\u4e3afalse *\/} {\/* \u8be5\u5bf9\u8c61\u7684\u8fd4\u56de\u503c\u5c31\u662f\u6700\u7ec8\u7684\u7c7b\u540d *\/} {\/* \u9009\u4e2d\u65f6\u6dfb\u52a0'abc'\u7c7b\u540d\u3002\u6ce8\u610f\uff1a\u8fd9\u91cc\u5728\u63a5\u6536\u53c2\u6570\u65f6\u4f7f\u7528\u4e86\u89e3\u6784\u8d4b\u503c *\/} <NavLink className={({ isActive }) => isActive ? 'list-group-item abc' : 'list-group-item'} to=\"\/about\">about<\/NavLink> {\/* \u7ed9'\/home'\u8def\u7531\u6dfb\u52a0end\u5c5e\u6027\u540e\uff0c\u5f53'\/home'\u7684\u5b50\u8def\u7531\u6d3b\u8dc3\u65f6\uff0c\u4f1a\u5220\u9664'\/home'\u8def\u7531\u7684active\u7c7b\u540d *\/} <NavLink className=\"list-group-item\" end to=\"\/home\">home<\/NavLink> <\/div> <\/div> <div className=\"col-xs-6\"> <div className=\"panel\"> <div className=\"panel-body\"> {\/* Routes\u62e5\u6709\u4e4b\u524dSwitch\u6807\u7b7e\u7684\u6240\u6709\u529f\u80fd\uff0c\u5e76\u4e14Route\u6807\u7b7e\u5916\u5fc5\u987b\u5305\u88f9\u4e00\u4e2aRoutes *\/} <Routes > {\/* \u4e4b\u524d\u7684component={About}\u66ff\u6362\u4e3aelement={<About \/>} *\/} <Route path=\"\/about\" element={<About \/>}><\/Route> {\/* \u4e3aRoute\u6807\u7b7e\u6dfb\u52a0caseSensitive\u540e\uff0c\u5728\u5339\u914d\u8def\u7531\u8def\u5f84\u65f6\u4f1a\u533a\u5206\u5927\u5c0f\u5199 *\/} <Route caseSensitive path=\"\/Home\" element={<Home \/>}><\/Route> {\/* \u5f53\u8def\u7531\u4e3a'\/'\u65f6\uff0c\u6e32\u67d3Navigate\u7ec4\u4ef6\uff0c\u53ea\u8981Navigate\u7ec4\u4ef6\u4e00\u6e32\u67d3\uff0c\u5c31\u4f1a\u8df3\u5230\u5b83\u6307\u5b9a\u7684\u8def\u5f84 *\/} {\/* \u53ef\u4ee5\u4e3aNavigate\u6dfb\u52a0replace\u5c5e\u6027\u6307\u5b9a\u662f\u5426\u4f7f\u7528replace\u6a21\u5f0f\u8df3\u8f6c\uff0c\u9ed8\u8ba4\u4e3apush\u6a21\u5f0f *\/} <Route path=\"\/\" element={<Navigate to=\"\/about\" replace={true}><\/Navigate>}><\/Route> <\/Routes> <\/div> <\/div> <\/div> <\/div> <\/div> ) } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                              \u8def\u7531\u8868<\/h3>\n
                                                                                                                                                                                                                                                                                              \u4e4b\u524d\u5728\u5199\u8def\u7531\u7ec4\u4ef6\u7684\u65f6\u5019\uff0c\u4f1a\u4ea7\u751f\u8fd9\u6837\u7684\u4ee3\u7801\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                              <Routes > <Route path=\"\/about\" element={<About \/>}><\/Route> <Route caseSensitive path=\"\/Home\" element={<Home \/>}><\/Route> <Route path=\"\/xxx\" element={<Xxx \/>}><\/Route> <Route path=\"\/xxx\" element={<Xxx \/>}><\/Route> <Route path=\"\/xxx\" element={<Xxx \/>}><\/Route> <Route path=\"\/\" element={<Navigate to=\"\/about\" replace={true}><\/Navigate>}><\/Route> <\/Routes> <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                              \u6240\u6709\u7684\u8def\u7531\u90fd\u6324\u5728\u7ec4\u4ef6\u91cc\u9762\uff0c\u770b\u8d77\u6765\u5f88\u4e71\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u8def\u7531\u8868\uff0c\u628a\u4ed6\u4eec\u7edf\u4e00\u5230\u4e00\u4e2a js \u6587\u4ef6\u4e2d\u8fdb\u884c\u7ba1\u7406\uff0c\u9700\u501f\u52a9 useRoutes<\/code> \u65b9\u6cd5<\/p>\n
                                                                                                                                                                                                                                                                                                \n
                                                                                                                                                                                                                                                                                              1. \n
                                                                                                                                                                                                                                                                                                \u5728 src \u76ee\u5f55\u4e0b\u65b0\u5efa routes \u6587\u4ef6\u5939\uff0c\u5728\u91cc\u9762\u65b0\u5efa index.js\uff0c\u7f16\u5199\u8def\u7531\u8868\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                import<\/span> About from<\/span> '..\/component\/About'<\/span> import<\/span> Home from<\/span> '..\/component\/Home'<\/span> import<\/span> { \n     <\/span> Navigate }<\/span> from<\/span> 'react-router-dom'<\/span> export<\/span> default<\/span> [<\/span> { \n     <\/span> \/\/ \u8def\u7531\u8def\u5f84<\/span> path<\/span>:<\/span> '\/about'<\/span>,<\/span> \/\/ \u6620\u5c04\u5143\u7d20<\/span> element<\/span>:<\/span> <<\/span>About \/<\/span>><\/span> }<\/span>,<\/span> { \n     <\/span> path<\/span>:<\/span> '\/home'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Home \/<\/span>><\/span> }<\/span>,<\/span> { \n     <\/span> path<\/span>:<\/span> '\/'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Navigate to=<\/span>\"\/about\"<\/span> \/<\/span>><\/span> }<\/span> ]<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                              2. \n
                                                                                                                                                                                                                                                                                                \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u8def\u7531\u8868<\/p>\n
                                                                                                                                                                                                                                                                                                import React from \"react\"; import { NavLink, useRoutes } from \"react-router-dom\"; import routes from \".\/routes\"; export default function App() { \/\/ \u6839\u636e\u8def\u7531\u8868\uff0c\u751f\u6210\u8def\u7531\u89c4\u5219 const element = useRoutes(routes) return ( <div> <div className=\"row\"> <div className=\"col-xs-2 col-xs-offset-2\"> <div className=\"list-group\"> <NavLink className={({ isActive }) => isActive ? 'list-group-item abc' : 'list-group-item'} to=\"\/about\">about<\/NavLink> <NavLink className=\"list-group-item\" to=\"\/home\">home<\/NavLink> <\/div> <\/div> <div className=\"col-xs-6\"> <div className=\"panel\"> <div className=\"panel-body\"> {\/* \u4f7f\u7528\u8def\u7531\u8868\uff0c\u88ab\u6620\u5c04\u5230\u7684\u7ec4\u4ef6\u4f1a\u5c55\u793a\u5728\u8fd9\u91cc *\/} {element} <\/div> <\/div> <\/div> <\/div> <\/div> ) } <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                                                \u5d4c\u5957\u8def\u7531<\/h3>\n
                                                                                                                                                                                                                                                                                                \u6211\u4eec\u5728\u8def\u7531\u8868\u4e2d\u4e5f\u53ef\u4ee5\u7f16\u5199\u5d4c\u5957\u8def\u7531\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                import<\/span> About from<\/span> '..\/component\/About'<\/span> import<\/span> Home from<\/span> '..\/component\/Home'<\/span> import<\/span> News from<\/span> '..\/component\/Home\/News'<\/span> import<\/span> Message from<\/span> '..\/component\/Home\/Message'<\/span> import<\/span> { \n   <\/span> Navigate }<\/span> from<\/span> 'react-router-dom'<\/span> export<\/span> default<\/span> [<\/span> { \n   <\/span> path<\/span>:<\/span> '\/about'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>About \/<\/span>><\/span> }<\/span>,<\/span> { \n   <\/span> path<\/span>:<\/span> '\/home'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Home \/<\/span>><\/span>,<\/span> \/\/ \u7f16\u5199\u5d4c\u5957\u8def\u7531<\/span> children<\/span>:<\/span> [<\/span> { \n   <\/span> path<\/span>:<\/span> 'news'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>News \/<\/span>><\/span> }<\/span>,<\/span> { \n   <\/span> path<\/span>:<\/span> 'message'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Message \/<\/span>><\/span> }<\/span>,<\/span> ]<\/span> }<\/span>,<\/span> { \n   <\/span> path<\/span>:<\/span> '\/'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Navigate to=<\/span>\"\/about\"<\/span> \/<\/span>><\/span> }<\/span> ]<\/span> <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                \u4f7f\u7528\u5d4c\u5957\u8def\u7531\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                import React from \"react\"; \/\/ \u5f15\u5165Outlet\u7ec4\u4ef6 import { NavLink, Outlet } from \"react-router-dom\"; export default function Home() { return ( <div> <ul className=\"nav nav-tabs\"> <li> {\/* \u4f7f\u7528to\u5c5e\u6027\u6307\u5b9a\u8def\u7531\u8def\u5f84\u65f6\uff0c\u76f4\u63a5\u5199\u5b50\u8def\u7531\u7684\u8def\u5f84\u5373\u53ef\uff0c\u4e0d\u7528\u5199\u5168\u91cf\u8def\u5f84 *\/} <NavLink className=\"list-group-item\" to=\"news\"> news <\/NavLink> <\/li> <li> <NavLink className=\"list-group-item\" to=\"message\"> message <\/NavLink> <\/li> <\/ul> {\/* \u4f7f\u7528Outlet\u6307\u5b9a\u5d4c\u5957\u8def\u7531\u7ec4\u4ef6\u5448\u73b0\u7684\u4f4d\u7f6e *\/} <Outlet \/> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                \u4f20\u9012params\u53c2\u6570<\/h3>\n
                                                                                                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                                                                                                1. \n
                                                                                                                                                                                                                                                                                                  \u5728\u8def\u7531\u8def\u5f84\u4e2d\u63a5\u6536 params \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                  export<\/span> default<\/span> [<\/span> { \n     <\/span> path<\/span>:<\/span> '\/home'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Home \/<\/span>><\/span>,<\/span> children<\/span>:<\/span> [<\/span> { \n     <\/span> path<\/span>:<\/span> 'message'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Message \/<\/span>><\/span>,<\/span> children<\/span>:<\/span> [<\/span> { \n     <\/span> \/\/ \u58f0\u660e\u63a5\u6536name\u548cage\u53c2\u6570<\/span> path<\/span>:<\/span> 'item\/:name\/:age'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Item \/<\/span>><\/span> }<\/span> ]<\/span> }<\/span>,<\/span> ]<\/span> }<\/span>,<\/span> ]<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                                2. \n
                                                                                                                                                                                                                                                                                                  \u5728\u8def\u7531\u94fe\u63a5\u4e2d\u4f20\u9012 params \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                  import React, { Component } from \"react\"; import { Link, Outlet } from \"react-router-dom\"; export default class Message extends Component { render() { return ( <div> {\/* \u4f20\u9012params\u53c2\u6570 *\/} <Link to=\"item\/zhangsan\/18\">\u4f20\u9012\u53c2\u6570<\/Link> <hr \/> <Outlet \/> <\/div> ); } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                                3. \n
                                                                                                                                                                                                                                                                                                  \u5728\u8def\u7531\u7ec4\u4ef6\uff08\u51fd\u6570\u5f0f\u7ec4\u4ef6\uff09\u4e2d\u63a5\u6536 params \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                  import React, { Component } from \"react\"; import { useParams, useMatch } from \"react-router-dom\"; export default function Item() { \/\/ \u7b2c\u4e00\u79cd\u65b9\u5f0f\uff1a\u4f7f\u7528useParams\u63a5\u6536params\u53c2\u6570 const params = useParams(); console.log(params); \/\/ {name: 'zhangsan', age: '18'} \/\/ \u7b2c\u4e8c\u79cd\u65b9\u5f0f\uff1a\u4f7f\u7528useMatch\u5148\u83b7\u53d6match\u5bf9\u8c61\uff0c\u518d\u62ff\u5230params\u53c2\u6570\uff1b\u53c2\u6570\u9700\u8981\u5199\u5168\u91cf\u8def\u5f84\uff0c\u5e76\u58f0\u660e\u63a5\u6536\u53c2\u6570 const match = useMatch(\"\/home\/message\/item\/:name\/:age\"); console.log(match); \/\/ {params: {\u2026}, pathname: '\/home\/message\/item\/zhangsan\/18', pathnameBase: '\/home\/message\/item\/zhangsan\/18', pattern: {\u2026}} return ( <div> \u6211\u53eb{params.name}\uff0c\u6211\u4eca\u5e74{params.age}\u5c81 <\/div> ); } <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                                                  \u4f20\u9012search\u53c2\u6570<\/h3>\n
                                                                                                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                                                                                                  1. \n
                                                                                                                                                                                                                                                                                                    \u4fdd\u8bc1\u8def\u7531\u8def\u5f84\u4e0d\u8981\u5e26\u4efb\u4f55\u53c2\u6570<\/p>\n
                                                                                                                                                                                                                                                                                                    export<\/span> default<\/span> [<\/span> { \n     <\/span> path<\/span>:<\/span> '\/home'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Home \/<\/span>><\/span>,<\/span> children<\/span>:<\/span> [<\/span> { \n     <\/span> path<\/span>:<\/span> 'message'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Message \/<\/span>><\/span>,<\/span> children<\/span>:<\/span> [<\/span> { \n     <\/span> \/\/ \u4fdd\u6301\u539f\u6a21\u539f\u6837\u5373\u53ef\uff0c\u540e\u9762\u4e0d\u8981\u5e26\u53c2\u6570<\/span> path<\/span>:<\/span> 'item'<\/span>,<\/span> element<\/span>:<\/span> <<\/span>Item \/<\/span>><\/span> }<\/span> ]<\/span> }<\/span>,<\/span> ]<\/span> }<\/span>,<\/span> ]<\/span> <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                                  2. \n
                                                                                                                                                                                                                                                                                                    \u8def\u7531\u94fe\u63a5\u4f20\u9012 search \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                    import React, { Component } from \"react\"; import { Link, Outlet } from \"react-router-dom\"; export default class Message extends Component { render() { return ( <div> {\/* \u4f20\u9012search\u53c2\u6570 *\/} <Link to={`item?name=zhangsan&age=18`}>\u4f20\u9012\u53c2\u6570<\/Link> <hr \/> <Outlet \/> <\/div> ); } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                                  3. \n
                                                                                                                                                                                                                                                                                                    \u63a5\u6536 search \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                    import React, { Component } from \"react\"; import { useSearchParams, useLocation } from \"react-router-dom\"; export default function Item() { \/\/ \u7b2c\u4e00\u79cd\u65b9\u5f0f\uff1a\u8c03\u7528useSearchParams\u65b9\u6cd5\uff0c\u8fd4\u56de\u4e00\u4e2a\u6570\u7ec4\uff0c\u4ece\u6570\u7ec4\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e2d\u53d6search\u53c2\u6570 const search = useSearchParams(); \/\/ [URLSearchParams, \u0192] const [searchParams] = search; console.log(searchParams.get(\"name\")); \/\/ zhangsan \/\/ \u7b2c\u4e8c\u79cd\u65b9\u5f0f\uff1a\u8c03\u7528useLocation\u65b9\u6cd5\uff0c\u8fd4\u56delocation\u5bf9\u8c61\uff0c\u4ece\u4e2d\u83b7\u53d6search\u53c2\u6570 const location = useLocation(); console.log(location.search); \/\/ ?name=zhangsan&age=18 return <div><\/div>; } <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                                                    \u4f20\u9012state\u53c2\u6570<\/h3>\n
                                                                                                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                                                                                                    1. \n
                                                                                                                                                                                                                                                                                                      \u4fdd\u8bc1\u8def\u7531\u8def\u5f84\u4e0d\u8981\u5e26\u4efb\u4f55\u53c2\u6570<\/p>\n<\/li>\n
                                                                                                                                                                                                                                                                                                    2. \n
                                                                                                                                                                                                                                                                                                      \u4f20\u9012 state \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                      import React, { Component } from \"react\"; import { Link, Outlet } from \"react-router-dom\"; export default class Message extends Component { render() { return ( <div> {\/* \u4f20\u9012state\u53c2\u6570 *\/} <Link to=\"item\" state={ \n    { name: \"zhangsan\", age: 18 }}> \u4f20\u9012\u53c2\u6570 <\/Link> <hr \/> <Outlet \/> <\/div> ); } } <\/code><\/pre>\n<\/li>\n
                                                                                                                                                                                                                                                                                                    3. \n
                                                                                                                                                                                                                                                                                                      \u63a5\u6536 state \u53c2\u6570\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                      import React, { Component } from \"react\"; import { useSearchParams, useLocation } from \"react-router-dom\"; export default function Item() { \/\/ \u5148\u83b7\u53d6location\u5bf9\u8c61 const location = useLocation(); \/\/ \u4ecelocation\u5bf9\u8c61\u4e2d\u83b7\u53d6state console.log(location.state); \/\/ {name: 'zhangsan', age: 18} return <div><\/div>; } <\/code><\/pre>\n<\/li>\n<\/ol>\n
                                                                                                                                                                                                                                                                                                      \u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<\/h3>\n
                                                                                                                                                                                                                                                                                                      \u5728 ReactRoute@5 \u4e2d\uff0c\u53ea\u6709\u8def\u7531\u7ec4\u4ef6\u624d\u53ef\u4ee5\u4f7f\u7528 history \u5bf9\u8c61\u5b9e\u73b0\u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<\/p>\n
                                                                                                                                                                                                                                                                                                      \u800c\u5728 ReactRoute@6 \u4e2d\uff0c\u4efb\u4f55\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u4f7f\u7528 navigate \u51fd\u6570\u5b9e\u73b0\u7f16\u7a0b\u5f0f\u8def\u7531\u5bfc\u822a<\/p>\n
                                                                                                                                                                                                                                                                                                      import React from \"react\"; import { useNavigate, Link, Outlet } from \"react-router-dom\"; export default function Message() { \/\/ \u83b7\u53d6navigate\u51fd\u6570 const navigate = useNavigate(); function showItem() { \/\/ \u8c03\u7528navigate\u51fd\u6570\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u8def\u7531\u8def\u5f84\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4ee5\u4f20\u4e00\u4e9b\u914d\u7f6e\uff0c\u4e5f\u53ef\u4f20\u9012state\u53c2\u6570\u3002\u4f46\u662fparams\u548csearch\u53c2\u6570\u4e0d\u80fd\u8fd9\u6837\u4f20\uff0c\u9700\u8981\u5199\u5230\u8def\u7531\u8def\u5f84\u540e\u9762 navigate(\"item\", { replace: true, state: { name: \"zhangsan\", age: 18, }, }); } function back() { \/\/ \u8c03\u7528navigate\u51fd\u6570\uff0c\u5b9e\u73b0\u540e\u9000 navigate(-1); } return ( <div> <button onClick={showItem}>\u5c55\u793aItem<\/button> <button onClick={back}>\u540e\u9000<\/button> <Outlet \/> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                      useInRouterContext()<\/h3>\n
                                                                                                                                                                                                                                                                                                      useInRouterContext() \u94a9\u5b50\u51fd\u6570\u4e3b\u8981\u7528\u4e8e\u5224\u65ad\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u5904\u4e8e\u8def\u7531\u7684\u4e0a\u4e0b\u6587\u73af\u5883\u4e2d<\/p>\n
                                                                                                                                                                                                                                                                                                      \u4ec0\u4e48\u53eb\u5904\u4e8e\u8def\u7531\u7684\u4e0a\u4e0b\u6587\u73af\u5883\u4e2d\uff1f<\/p>\n
                                                                                                                                                                                                                                                                                                      \/\/ \u53ea\u8981\u662f\u88abBrowserRouter\u6216HashRoute\u6807\u7b7e\u5305\u88f9\u7684\u7ec4\u4ef6\uff0c\u5c31\u5904\u4e8e\u8def\u7531\u7684\u4e0a\u4e0b\u6587\u73af\u5883\u4e2d <BrowserRouter> <App \/> <\/BrowserRouter> <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                      \u4f7f\u7528\uff1a<\/p>\n
                                                                                                                                                                                                                                                                                                      import React from \"react\"; import { useInRouterContext } from \"react-router-dom\"; export default function Demo() { console.log(useInRouterContext()); \/\/ true return <div>Demo<\/div> } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                      useNavigationType<\/h3>\n
                                                                                                                                                                                                                                                                                                      \u4f5c\u7528\uff1a\u8fd4\u56de\u5f53\u524d\u7684\u5bfc\u822a\u7c7b\u578b\uff0c\u5373\u7528\u6237\u662f\u5982\u4f55\u6765\u5230\u5f53\u524d\u9875\u9762\u7684<\/p>\n
                                                                                                                                                                                                                                                                                                      \u8fd4\u56de\u503c\uff1aPOP<\/code>\uff0cPUSH<\/code>\uff0cREPLACE<\/code><\/p>\n
                                                                                                                                                                                                                                                                                                      \u5907\u6ce8\uff1aPOP<\/code> \u662f\u6307\u5728\u6d4f\u89c8\u5668\u4e2d\u76f4\u63a5\u6253\u5f00\u4e86\u8fd9\u4e2a\u8def\u7531\u7ec4\u4ef6\uff08\u5982\u5237\u65b0\u9875\u9762\uff09<\/p>\n
                                                                                                                                                                                                                                                                                                      import React from \"react\"; \/\/ \u5f15\u5165useNavigationType import { useNavigationType } from \"react-router-dom\"; export default function Item() { \/\/ \u4f7f\u7528 console.log(useNavigationType()); \/\/ REPLACE return <div>\u6211\u662fITEM<\/div>; } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                      useOutlet<\/h3>\n
                                                                                                                                                                                                                                                                                                      \u4f5c\u7528\uff1a\u7528\u4e8e\u83b7\u53d6\u5f53\u524d\u7ec4\u4ef6\u4e2d\u5df2\u6e32\u67d3\u7684\u5d4c\u5957\u8def\u7531<\/p>\n
                                                                                                                                                                                                                                                                                                      \u5982\u679c\u5d4c\u5957\u8def\u7531\u8fd8\u6ca1\u6709\u6302\u8f7d\uff0c\u5219\u8fd4\u56de null\uff1b\u5982\u679c\u5df2\u7ecf\u6302\u8f7d\uff0c\u5219\u8fd4\u56de\u5d4c\u5957\u8def\u7531\u5bf9\u8c61<\/p>\n
                                                                                                                                                                                                                                                                                                      import React from \"react\"; import { useNavigate, Outlet, useOutlet, } from \"react-router-dom\"; export default function Message() { const navigate = useNavigate(); \/\/ \u83b7\u53d6\u5f53\u524d\u7ec4\u4ef6\u4e2d\u5df2\u6e32\u67d3\u7684\u5d4c\u5957\u8def\u7531 const res = useOutlet(); function showItem() { navigate(\"item\"); console.log(\"res\", res); \/\/ {$$typeof: Symbol(react.element), type: {\u2026}, key: null, ref: null, props: {\u2026}, \u2026} } return ( <div> <button onClick={showItem}>\u5c55\u793aItem<\/button> <Outlet \/> <\/div> ); } <\/code><\/pre>\n
                                                                                                                                                                                                                                                                                                      useResolvedPath<\/h3>\n
                                                                                                                                                                                                                                                                                                      \u4f5c\u7528\uff1a\u7ed9\u5b9a\u4e00\u4e2a URL\uff0c\u89e3\u6790\u5176\u4e2d\u7684 path\u3001search \u548c hash \u503c<\/p>\n
                                                                                                                                                                                                                                                                                                      import { useResolvedPath } from \"react-router-dom\"; console.log(useResolvedPath('\/user?name=zhangsan&age=18#abc')) \/\/ {pathname: '\/user', search: '?name=zhangsan&age=18', hash: '#anc'} <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u3010\u5b66\u4e60\u7b14\u8bb0\u3011React.jsReact\u5b66\u4e60\u7b14\u8bb0_react.js","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/6462"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=6462"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/6462\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=6462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=6462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=6462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}