{"id":232,"date":"2026-09-06T00:43:00","date_gmt":"2026-09-05T16:43:00","guid":{"rendered":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/06\/interview-framework-principles\/"},"modified":"2026-09-06T00:43:00","modified_gmt":"2026-09-05T16:43:00","slug":"interview-framework-principles","status":"publish","type":"post","link":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/06\/interview-framework-principles\/","title":{"rendered":"\u524d\u7aef\u6846\u67b6\u539f\u7406\u9762\u8bd5 30 \u95ee\uff1a\u865a\u62df DOM\u3001Diff\u3001\u54cd\u5e94\u5f0f\u4e0e\u8c03\u5ea6\u5668"},"content":{"rendered":"
\n
\u5173\u952e\u8bcd<\/span>\u524d\u7aef\u9762\u8bd5\u9898\u3001\u865a\u62df DOM\u3001Diff \u7b97\u6cd5\u3001Fiber\u3001\u54cd\u5e94\u5f0f\u539f\u7406\u3001React Compiler<\/div>\n
\n
\u76ee\u5f55<\/div>\n
    \n
  1. \u4e00\u3001\u865a\u62df DOM\uff1a\u5148\u628a\u5b83\u8bf7\u4e0b\u795e\u575b<\/a><\/li>\n
  2. \u4e8c\u3001Diff \u7b97\u6cd5\uff1a\u4ece O(n\u00b3) \u5230 O(n) \u7684\u90a3\u4e00\u6b65<\/a><\/li>\n
  3. \u4e09\u3001\u54cd\u5e94\u5f0f\uff1a\u4e24\u5927\u9635\u8425\u7684\u6839\u672c\u5206\u6b67<\/a><\/li>\n
  4. \u56db\u3001\u8c03\u5ea6\u4e0e\u65f6\u95f4\u5207\u7247<\/a><\/li>\n
  5. \u4e94\u30012026 \u5e74\u7684\u65b0\u8003\u70b9\uff1a\u7f16\u8bd1\u671f\u4f18\u5316<\/a><\/li>\n
  6. \u516d\u3001\u600e\u4e48\u628a\u8fd9\u4e00\u5757\u7b54\u51fa\u5f69<\/a><\/li>\n
  7. \u4e03\u3001\u5c0f\u7ed3<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u6846\u67b6\u539f\u7406\u662f\u524d\u7aef\u9762\u8bd5\u91cc\u6700\u80fd\u62c9\u5f00\u5dee\u8ddd\u7684\u4e00\u5757\u3002\u80cc API \u8c01\u90fd\u4f1a\uff0c\u4f46”\u4e3a\u4ec0\u4e48 React \u8981\u5f15\u5165 Fiber”\u3001”Vue \u7684\u54cd\u5e94\u5f0f\u4e3a\u4ec0\u4e48\u8981\u7528 WeakMap”\u3001”\u865a\u62df DOM \u4e00\u5b9a\u66f4\u5feb\u5417”\u8fd9\u7c7b\u95ee\u9898\uff0c\u8003\u5bdf\u7684\u662f\u4f60\u80fd\u4e0d\u80fd\u4ece\u8bbe\u8ba1\u7ea6\u675f\u53cd\u63a8\u51fa\u6280\u672f\u9009\u578b<\/strong>\u3002<\/p>\n

    \u672c\u6587\u6309\u865a\u62df DOM \u2192 Diff \u2192 \u54cd\u5e94\u5f0f \u2192 \u8c03\u5ea6 \u2192 \u7f16\u8bd1\u671f\u4f18\u5316<\/strong>\u4e94\u5c42\u7ec4\u7ec7\uff0c\u6bcf\u5c42\u7ed9\u51fa\u9ad8\u9891\u95ee\u9898\u3001\u6807\u51c6\u7b54\u6848\u8981\u70b9\uff0c\u4ee5\u53ca\u9762\u8bd5\u5b98\u771f\u6b63\u60f3\u542c\u5230\u7684\u90a3\u53e5\u8bdd\u3002\u7248\u672c\u5750\u6807\u622a\u81f3 2026 \u5e74 9 \u6708\uff1aReact 19.2.8\u3001Vue 3.5.42\uff083.6.0-rc.7 \u5728 RC\uff09\u3001Svelte 5.57.0\u3001Solid 1.9.15\u3002<\/p>\n

    \"\u6846\u67b6\u539f\u7406\u7684\u4e94\u5c42\u7ed3\u6784\"
    \u6846\u67b6\u539f\u7406\u4e94\u5c42\uff1a\u865a\u62df DOM \u2192 Diff \u2192 Fiber \u2192 \u54cd\u5e94\u5f0f \u2192 \u7f16\u8bd1\u671f\u4f18\u5316<\/figcaption><\/figure>\n

    \u4e00\u3001\u865a\u62df DOM\uff1a\u5148\u628a\u5b83\u8bf7\u4e0b\u795e\u575b<\/h2>\n

    Q1\uff1a\u865a\u62df DOM \u4e00\u5b9a\u6bd4\u76f4\u63a5\u64cd\u4f5c DOM \u5feb\u5417\uff1f<\/h3>\n

    \u4e0d\u4e00\u5b9a\uff0c\u800c\u4e14\u8fd9\u4e2a\u8bf4\u6cd5\u672c\u8eab\u5c31\u662f\u9519\u7684\u3002<\/strong>\u865a\u62df DOM \u7684\u4ef7\u503c\u4e0d\u662f”\u66f4\u5feb”\uff0c\u800c\u662f\u628a”\u4ec0\u4e48\u53d8\u4e86”\u8fd9\u4ef6\u4e8b\u4ece\u4eba\u8111\u8f6c\u79fb\u5230\u8fd0\u884c\u65f6<\/strong>\uff0c\u4ece\u800c\u8ba9\u4f60\u80fd\u7528\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u5199 UI\uff0c\u540c\u65f6\u4fdd\u8bc1\u4e00\u4e2a\u53ef\u63a5\u53d7\u7684\u6027\u80fd\u4e0b\u9650\u3002<\/p>\n

    \u7cbe\u786e\u7684\u5bf9\u6bd4\u5e94\u8be5\u662f\uff1a<\/p>\n

      \n
    • \u9996\u6b21\u6e32\u67d3<\/strong>\uff1a\u865a\u62df DOM \u4e00\u5b9a\u66f4\u6162\u2014\u2014\u5b83\u591a\u4e86\u4e00\u6b65\u6784\u5efa VNode \u6811\u548c render \u7684\u5f00\u9500\u3002<\/li>\n
    • \u5c0f\u8303\u56f4\u7cbe\u51c6\u66f4\u65b0<\/strong>\uff1a\u624b\u5199 el.textContent = x<\/code> \u4e00\u5b9a\u66f4\u5feb\uff0c\u6ca1\u6709 diff \u6210\u672c\u3002<\/li>\n
    • \u590d\u6742\u89c6\u56fe\u7684\u4e2d\u5927\u8303\u56f4\u66f4\u65b0<\/strong>\uff1a\u865a\u62df DOM \u901a\u5e38\u66f4\u5feb\uff0c\u56e0\u4e3a\u5b83\u80fd\u6279\u91cf\u8ba1\u7b97\u51fa\u6700\u5c0f\u53d8\u66f4\u96c6\uff0c\u907f\u514d\u5927\u91cf\u65e0\u8c13\u7684\u8bfb\u5199\u4ea4\u9519\u5bfc\u81f4\u7684\u91cd\u6392\u3002<\/li>\n<\/ul>\n
      \n

      \u9762\u8bd5\u9ad8\u5206\u7b54\u6cd5\uff1a\u628a”\u5feb\u4e0d\u5feb”\u6539\u6210”\u5728\u4ec0\u4e48\u7ea6\u675f\u4e0b\u6362\u53d6\u4e86\u4ec0\u4e48<\/strong>“\u2014\u2014\u727a\u7272\u9996\u6b21\u6e32\u67d3\u6027\u80fd\u548c\u4e00\u70b9\u5185\u5b58\uff0c\u6362\u53d6\u58f0\u660e\u5f0f\u5199\u6cd5 + \u53ef\u9884\u6d4b\u7684\u6027\u80fd\u4e0b\u9650 + \u8de8\u5e73\u53f0\u6e32\u67d3\u80fd\u529b\uff08\u540c\u4e00\u68f5 VNode \u6811\u53ef\u4ee5\u6e32\u67d3\u5230 DOM\u3001Canvas\u3001Native\uff09\u3002<\/p>\n<\/blockquote>\n

      Q2\uff1a\u4e3a\u4ec0\u4e48\u9700\u8981 key\uff1f\u7528 index \u5f53 key \u4f1a\u51fa\u4ec0\u4e48\u95ee\u9898\uff1f<\/h3>\n

      key<\/code> \u662f diff \u7b97\u6cd5\u7528\u6765\u5224\u65ad”\u65b0\u65e7\u4e24\u4e2a\u8282\u70b9\u662f\u4e0d\u662f\u540c\u4e00\u4e2a\u4e1c\u897f”\u7684\u8eab\u4efd\u8bc1\u3002\u6ca1\u6709 key \u65f6\uff0c\u6846\u67b6\u53ea\u80fd\u6309\u4f4d\u7f6e\u4e00\u4e00\u5bf9\u5e94\uff08\u5c31\u5730\u590d\u7528\uff09\uff0c\u8fd9\u5728\u67d0\u4e9b\u573a\u666f\u4e0b\u4f1a\u9519\u8bef\u5730\u590d\u7528\u4e86\u5e26\u6709\u5185\u90e8\u72b6\u6001\u7684\u8282\u70b9<\/strong>\u3002<\/p>\n

      \/\/ \u53cd\u4f8b\uff1a\u7528 index \u5f53 key\n\/\/ \u5217\u8868 [A, B, C]\uff0c\u5220\u9664 A \u540e\u53d8\u6210 [B, C]\n\/\/ index \u590d\u7528\u540e\uff1a\u539f\u4f4d\u7f6e0 \u7684 A \u8282\u70b9\u88ab\u590d\u7528\u6210 B\uff0c\u7ec4\u4ef6\u5185\u90e8 state \u9519\u4f4d\n{list.map((item, i) => <Row key={i} data={item} \/>)}\n\n\/\/ \u6b63\u4f8b\uff1a\u7528\u7a33\u5b9a\u4e1a\u52a1 ID\n{list.map(item => <Row key={item.id} data={item} \/>)}<\/code><\/pre>\n
      \u5178\u578b\u7ffb\u8f66\u573a\u666f\uff1a\u5217\u8868\u9879\u91cc\u6709\u8f93\u5165\u6846\u3001\u52fe\u9009\u72b6\u6001\u3001\u52a8\u753b\u72b6\u6001<\/strong>\u3002\u5220\u9664\u7b2c\u4e00\u9879\u540e\uff0c\u7b2c\u4e8c\u9879\u7684\u8f93\u5165\u6846\u5185\u5bb9\u4f1a”\u8dd1”\u5230\u7b2c\u4e00\u9879\u4e0a\u3002\u5982\u679c\u5217\u8868\u53ea\u662f\u7eaf\u5c55\u793a\u3001\u65e0\u5185\u90e8\u72b6\u6001\u3001\u65e0\u987a\u5e8f\u53d8\u66f4\uff0c\u7528 index \u4e0d\u4f1a\u51fa\u95ee\u9898\u2014\u2014\u4f46\u8fd9\u662f\u4e2a\u4e0d\u8be5\u8d4c\u7684\u5047\u8bbe\u3002<\/p>\n
      \u4e8c\u3001Diff \u7b97\u6cd5\uff1a\u4ece O(n\u00b3) \u5230 O(n) \u7684\u90a3\u4e00\u6b65<\/h2>\n
      Q3\uff1a\u4e3a\u4ec0\u4e48\u6811\u7684\u6700\u5c0f\u7f16\u8f91\u8ddd\u79bb\u662f O(n\u00b3)\uff0c\u800c\u6846\u67b6\u80fd\u505a\u5230 O(n)\uff1f<\/h3>\n
      \u56e0\u4e3a\u6846\u67b6\u653e\u5f03\u4e86”\u6700\u4f18\u89e3”\uff0c\u53ea\u6c42”\u5728\u771f\u5b9e\u573a\u666f\u4e0b\u8db3\u591f\u597d\u7684\u89e3”<\/strong>\u3002\u5b83\u5f15\u5165\u4e86\u4e09\u4e2a\u542f\u53d1\u5f0f\u7ea6\u675f\uff1a<\/p>\n
        \n
      1. \u53ea\u505a\u540c\u5c42\u6bd4\u8f83<\/strong>\uff0c\u4e0d\u505a\u8de8\u5c42\u7ea7\u7684\u8282\u70b9\u79fb\u52a8\u3002\u4e00\u65e6\u53d1\u73b0\u8282\u70b9\u8dd1\u5230\u4e86\u522b\u7684\u5c42\u7ea7\uff0c\u76f4\u63a5\u5220\u6389\u91cd\u5efa\u3002<\/li>\n
      2. \u540c\u5c42\u6bd4\u8f83\u65f6\u6309 key \u5339\u914d<\/strong>\uff0c\u901a\u8fc7\u54c8\u5e0c\u8868\u628a”\u627e\u5bf9\u5e94\u8282\u70b9”\u4ece O(n\u00b2) \u964d\u5230 O(n)\u3002<\/li>\n
      3. \u7c7b\u578b\u4e0d\u540c\u76f4\u63a5\u6574\u68f5\u66ff\u6362<\/strong>\uff0c\u4e0d\u518d\u5f80\u4e0b\u6bd4\u3002<div><\/code> \u53d8\u6210 <span><\/code>\uff0c\u6574\u68f5\u5b50\u6811\u91cd\u5efa\u3002<\/li>\n<\/ol>\n
        \u8fd9\u4e09\u6761\u628a\u95ee\u9898\u4ece”\u901a\u7528\u6811\u7f16\u8f91\u8ddd\u79bb”\u964d\u5230\u4e86”\u540c\u5c42\u5e8f\u5217\u7684\u5339\u914d”\uff0c\u590d\u6742\u5ea6\u968f\u4e4b\u964d\u4e3a\u7ebf\u6027\u3002<\/p>\n
        Q4\uff1aReact \u7684 Fiber \u5230\u5e95\u89e3\u51b3\u4e86\u4ec0\u4e48\u95ee\u9898\uff1f<\/h3>\n
        \u5728 Fiber \u4e4b\u524d\uff08React 15 \u7684 Stack Reconciler\uff09\uff0c\u9012\u5f52\u904d\u5386\u7ec4\u4ef6\u6811\u662f\u4e0d\u53ef\u4e2d\u65ad<\/strong>\u7684\u2014\u2014\u4e00\u6b21\u66f4\u65b0\u4ece\u6839\u4e00\u8def\u9012\u5f52\u5230\u53f6\u5b50\uff0c\u4e2d\u95f4\u4e0d\u80fd\u505c\u3002\u7ec4\u4ef6\u6811\u6df1\u4e86\uff08\u6bd4\u5982\u51e0\u5343\u4e2a\u8282\u70b9\uff09\uff0c\u8fd9\u4e00\u6b21\u9012\u5f52\u53ef\u80fd\u5360\u4f4f\u4e3b\u7ebf\u7a0b\u51e0\u5341\u5230\u51e0\u767e\u6beb\u79d2\uff0c\u671f\u95f4\u7528\u6237\u8f93\u5165\u3001\u52a8\u753b\u5168\u90e8\u5361\u4f4f\u3002<\/p>\n
        Fiber \u7684\u6838\u5fc3\u6539\u52a8\u662f\u628a\u9012\u5f52\u6539\u5199\u6210\u94fe\u8868\u4e0a\u7684\u5faa\u73af<\/strong>\uff1a<\/p>\n
        \/\/ Fiber \u8282\u70b9\u4e4b\u95f4\u7528\u4e09\u4e2a\u6307\u9488\u8fde\u8d77\u6765\uff0c\u5f62\u6210\u53ef\u904d\u5386\u3001\u53ef\u4e2d\u65ad\u7684\u94fe\u8868\nfiberNode.child     \/\/ \u7b2c\u4e00\u4e2a\u5b50\u8282\u70b9\nfiberNode.sibling   \/\/ \u4e0b\u4e00\u4e2a\u5144\u5f1f\u8282\u70b9\nfiberNode.return    \/\/ \u7236\u8282\u70b9\n\n\/\/ \u4e8e\u662f workLoop \u53ef\u4ee5\u968f\u65f6\u505c\u4e0b\u6765\nfunction workLoop(deadline) {\n  while (nextUnitOfWork && deadline.timeRemaining() > 1) {\n    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)\n  }\n  \/\/ \u65f6\u95f4\u7247\u7528\u5b8c\u4e86\uff0c\u628a\u63a7\u5236\u6743\u8fd8\u7ed9\u6d4f\u89c8\u5668\uff0c\u4e0b\u4e00\u5e27\u7ee7\u7eed\n  requestIdleCallback(workLoop)\n}<\/code><\/pre>\n
        \u8fd9\u91cc\u8981\u533a\u5206\u4e24\u4e2a\u6982\u5ff5\uff0c\u5f88\u591a\u4eba\u7b54\u6df7\uff1a<\/p>\n
          \n
        • Fiber \u67b6\u6784<\/strong>\uff1a\u6570\u636e\u7ed3\u6784 + \u53ef\u4e2d\u65ad\u7684\u904d\u5386\u673a\u5236\uff08React 16 \u5f15\u5165\uff09\u3002<\/li>\n
        • Concurrent \u5e76\u53d1\u7279\u6027<\/strong>\uff1a\u57fa\u4e8e Fiber \u7684\u53ef\u4e2d\u65ad\u80fd\u529b\uff0c\u5b9e\u73b0\u7684\u4f18\u5148\u7ea7\u8c03\u5ea6<\/strong>\uff08React 18 \u5f15\u5165\uff09\u3002useTransition<\/code>\u3001Suspense<\/code>\u3001\u81ea\u52a8\u6279\u5904\u7406\u90fd\u5efa\u7acb\u5728\u8fd9\u4e0a\u9762\u3002<\/li>\n<\/ul>\n
          Q5\uff1auseTransition<\/code> \u548c\u9632\u6296\u8282\u6d41\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n
          \u8fd9\u662f 2026 \u5e74\u5f88\u5e38\u89c1\u7684\u8ffd\u95ee\uff0c\u4e24\u8005\u89e3\u51b3\u7684\u5176\u5b9e\u662f\u4e0d\u540c\u5c42\u9762\u7684\u95ee\u9898<\/strong>\uff1a<\/p>\n\n\n\n\n\n\n\n\n
          \u7ef4\u5ea6<\/th>\n\u9632\u6296 \/ \u8282\u6d41<\/th>\nuseTransition<\/th>\n<\/tr>\n<\/thead>\n
          \u4f5c\u7528\u5c42\u9762<\/td>\n\u51cf\u5c11\u89e6\u53d1\u6b21\u6570<\/strong><\/td>\n\u964d\u4f4e\u5355\u6b21\u6e32\u67d3\u7684\u4f18\u5148\u7ea7<\/strong><\/td>\n<\/tr>\n
          \u5b9e\u73b0\u673a\u5236<\/td>\n\u5b9a\u65f6\u5668\u5ef6\u540e\u6267\u884c<\/td>\n\u628a\u66f4\u65b0\u6807\u8bb0\u4e3a\u4f4e\u4f18\u5148\u7ea7\uff0c\u53ef\u88ab\u9ad8\u4f18\u5148\u7ea7\u6253\u65ad<\/td>\n<\/tr>\n
          \u80fd\u5426\u4e2d\u65ad<\/td>\n\u4e0d\u80fd\uff0c\u4e00\u65e6\u6267\u884c\u5c31\u8d70\u5b8c<\/td>\n\u80fd\uff0c\u7528\u6237\u8f93\u5165\u53ef\u6253\u65ad\u8fdb\u884c\u4e2d\u7684\u4f4e\u4f18\u5148\u7ea7\u6e32\u67d3<\/td>\n<\/tr>\n
          \u5178\u578b\u573a\u666f<\/td>\n\u641c\u7d22\u6846\u8bf7\u6c42\u3001resize<\/td>\n\u5927\u5217\u8868\u7b5b\u9009\u3001\u8def\u7531\u5207\u6362\u7684 loading \u6001<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          \u5173\u952e\u5224\u65ad\u53e5\uff1a\u9632\u6296\u662f”\u5c11\u505a\u51e0\u6b21”\uff0cuseTransition \u662f”\u505a\u662f\u53ef\u4ee5\u505a\uff0c\u4f46\u522b\u6321\u7740\u7528\u6237”<\/strong>\u3002\u524d\u8005\u51cf\u5c11\u4e86\u5de5\u4f5c\u91cf\uff0c\u540e\u8005\u6539\u53d8\u4e86\u5de5\u4f5c\u5b89\u6392\u7684\u987a\u5e8f\u3002<\/p>\n
          \u4e09\u3001\u54cd\u5e94\u5f0f\uff1a\u4e24\u5927\u9635\u8425\u7684\u6839\u672c\u5206\u6b67<\/h2>\n
          Q6\uff1aVue 3 \u7684\u54cd\u5e94\u5f0f\u662f\u600e\u4e48\u5b9e\u73b0\u7684\uff1f\u4e3a\u4ec0\u4e48\u7528 WeakMap\uff1f<\/h3>\n
          \u6838\u5fc3\u662f Proxy<\/code> \u62e6\u622a + \u4f9d\u8d56\u6536\u96c6\u3002\u4e09\u5c42\u6570\u636e\u7ed3\u6784\u8981\u80fd\u753b\u51fa\u6765\uff1a<\/p>\n
          \/\/ targetMap: WeakMap<object, Map<key, Set<effect>>>\nconst targetMap = new WeakMap()\n\nfunction track(target, key) {\n  if (!activeEffect) return\n  let depsMap = targetMap.get(target)\n  if (!depsMap) targetMap.set(target, depsMap = new Map())\n  let dep = depsMap.get(key)\n  if (!dep) depsMap.set(key, dep = new Set())\n  dep.add(activeEffect)      \/\/ \u6536\u96c6\u4f9d\u8d56\n}\n\nfunction trigger(target, key) {\n  const dep = targetMap.get(target)?.get(key)\n  dep?.forEach(effect => effect())   \/\/ \u89e6\u53d1\u66f4\u65b0\n}<\/code><\/pre>\n
          \u4e3a\u4ec0\u4e48\u6700\u5916\u5c42\u7528 WeakMap\uff1f<\/strong>\u56e0\u4e3a\u952e\u662f\u5bf9\u8c61\u5f15\u7528\u3002WeakMap \u6301\u6709\u5f31\u5f15\u7528\uff0c\u5f53\u54cd\u5e94\u5f0f\u5bf9\u8c61\u88ab\u9500\u6bc1\u3001\u6ca1\u6709\u4efb\u4f55\u5176\u4ed6\u5f15\u7528\u65f6\uff0c\u5783\u573e\u56de\u6536\u53ef\u4ee5\u6b63\u5e38\u56de\u6536\u5b83<\/strong>\uff0c\u5bf9\u5e94\u7684\u4f9d\u8d56\u96c6\u5408\u4e5f\u4f1a\u81ea\u52a8\u6d88\u5931\u3002\u7528 Map \u4f1a\u9020\u6210\u5185\u5b58\u6cc4\u6f0f\u2014\u2014\u5bf9\u8c61\u5df2\u7ecf\u4e0d\u7528\u4e86\uff0c\u4f46\u56e0\u4e3a\u88ab Map \u7684\u952e\u5f3a\u5f15\u7528\u7740\uff0c\u6c38\u8fdc\u65e0\u6cd5\u56de\u6536\u3002<\/p>\n
          \u987a\u5e26\u4e00\u63d0\uff0cVue 3.6 \u628a\u5185\u90e8\u54cd\u5e94\u5f0f\u5b9e\u73b0\u6362\u6210\u4e86 alien-signals<\/code>\uff0c\u91c7\u7528\u57fa\u4e8e\u7248\u672c\u53f7\u7684\u53cc\u5411\u94fe\u8868<\/strong>\u800c\u975e Set \u6765\u7ec4\u7ec7\u4f9d\u8d56\uff0c\u5185\u5b58\u5360\u7528\u548c\u66f4\u65b0\u4f20\u64ad\u5f00\u9500\u8fdb\u4e00\u6b65\u4e0b\u964d\u3002\u8fd9\u662f\u5bf9\u5916\u7684\u5b9e\u73b0\u66ff\u6362\uff0cref<\/code>\/reactive<\/code> \u7684 API \u884c\u4e3a\u4fdd\u6301\u4e00\u81f4\u3002<\/p>\n
          Q7\uff1aReact \u4e3a\u4ec0\u4e48\u4e0d\u505a”\u81ea\u52a8\u4f9d\u8d56\u6536\u96c6”\uff1f<\/h3>\n
          \u4e0d\u662f\u4e0d\u80fd\uff0c\u800c\u662f\u9009\u62e9\u4e86\u4e0d\u540c\u7684\u53d6\u820d<\/strong>\u3002React \u7684\u6a21\u578b\u662f\u4e0d\u53ef\u53d8\u6570\u636e + \u663e\u5f0f\u91cd\u6e32\u67d3<\/strong>\uff1a\u72b6\u6001\u53d8\u4e86\uff0c\u7ec4\u4ef6\u51fd\u6570\u91cd\u65b0\u6267\u884c\uff0c\u751f\u6210\u65b0\u7684\u5143\u7d20\u6811\uff0c\u518d\u7531 diff \u627e\u51fa\u771f\u5b9e\u53d8\u66f4\u3002<\/p>\n
          \u4ee3\u4ef7\u662f\u4f1a\u4ea7\u751f”\u65e0\u8c13\u7684\u91cd\u6e32\u67d3”\uff08\u6240\u4ee5\u624d\u9700\u8981 memo<\/code>\u3001useMemo<\/code>\u3001useCallback<\/code>\uff09\uff1b\u6536\u76ca\u662f\u6570\u636e\u6d41\u53ef\u9884\u6d4b\u3001\u53ef\u91cd\u653e\u3001\u53ef\u5e76\u53d1\u4e2d\u65ad<\/strong>\u2014\u2014\u56e0\u4e3a\u7ec4\u4ef6\u5fc5\u987b\u662f\u7eaf\u51fd\u6570\uff0c\u624d\u80fd\u5728\u5e76\u53d1\u6e32\u67d3\u91cc\u88ab\u5b89\u5168\u5730\u6253\u65ad\u548c\u91cd\u505a\u3002<\/p>\n
          \u800c Vue \u7684\u7ec6\u7c92\u5ea6\u54cd\u5e94\u5f0f\uff0c\u66f4\u65b0\u662f”\u7cbe\u786e\u547d\u4e2d”\u7684\uff0c\u5929\u7136\u4e0d\u9700\u8981 memo\uff0c\u4f46\u7ec4\u4ef6\u7684\u6267\u884c\u65f6\u673a\u662f\u9690\u5f0f\u7684\uff0c\u4e0e\u5e76\u53d1\u6e32\u67d3\u8fd9\u5957\u673a\u5236\u7684\u517c\u5bb9\u6027\u6210\u672c\u66f4\u9ad8\u3002React Compiler 1.0 \u5df2 GA\uff0c\u5b83\u505a\u7684\u4e8b\u6b63\u662f\u5728\u7f16\u8bd1\u671f\u81ea\u52a8\u63d2\u5165\u7b49\u4ef7\u7684 memo \u903b\u8f91<\/strong>\uff0c\u628a”\u624b\u52a8\u4f18\u5316”\u8fd9\u4e00\u5c42\u8d1f\u62c5\u6536\u6389\uff0c\u800c\u4e0d\u6539\u53d8\u5e95\u5c42\u6a21\u578b\u3002<\/p>\n
          Q8\uff1aVue \u7684 ref<\/code> \u548c reactive<\/code> \u600e\u4e48\u9009\uff1f<\/h3>\n
          \u56de\u7b54\u8981\u70b9\uff1a<\/p>\n