npm - cainiaoblog - Versions diffs - 23.2.171 - Mend

cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/CNAME +1 -0
package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
package/README.md +8 -0
package/about/index.html +54 -0
package/ads.txt +1 -0
package/app/manual.html +104 -0
package/appConfigs/config +1 -0
package/archives/2018/index.html +48 -0
package/archives/2019/index.html +48 -0
package/archives/2019/page/2/index.html +48 -0
package/archives/2020/index.html +48 -0
package/archives/2021/index.html +48 -0
package/archives/2022/index.html +48 -0
package/archives/2023/index.html +48 -0
package/archives/index.html +48 -0
package/archives/page/2/index.html +48 -0
package/archives/page/3/index.html +48 -0
package/article/10047.html +148 -0
package/article/10164.html +64 -0
package/article/10624.html +436 -0
package/article/10745.html +586 -0
package/article/11674.html +71 -0
package/article/11939.html +72 -0
package/article/12238.html +86 -0
package/article/1230.html +533 -0
package/article/13265.html +69 -0
package/article/13823.html +78 -0
package/article/14125.html +72 -0
package/article/14192.html +561 -0
package/article/14375.html +85 -0
package/article/14744.html +83 -0
package/article/14936.html +451 -0
package/article/1518.html +250 -0
package/article/15428.html +71 -0
package/article/15518.html +288 -0
package/article/15569.html +418 -0
package/article/1566.html +122 -0
package/article/16017.html +156 -0
package/article/16947.html +440 -0
package/article/17096.html +82 -0
package/article/17246.html +89 -0
package/article/17575.html +350 -0
package/article/179.html +757 -0
package/article/18039.html +233 -0
package/article/18071.html +375 -0
package/article/18142.html +71 -0
package/article/19909.html +160 -0
package/article/20014.html +89 -0
package/article/20021.html +389 -0
package/article/20037.html +280 -0
package/article/20056.html +95 -0
package/article/20093.html +404 -0
package/article/2021.html +607 -0
package/article/20459.html +115 -0
package/article/20613.html +263 -0
package/article/20635.html +71 -0
package/article/21317.html +71 -0
package/article/21320.html +90 -0
package/article/21782.html +548 -0
package/article/22230.html +435 -0
package/article/22237.html +347 -0
package/article/22398.html +109 -0
package/article/22422.html +270 -0
package/article/22565.html +300 -0
package/article/23046.html +250 -0
package/article/23083.html +215 -0
package/article/23195.html +297 -0
package/article/23301.html +835 -0
package/article/23589.html +285 -0
package/article/23655.html +338 -0
package/article/23864.html +76 -0
package/article/23914.html +96 -0
package/article/24169.html +135 -0
package/article/24581.html +349 -0
package/article/2475.html +500 -0
package/article/24826.html +77 -0
package/article/24924.html +247 -0
package/article/25164.html +1495 -0
package/article/25318.html +394 -0
package/article/25710.html +1129 -0
package/article/25734.html +83 -0
package/article/26083.html +174 -0
package/article/26147.html +283 -0
package/article/26291.html +110 -0
package/article/26354.html +71 -0
package/article/26624.html +145 -0
package/article/26639.html +298 -0
package/article/26850.html +138 -0
package/article/26940.html +258 -0
package/article/27796.html +190 -0
package/article/27800.html +161 -0
package/article/28963.html +159 -0
package/article/28976.html +247 -0
package/article/29042.html +72 -0
package/article/29596.html +81 -0
package/article/29619.html +183 -0
package/article/29623.html +329 -0
package/article/29829.html +205 -0
package/article/29abbd1c.html +112 -0
package/article/30215.html +178 -0
package/article/30552.html +78 -0
package/article/30818.html +201 -0
package/article/31330.html +364 -0
package/article/3154.html +577 -0
package/article/31695.html +348 -0
package/article/31826.html +71 -0
package/article/31843.html +132 -0
package/article/32280.html +212 -0
package/article/32431.html +74 -0
package/article/32443.html +72 -0
package/article/32732.html +122 -0
package/article/3286.html +251 -0
package/article/32960.html +198 -0
package/article/33713.html +72 -0
package/article/33899.html +615 -0
package/article/34351.html +74 -0
package/article/34372.html +89 -0
package/article/34410.html +74 -0
package/article/34431.html +118 -0
package/article/3447.html +75 -0
package/article/34474.html +142 -0
package/article/34871.html +147 -0
package/article/35397.html +175 -0
package/article/3544.html +199 -0
package/article/35503.html +115 -0
package/article/35624.html +84 -0
package/article/35697.html +384 -0
package/article/35863.html +73 -0
package/article/36037.html +253 -0
package/article/36118.html +71 -0
package/article/3621.html +119 -0
package/article/36251.html +296 -0
package/article/36642.html +352 -0
package/article/37102.html +763 -0
package/article/37336.html +351 -0
package/article/37351.html +89 -0
package/article/3760.html +294 -0
package/article/37749.html +75 -0
package/article/37789.html +83 -0
package/article/38005.html +765 -0
package/article/38009.html +284 -0
package/article/38269.html +194 -0
package/article/38344.html +88 -0
package/article/38359.html +334 -0
package/article/38423.html +379 -0
package/article/38530.html +213 -0
package/article/38743.html +268 -0
package/article/38753.html +204 -0
package/article/38881.html +71 -0
package/article/39087.html +414 -0
package/article/39309.html +84 -0
package/article/39486.html +74 -0
package/article/39637.html +306 -0
package/article/39839.html +72 -0
package/article/39937.html +152 -0
package/article/39970.html +71 -0
package/article/402.html +559 -0
package/article/40698.html +71 -0
package/article/40811.html +71 -0
package/article/40964.html +462 -0
package/article/41011.html +322 -0
package/article/41152.html +78 -0
package/article/41696.html +71 -0
package/article/41717.html +281 -0
package/article/41777.html +149 -0
package/article/419.html +985 -0
package/article/4233.html +136 -0
package/article/4292.html +86 -0
package/article/43302.html +96 -0
package/article/43397.html +106 -0
package/article/43724.html +281 -0
package/article/43999.html +224 -0
package/article/44426.html +77 -0
package/article/44964.html +137 -0
package/article/45004.html +123 -0
package/article/4510.html +83 -0
package/article/45156.html +320 -0
package/article/45157.html +52 -0
package/article/45267.html +87 -0
package/article/45641.html +207 -0
package/article/45960.html +75 -0
package/article/46100.html +1262 -0
package/article/46366.html +74 -0
package/article/46771.html +96 -0
package/article/46911.html +517 -0
package/article/46948.html +137 -0
package/article/46ee4850.html +349 -0
package/article/47019.html +84 -0
package/article/47532.html +94 -0
package/article/4783.html +429 -0
package/article/47972.html +72 -0
package/article/48216.html +127 -0
package/article/48252.html +185 -0
package/article/48520.html +74 -0
package/article/48722.html +75 -0
package/article/48807.html +99 -0
package/article/49126.html +323 -0
package/article/50001.html +88 -0
package/article/50058.html +151 -0
package/article/50343.html +410 -0
package/article/50510.html +82 -0
package/article/51082.html +98 -0
package/article/51677.html +111 -0
package/article/5204.html +1085 -0
package/article/52500.html +538 -0
package/article/52689.html +259 -0
package/article/52877.html +569 -0
package/article/53125.html +191 -0
package/article/53428.html +251 -0
package/article/53524.html +74 -0
package/article/53698.html +322 -0
package/article/53803e6.html +93 -0
package/article/53924.html +291 -0
package/article/53962.html +253 -0
package/article/54006.html +71 -0
package/article/54018.html +88 -0
package/article/54161.html +83 -0
package/article/54178.html +69 -0
package/article/54258.html +327 -0
package/article/54295.html +214 -0
package/article/54313.html +1976 -0
package/article/54351.html +90 -0
package/article/54604.html +80 -0
package/article/54632.html +71 -0
package/article/54912.html +756 -0
package/article/54918.html +129 -0
package/article/55119.html +136 -0
package/article/55756.html +118 -0
package/article/55769.html +136 -0
package/article/55870.html +161 -0
package/article/56139.html +92 -0
package/article/56557.html +69 -0
package/article/56604.html +69 -0
package/article/56816.html +266 -0
package/article/56926.html +153 -0
package/article/57747.html +409 -0
package/article/57965.html +475 -0
package/article/58816.html +78 -0
package/article/59059.html +435 -0
package/article/59095.html +350 -0
package/article/59349.html +244 -0
package/article/59402.html +216 -0
package/article/59448.html +55 -0
package/article/59870.html +94 -0
package/article/59877.html +208 -0
package/article/5dbb6f41.html +86 -0
package/article/6008.html +75 -0
package/article/60327.html +126 -0
package/article/6035.html +76 -0
package/article/60428.html +71 -0
package/article/60544.html +128 -0
package/article/61319.html +95 -0
package/article/61367.html +93 -0
package/article/624d1918.html +292 -0
package/article/62543.html +71 -0
package/article/62887.html +169 -0
package/article/63074.html +120 -0
package/article/63266.html +311 -0
package/article/63351.html +74 -0
package/article/63542.html +104 -0
package/article/63824.html +275 -0
package/article/64051.html +653 -0
package/article/64189b69.html +72 -0
package/article/64354.html +75 -0
package/article/64869.html +79 -0
package/article/64923.html +596 -0
package/article/65128.html +95 -0
package/article/65295.html +79 -0
package/article/6888.html +75 -0
package/article/7065.html +84 -0
package/article/7455.html +85 -0
package/article/7a3ef8f.html +315 -0
package/article/8140.html +188 -0
package/article/8190.html +85 -0
package/article/8225.html +78 -0
package/article/84c9ccd6.html +159 -0
package/article/8f9a9ae3.html +82 -0
package/article/9174.html +73 -0
package/article/9738.html +294 -0
package/article/a4145266.html +71 -0
package/article/bedea419.html +72 -0
package/article/bf7e7421.html +78 -0
package/article/c1867fbf.html +103 -0
package/article/c5576490.html +70 -0
package/article/dcb0db28.html +76 -0
package/article/fc3b727a.html +79 -0
package/atom.xml +445 -0
package/baidusitemap.xml +1079 -0
package/blocks/dns.txt +264 -0
package/blocks/filter.txt +1070 -0
package/blocks/script.js +42 -0
package/categories/CDN/index.html +48 -0
package/categories/IDE/index.html +48 -0
package/categories/git/index.html +48 -0
package/categories/hexo/index.html +48 -0
package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
package/categories//345/210/206/344/272/253/index.html +48 -0
package/categories//345/211/215/347/253/257/index.html +48 -0
package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
package/categories//345/215/232/345/256/242/index.html +48 -0
package/categories//345/267/245/345/205/267/index.html +48 -0
package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
package/categories//346/255/243/345/210/231/index.html +48 -0
package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
package/categories//347/256/227/346/263/225/index.html +48 -0
package/categories//350/265/204/350/256/257/index.html +48 -0
package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
package/cdn/css/font-awesome.min.css +4 -0
package/cdn/css/grids-responsive-min.css +7 -0
package/cdn/css/normalize.css +349 -0
package/cdn/css/pure-min.css +11 -0
package/cdn/fonts/fontawesome-webfont.eot +0 -0
package/cdn/fonts/fontawesome-webfont.svg +2671 -0
package/cdn/fonts/fontawesome-webfont.ttf +0 -0
package/cdn/fonts/fontawesome-webfont.woff +0 -0
package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
package/cdn/js/Valine.min.js +17 -0
package/cdn/js/canvas-nest.js +1 -0
package/cdn/js/clipboard.min.js +7 -0
package/cdn/js/crypto-js.js +25 -0
package/cdn/js/jquery.min.js +2 -0
package/css/default.css +1144 -0
package/css/donate.css +338 -0
package/css/hbe.style.css +749 -0
package/css/style.css +2095 -0
package/donate/index.html +39 -0
package/google917dcf72f6e5c7f5.html +1 -0
package/guestbook/index.html +68 -0
package/hosts/ads.txt +149 -0
package/hosts/flash.txt +9 -0
package/hosts/github.txt +6 -0
package/hosts/google.txt +16936 -0
package/hosts/winrar.txt +2 -0
package/img/alipay.svg +46 -0
package/img/bitcoin.svg +135 -0
package/img/blog.ico +0 -0
package/img/blog.png +0 -0
package/img/gaba.png +0 -0
package/img/github.svg +1 -0
package/img/like.svg +1 -0
package/img/mp-mini.jpg +0 -0
package/img/mp.png +0 -0
package/img/paypal.svg +63 -0
package/img/upy_logo.svg +59 -0
package/img/wechat.svg +49 -0
package/index.html +48 -0
package/jd_root.txt +1 -0
package/js/codeblock-resizer.js +51 -0
package/js/dark.js +12 -0
package/js/donate.js +87 -0
package/js/fixedPage.js +106 -0
package/js/gitment.browser.js +3751 -0
package/js/search.js +86 -0
package/js/share.js +60 -0
package/js/smartresize.js +32 -0
package/js/totop.js +12 -0
package/kankan/index.html +77 -0
package/lib/hbe.js +293 -0
package/package.json +25 -0
package/page/10/index.html +49 -0
package/page/11/index.html +59 -0
package/page/12/index.html +67 -0
package/page/13/index.html +63 -0
package/page/14/index.html +66 -0
package/page/15/index.html +60 -0
package/page/16/index.html +60 -0
package/page/17/index.html +62 -0
package/page/18/index.html +61 -0
package/page/19/index.html +58 -0
package/page/2/index.html +48 -0
package/page/20/index.html +57 -0
package/page/21/index.html +61 -0
package/page/22/index.html +55 -0
package/page/23/index.html +64 -0
package/page/24/index.html +60 -0
package/page/25/index.html +58 -0
package/page/26/index.html +48 -0
package/page/27/index.html +58 -0
package/page/3/index.html +48 -0
package/page/4/index.html +48 -0
package/page/5/index.html +51 -0
package/page/6/index.html +51 -0
package/page/7/index.html +51 -0
package/page/8/index.html +53 -0
package/page/9/index.html +48 -0
package/randomcall/README.html +1 -0
package/randomcall/lucker.html +290 -0
package/randomcall/lucky.png +0 -0
package/robots.txt +22 -0
package/search.xml +6740 -0
package/sitemap.xml +2669 -0
package/tags//345/216/237/345/210/233/index.html +48 -0
package/tags//345/250/261/344/271/220/index.html +48 -0
package/tags//346/211/213/345/206/231/index.html +48 -0
package/tags//347/226/253/346/203/205/index.html +48 -0
package/tags//350/275/254/350/275/275/index.html +48 -0
package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
package/v.html +90 -0

package/article/3154.html ADDED Viewed

@@ -0,0 +1,577 @@
+<!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>35道值得收藏的React面试题 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
+  var bp = document.createElement('script');
+  var curProtocol = window.location.protocol.split(':')[0];
+  if (curProtocol === 'https'){
+    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
+  }
+  else{
+    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
+  }
+  var s = document.getElementsByTagName("script")[0];
+  s.parentNode.insertBefore(bp, s);
+})();
+</script><script>(function(){
+  var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
+  document.write('<script src="' + src + '" id="sozz"><\/script>');
+})();
+</script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
+</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
+</script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">35道值得收藏的React面试题</h1><div class="post-meta"><span class="date">2019-12-09</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 5.7k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 22</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/3154.html#vcomment"><span class="waline-comment-count" data-path="/article/3154.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://www.html.cn/interview/14282.html</code></p>
+<p>如果你在为有经验的人或新生寻找ReactJS面试问题和答案，那么你来对地方了。本篇可以帮助前端开发人员准备和清除React面试。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。</p>
+<span id="more"></span>
+<p><img src="https://img.php.cn/upload/article/000/000/006/5dde184a0bf83255.jpg" alt="xuehuayu.cn"></p>
+<h3 id="问题1：什么是虚拟DOM？"><a href="#问题1：什么是虚拟DOM？" class="headerlink" title="问题1：什么是虚拟DOM？"></a>问题1：什么是虚拟DOM？</h3><blockquote>
+<p>主题: React<br>难度: ⭐</p>
+</blockquote>
+<p><strong>虚拟 DOM (VDOM)<strong>是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为</strong>调和</strong>。</p>
+<h3 id="问题2：类组件和函数组件之间的区别是啥？"><a href="#问题2：类组件和函数组件之间的区别是啥？" class="headerlink" title="问题2：类组件和函数组件之间的区别是啥？"></a>问题2：类组件和函数组件之间的区别是啥？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<ul>
+<li><strong>类组件</strong>可以使用其他特性，如状态 <code>state</code> 和生命周期钩子。</li>
+<li>当组件只是接收 <code>props</code> 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。</li>
+</ul>
+<p>函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。<br>区别函数组件类组件是否有 <code>this</code>没有有是否有生命周期没有有是否有状态 <code>state</code>没有有</p>
+<h3 id="问题-3：React-中-refs-干嘛用的？"><a href="#问题-3：React-中-refs-干嘛用的？" class="headerlink" title="问题 3：React 中 refs 干嘛用的？"></a>问题 3：React 中 refs 干嘛用的？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p><code>Refs</code> 提供了一种访问在<code>render</code>方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，<code>props</code> 是父子组件交互的唯一方式，想要修改子组件，需要使用新的<code>pros</code>重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 <code>Refs</code>。</p>
+<p>咱们可以在组件添加一个 <code>ref</code> 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。</p>
+<pre><code>class UnControlledForm extends Component &#123;
+  handleSubmit = () =&gt; &#123;
+    console.log(&quot;Input Value: &quot;, this.input.value)
+  &#125;
+  render () &#123;
+    return (
+      &lt;form onSubmit=&#123;this.handleSubmit&#125;&gt;
+        &lt;input
+          type=&#39;text&#39;
+          ref=&#123;(input) =&gt; this.input = input&#125; /&gt;
+        &lt;button type=&#39;submit&#39;&gt;Submit&lt;/button&gt;
+      &lt;/form&gt;
+    )
+  &#125;
+&#125;
+</code></pre>
+<p>请注意，<code>input</code> 元素有一个<code>ref</code>属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 <code>handleSubmit</code> 函数内部访问它。</p>
+<p>经常被误解的只有在类组件中才能使用 <code>refs</code>，但是<code>refs</code>也可以通过利用 JS 中的闭包与函数组件一起使用。</p>
+<pre><code>function CustomForm (&#123;handleSubmit&#125;) &#123;
+  let inputElement
+  return (
+    &lt;form onSubmit=&#123;() =&gt; handleSubmit(inputElement.value)&#125;&gt;
+      &lt;input
+        type=&#39;text&#39;
+        ref=&#123;(input) =&gt; inputElement = input&#125; /&gt;
+      &lt;button type=&#39;submit&#39;&gt;Submit&lt;/button&gt;
+    &lt;/form&gt;
+  )
+&#125;
+</code></pre>
+<h3 id="问题-4：在-React-中如何处理事件"><a href="#问题-4：在-React-中如何处理事件" class="headerlink" title="问题 4：在 React 中如何处理事件"></a>问题 4：在 React 中如何处理事件</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p>为了解决跨浏览器的兼容性问题，<code>SyntheticEvent</code> 实例将被传递给你的事件处理函数，<code>SyntheticEvent</code>是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 <code>stopPropagation()</code> 和 <code>preventDefault()</code>。</p>
+<p>比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。</p>
+<h3 id="问题-5：state-和-props-区别是啥？"><a href="#问题-5：state-和-props-区别是啥？" class="headerlink" title="问题 5：state 和 props 区别是啥？"></a>问题 5：state 和 props 区别是啥？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p><code>props</code>和<code>state</code>是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即</p>
+<ul>
+<li><code>state</code> 是组件自己管理数据，控制自己的状态，可变；</li>
+<li><code>props</code> 是外部传入的数据参数，不可变；</li>
+<li>没有<code>state</code>的叫做无状态组件，有<code>state</code>的叫做有状态组件；</li>
+<li>多用 <code>props</code>，少用 <code>state</code>，也就是多写无状态组件。</li>
+</ul>
+<h3 id="问题-6：如何创建-refs"><a href="#问题-6：如何创建-refs" class="headerlink" title="问题 6：如何创建 refs"></a>问题 6：如何创建 refs</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p>Refs 是使用 <code>React.createRef()</code> 创建的，并通过 <code>ref</code> 属性附加到 React 元素。在构造组件时，通常将 <code>Refs</code> 分配给实例属性，以便可以在整个组件中引用它们。</p>
+<pre><code>class MyComponent extends React.Component &#123;
+  constructor(props) &#123;
+    super(props);
+    this.myRef = React.createRef();
+  &#125;
+  render() &#123;
+    return &lt;p ref=&#123;this.myRef&#125; /&gt;;
+  &#125;
+&#125;
+</code></pre>
+<p>或者这样用：</p>
+<pre><code>class UserForm extends Component &#123;
+  handleSubmit = () =&gt; &#123;
+    console.log(&quot;Input Value is: &quot;, this.input.value)
+  &#125;
+  render () &#123;
+    return (
+      &lt;form onSubmit=&#123;this.handleSubmit&#125;&gt;
+        &lt;input
+          type=&#39;text&#39;
+          ref=&#123;(input) =&gt; this.input = input&#125; /&gt; // Access DOM input in handle submit
+        &lt;button type=&#39;submit&#39;&gt;Submit&lt;/button&gt;
+      &lt;/form&gt;
+    )
+  &#125;
+&#125;
+</code></pre>
+<h3 id="问题-7：什么是高阶组件？"><a href="#问题-7：什么是高阶组件？" class="headerlink" title="问题 7：什么是高阶组件？"></a>问题 7：什么是高阶组件？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p><strong>高阶组件(HOC)<strong>是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为</strong>纯组件</strong>，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。</p>
+<pre><code>const EnhancedComponent = higherOrderComponent(WrappedComponent);
+</code></pre>
+<p>HOC 可以用于以下许多用例</p>
+<ul>
+<li>代码重用、逻辑和引导抽象</li>
+<li>渲染劫持</li>
+<li>state 抽象和操作</li>
+<li>props 处理</li>
+</ul>
+<h3 id="问题-8：在构造函数调用-super-并将-props-作为参数传入的作用是啥？"><a href="#问题-8：在构造函数调用-super-并将-props-作为参数传入的作用是啥？" class="headerlink" title="问题 8：在构造函数调用 super 并将 props 作为参数传入的作用是啥？"></a>问题 8：在构造函数调用 <code>super</code> 并将 <code>props</code> 作为参数传入的作用是啥？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐</p>
+</blockquote>
+<p>在调用 <code>super()</code> 方法之前，子类构造函数无法使用<code>this</code>引用，ES6 子类也是如此。将 <code>props</code> 参数传递给 <code>super()</code> 调用的主要原因是在子构造函数中能够通过<code>this.props</code>来获取传入的 <code>props</code>。</p>
+<p><strong>传递 props</strong></p>
+<pre><code>class MyComponent extends React.Component &#123;
+  constructor(props) &#123;
+    super(props);
+    console.log(this.props);  // &#123; name: &#39;sudheer&#39;,age: 30 &#125;
+  &#125;
+&#125;
+</code></pre>
+<p><strong>没传递 props</strong></p>
+<pre><code>class MyComponent extends React.Component &#123;
+  constructor(props) &#123;
+    super();
+    console.log(this.props); // undefined
+    // 但是 Props 参数仍然可用
+    console.log(props); // Prints &#123; name: &#39;sudheer&#39;,age: 30 &#125;
+  &#125;
+  render() &#123;
+    // 构造函数外部不受影响
+    console.log(this.props) // &#123; name: &#39;sudheer&#39;,age: 30 &#125;
+  &#125;
+&#125;
+</code></pre>
+<p>上面示例揭示了一点。<code>props</code> 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。</p>
+<h3 id="问题-9：什么是控制组件？"><a href="#问题-9：什么是控制组件？" class="headerlink" title="问题 9：什么是控制组件？"></a>问题 9：什么是控制组件？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>在 HTML 中，表单元素如 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>和<code>&lt;select&gt;</code>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。</p>
+<p>而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如<code>onChange</code>)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为<strong>受控组件</strong>。</p>
+<h3 id="问题-10：如何-React-createElement-？"><a href="#问题-10：如何-React-createElement-？" class="headerlink" title="问题 10：如何 React.createElement ？"></a>问题 10：如何 React.createElement ？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p><strong>问题：</strong></p>
+<pre><code>const element = (
+  &lt;h1 className=&quot;greeting&quot;&gt;
+    Hello, world!
+  &lt;/h1&gt;
+)
+</code></pre>
+<p>上述代码如何使用 <code>React.createElement</code> 来实现:</p>
+<pre><code>const element = React.createElement(
+  &#39;h1&#39;,
+  &#123;className: &#39;greeting&#39;&#125;,
+  &#39;Hello, world!&#39;
+);
+</code></pre>
+<h3 id="问题-11：讲讲什么是-JSX-？"><a href="#问题-11：讲讲什么是-JSX-？" class="headerlink" title="问题 11：讲讲什么是 JSX ？"></a>问题 11：讲讲什么是 JSX ？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>当 <strong>Facebook</strong> 第一次发布 React 时，他们还引入了一种新的 JS 方言 <code>JSX</code>，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用<code>Babel</code>和<code>webpack</code>等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。</p>
+<pre><code>class MyComponent extends React.Component &#123;
+  render() &#123;
+    let props = this.props;
+    return (
+      &lt;p className=&quot;my-component&quot;&gt;
+      &lt;a href=&#123;props.url&#125;&gt;&#123;props.name&#125;&lt;/a&gt;
+      &lt;/p&gt;
+    );
+  &#125;
+&#125;
+</code></pre>
+<h3 id="问题-12：根据下面定义的代码，可以找出存在的两个问题吗-？"><a href="#问题-12：根据下面定义的代码，可以找出存在的两个问题吗-？" class="headerlink" title="问题 12：根据下面定义的代码，可以找出存在的两个问题吗 ？"></a>问题 12：根据下面定义的代码，可以找出存在的两个问题吗 ？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>请看下面的代码：</p>
+<p><img src="https://img.php.cn/upload/image/142/335/636/1574835619281427.png" alt="1574835619281427.png"></p>
+<p>答案：</p>
+<p>1.在构造函数没有将 <code>props</code> 传递给 <code>super</code>，它应该包括以下行</p>
+<pre><code>constructor(props) &#123;
+  super(props);
+  // ...
+&#125;
+</code></pre>
+<p>2.事件监听器(通过<code>addEventListener()</code>分配时)的作用域不正确，因为 ES6 不提供自动绑定。因此，开发人员可以在构造函数中重新分配<code>clickHandler</code>来包含正确的绑定:</p>
+<pre><code>constructor(props) &#123;
+  super(props);
+  this.clickHandler = this.clickHandler.bind(this);
+  // ...
+&#125;
+</code></pre>
+<h3 id="问题-13：为什么不直接更新-state-呢"><a href="#问题-13：为什么不直接更新-state-呢" class="headerlink" title="问题 13：为什么不直接更新 state 呢 ?"></a>问题 13：为什么不直接更新 <code>state</code> 呢 ?</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>如果试图直接更新 <code>state</code> ，则不会重新渲染组件。</p>
+<pre><code> // 错误
+ This.state.message = &#39;Hello world&#39;;
+</code></pre>
+<p>需要使用<code>setState()</code>方法来更新 <code>state</code>。它调度对组件<code>state</code>对象的更新。当<code>state</code>改变时，组件通过重新渲染来响应：</p>
+<pre><code>// 正确做法
+This.setState(&#123;message: ‘Hello World’&#125;);
+</code></pre>
+<h3 id="问题-14：React-组件生命周期有哪些不同阶段？"><a href="#问题-14：React-组件生命周期有哪些不同阶段？" class="headerlink" title="问题 14：React 组件生命周期有哪些不同阶段？"></a>问题 14：React 组件生命周期有哪些不同阶段？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>在组件生命周期中有四个不同的阶段：</p>
+<ol>
+<li><strong>Initialization</strong>：在这个阶段，组件准备设置初始化状态和默认属性。</li>
+<li><strong>Mounting</strong>：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括<code>componentWillMount</code>和<code>componentDidMount</code>生命周期方法。</li>
+<li><strong>Updating</strong>：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括<code>shouldComponentUpdate</code>、<code>componentWillUpdate</code>和<code>componentDidUpdate</code>生命周期方法。</li>
+<li><strong>Unmounting</strong>：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 <code>componentWillUnmount</code> 生命周期方法。</li>
+</ol>
+<p>除以上四个常用生命周期外，还有一个错误处理的阶段：</p>
+<p><strong>Error Handling</strong>：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 <code>componentDidCatch</code> 生命周期方法。</p>
+<p><img src="https://img.php.cn/upload/image/924/906/470/1574835665593845.png" alt="1574835665593845.png"></p>
+<h3 id="问题-15：React-的生命周期方法有哪些？"><a href="#问题-15：React-的生命周期方法有哪些？" class="headerlink" title="问题 15：React 的生命周期方法有哪些？"></a>问题 15：React 的生命周期方法有哪些？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<ul>
+<li><code>componentWillMount</code>:在渲染之前执行，用于根组件中的 App 级配置。</li>
+<li><code>componentDidMount</code>：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。</li>
+<li><code>componentWillReceiveProps</code>：在初始化<code>render</code>的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染</li>
+<li><code>shouldComponentUpdate</code>：确定是否更新组件。默认情况下，它返回<code>true</code>。如果确定在 <code>state</code> 或 <code>props</code> 更新后组件不需要在重新渲染，则可以返回<code>false</code>，这是一个提高性能的方法。</li>
+<li><code>componentWillUpdate</code>：在<code>shouldComponentUpdate</code>返回 <code>true</code> 确定要更新组件之前件之前执行。</li>
+<li><code>componentDidUpdate</code>：它主要用于更新DOM以响应<code>props</code>或<code>state</code>更改。</li>
+<li><code>componentWillUnmount</code>：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。</li>
+</ul>
+<h3 id="问题-16：这三个点-…-在-React-干嘛用的？"><a href="#问题-16：这三个点-…-在-React-干嘛用的？" class="headerlink" title="问题 16：这三个点(…)在 React 干嘛用的？"></a>问题 16：这三个点(…)在 React 干嘛用的？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p><code>...</code> 在React（使用JSX）代码中做什么？它叫什么？</p>
+<pre><code>&lt;Modal &#123;...this.props&#125; title=&#39;Modal heading&#39;  animation=&#123;false&#125;/&gt;
+</code></pre>
+<p>这个叫扩展操作符号或者展开操作符，例如，如果<code>this.props</code>包含<code>a：1</code>和<code>b：2</code>，则</p>
+<pre><code>&lt;Modal &#123;...this.props&#125; title=&#39;Modal heading&#39; animation=&#123;false&#125;&gt;
+</code></pre>
+<p>等价于下面内容：</p>
+<pre><code>&lt;Modal a=&#123;this.props.a&#125; b=&#123;this.props.b&#125; title=&#39;Modal heading&#39; animation=&#123;false&#125;&gt;
+</code></pre>
+<p>扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便，在更新<code>state</code> 咱们就经常这么做：</p>
+<pre><code>this.setState(prevState =&gt; &#123;
+    return &#123;foo: &#123;...prevState.foo, a: &quot;updated&quot;&#125; &#125;;
+&#125;);
+</code></pre>
+<h3 id="问题-17：使用-React-Hooks-好处是啥？"><a href="#问题-17：使用-React-Hooks-好处是啥？" class="headerlink" title="问题 17：使用 React Hooks 好处是啥？"></a>问题 17：使用 React Hooks 好处是啥？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 <code>props</code> 的负担。<code>Hooks</code> 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。</p>
+<p>Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 <code>componentDidMount</code>、<code>componentDidUpdate</code>、<code>componentWillUnmount</code>。相反，使用像<code>useEffect</code>这样的内置钩子。</p>
+<h3 id="问题-18：什么是-React-Hooks？"><a href="#问题-18：什么是-React-Hooks？" class="headerlink" title="问题 18：什么是 React Hooks？"></a>问题 18：什么是 React Hooks？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p><strong>Hooks</strong>是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用<code>state</code>和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易。</p>
+<h3 id="问题-19：React-中的-useState-是什么？"><a href="#问题-19：React-中的-useState-是什么？" class="headerlink" title="问题 19：React 中的 useState() 是什么？"></a>问题 19：React 中的 <code>useState()</code> 是什么？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>下面说明<code>useState(0)</code>的用途：</p>
+<pre><code>...
+const [count, setCounter] = useState(0);
+const [moreStuff, setMoreStuff] = useState(...);
+...
+const setCount = () =&gt; &#123;
+    setCounter(count + 1);
+    setMoreStuff(...);
+    ...
+&#125;;
+</code></pre>
+<p><code>useState</code> 是一个内置的 React Hook。<code>useState(0)</code> 返回一个元组，其中第一个参数<code>count</code>是计数器的当前状态，<code>setCounter</code> 提供更新计数器状态的方法。</p>
+<p>咱们可以在任何地方使用<code>setCounter</code>方法更新计数状态-在这种情况下，咱们在<code>setCount</code>函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件。</p>
+<h3 id="问题-20：React-中的StrictMode-严格模式-是什么？？"><a href="#问题-20：React-中的StrictMode-严格模式-是什么？？" class="headerlink" title="问题 20：React 中的StrictMode(严格模式)是什么？？"></a>问题 20：React 中的StrictMode(严格模式)是什么？？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>React 的<code>StrictMode</code>是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<code>&lt;StrictMode /&gt;</code>包装一组组件，并且可以帮咱们以下检查：</p>
+<ul>
+<li>验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。</li>
+<li>验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。</li>
+<li>通过识别潜在的风险预防一些副作用。</li>
+</ul>
+<h3 id="问题-21：为什么类方法需要绑定到类实例？"><a href="#问题-21：为什么类方法需要绑定到类实例？" class="headerlink" title="问题 21：为什么类方法需要绑定到类实例？"></a>问题 21：为什么类方法需要绑定到类实例？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>在 JS 中，<code>this</code> 值会根据当前上下文变化。在 React 类组件方法中，开发人员通常希望 <code>this</code> 引用组件的当前实例，因此有必要将这些方法绑定到实例。通常这是在构造函数中完成的:</p>
+<pre><code>class SubmitButton extends React.Component &#123;
+  constructor(props) &#123;
+    super(props);
+    this.state = &#123;
+      isFormSubmitted: false
+    &#125;;
+    this.handleSubmit = this.handleSubmit.bind(this);
+  &#125;
+  handleSubmit() &#123;
+    this.setState(&#123;
+      isFormSubmitted: true
+    &#125;);
+  &#125;
+  render() &#123;
+    return (
+      &lt;button onClick=&#123;this.handleSubmit&#125;&gt;Submit&lt;/button&gt;
+    )
+  &#125;
+&#125;
+</code></pre>
+<h3 id="问题-22：什么是-prop-drilling，如何避免？"><a href="#问题-22：什么是-prop-drilling，如何避免？" class="headerlink" title="问题 22：什么是 prop drilling，如何避免？"></a>问题 22：什么是 prop drilling，如何避免？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 <code>prop</code> 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做<strong>prop drilling</strong>。</p>
+<p><code>prop drilling</code>的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。</p>
+<p>为了避免<code>prop drilling</code>，一种常用的方法是使用<strong>React Context</strong>。通过定义提供数据的<code>Provider</code>组件，并允许嵌套的组件通过<code>Consumer</code>组件或<code>useContext</code> Hook 使用上下文数据。</p>
+<h3 id="问题-23：描述-Flux-与-MVC？"><a href="#问题-23：描述-Flux-与-MVC？" class="headerlink" title="问题 23：描述 Flux 与 MVC？"></a>问题 23：描述 Flux 与 MVC？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<p>传统的 MVC 模式在分离数据(Model)、UI(View和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:</p>
+<p><strong>数据流不够清晰</strong>:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。</p>
+<p><strong>缺乏数据完整性</strong>:模型数据可以在任何地方发生突变，从而在整个UI中产生不可预测的结果。</p>
+<p>使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的React 组件都能够根据 <code>store</code> 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性。</p>
+<h3 id="问题-24：受控组件和非受控组件区别是啥？"><a href="#问题-24：受控组件和非受控组件区别是啥？" class="headerlink" title="问题 24：受控组件和非受控组件区别是啥？"></a>问题 24：受控组件和非受控组件区别是啥？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐</p>
+</blockquote>
+<ul>
+<li><strong>受控组件</strong>是 React 控制中的组件，并且是表单数据真实的唯一来源。</li>
+<li>非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。</li>
+</ul>
+<p>尽管非受控组件通常更易于实现，因为只需使用<code>refs</code>即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。</p>
+<p>这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用&#x2F;启用按钮，强制输入格式。</p>
+<h3 id="问题-25：这段代码有什么问题吗？"><a href="#问题-25：这段代码有什么问题吗？" class="headerlink" title="问题 25：这段代码有什么问题吗？"></a>问题 25：这段代码有什么问题吗？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>这段代码有什么问题:</p>
+<pre><code>this.setState((prevState, props) =&gt; &#123;
+  return &#123;
+    streak: prevState.streak + props.count
+  &#125;
+&#125;)
+</code></pre>
+<p><strong>答案：</strong></p>
+<p>没有什么问题。这种方式很少被使用，咱们可以将一个函数传递给<code>setState</code>，该函数接收上一个 <code>state</code> 的值和当前的<code>props</code>，并返回一个新的状态，如果咱们需要根据以前的状态重新设置状态，推荐使用这种方式。</p>
+<h3 id="问题-26：什么是-React-Context"><a href="#问题-26：什么是-React-Context" class="headerlink" title="问题 26：什么是 React Context?"></a>问题 26：什么是 React Context?</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p><code>Context</code> 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 <code>props</code> 属性。</p>
+<h3 id="问题-27：什么是-React-Fiber"><a href="#问题-27：什么是-React-Fiber" class="headerlink" title="问题 27：什么是 React Fiber?"></a>问题 27：什么是 React Fiber?</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p><strong>Fiber</strong> 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。<strong>React Fiber</strong> 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。</p>
+<p>React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。</p>
+<h3 id="问题-28：如何在-ReactJS-的-Props上应用验证？"><a href="#问题-28：如何在-ReactJS-的-Props上应用验证？" class="headerlink" title="问题 28：如何在 ReactJS 的 Props上应用验证？"></a>问题 28：如何在 ReactJS 的 Props上应用验证？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 <code>props</code>，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 <code>props</code> 用 <code>isRequired</code>定义的。</p>
+<p>下面是一组预定义的 prop 类型:</p>
+<ul>
+<li>React.PropTypes.string</li>
+<li>React.PropTypes.number</li>
+<li>React.PropTypes.func</li>
+<li>React.PropTypes.node</li>
+<li>React.PropTypes.bool</li>
+</ul>
+<p>例如，咱们为用户组件定义了如下的<code>propTypes</code></p>
+<pre><code>import PropTypes from &#39;prop-types&#39;;
+class User extends React.Component &#123;
+  render() &#123;
+    return (
+      &lt;h1&gt;Welcome, &#123;this.props.name&#125;&lt;/h1&gt;
+      &lt;h2&gt;Age, &#123;this.props.age&#125;
+    );
+  &#125;
+&#125;
+User.propTypes = &#123;
+  name: PropTypes.string.isRequired,
+  age: PropTypes.number.isRequired
+&#125;;
+</code></pre>
+<h3 id="问题-29：在-React-中使用构造函数和-getInitialState-有什么区别？"><a href="#问题-29：在-React-中使用构造函数和-getInitialState-有什么区别？" class="headerlink" title="问题 29：在 React 中使用构造函数和 getInitialState 有什么区别？"></a>问题 29：在 React 中使用构造函数和 getInitialState 有什么区别？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>构造函数和<code>getInitialState</code>之间的区别就是<code>ES6</code>和<code>ES5</code>本身的区别。在使用<code>ES6</code>类时，应该在构造函数中初始化<code>state</code>，并在使用<code>React.createClass</code>时定义<code>getInitialState</code>方法。</p>
+<pre><code>class MyComponent extends React.Component &#123;
+  constructor(props) &#123;
+    super(props);
+    this.state = &#123; /* initial state */ &#125;;
+  &#125;
+&#125;
+</code></pre>
+<p>等价于：</p>
+<pre><code>var MyComponent = React.createClass(&#123;
+  getInitialState() &#123;
+    return &#123; /* initial state */ &#125;;
+  &#125;,
+&#125;);
+</code></pre>
+<h3 id="问题-30：如何有条件地向-React-组件添加属性？"><a href="#问题-30：如何有条件地向-React-组件添加属性？" class="headerlink" title="问题 30：如何有条件地向 React 组件添加属性？"></a>问题 30：如何有条件地向 React 组件添加属性？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>对于某些属性，React 非常聪明，如果传递给它的值是虚值，可以省略该属性。例如：</p>
+<pre><code>var InputComponent = React.createClass(&#123;
+    render: function() &#123;
+      var required = true;
+      var disabled = false;
+      return (
+        &lt;input type=&quot;text&quot; disabled=&#123;disabled&#125; required=&#123;required&#125; /&gt;
+      );
+    &#125;
+&#125;);
+</code></pre>
+<p>渲染结果：</p>
+<pre><code>&lt;input type=&quot;text&quot; required&gt;
+</code></pre>
+<p>另一种可能的方法是：</p>
+<pre><code>var condition = true;
+var component = (
+  &lt;p
+    value=&quot;foo&quot;
+    &#123; ...( condition &amp;&amp; &#123; disabled: true &#125; ) &#125; /&gt;
+);
+</code></pre>
+<h3 id="问题-31：Hooks会取代-render-props-和高阶组件吗？"><a href="#问题-31：Hooks会取代-render-props-和高阶组件吗？" class="headerlink" title="问题 31：Hooks会取代 render props 和高阶组件吗？"></a>问题 31：Hooks会取代 <code>render props</code> 和高阶组件吗？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>通常，<code>render props</code>和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。</p>
+<p>这两种模式仍然有一席之地(例如，一个虚拟的 <code>scroller</code> 组件可能有一个 <code>renderItem prop</code>，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套。</p>
+<h3 id="问题-32：如何避免组件的重新渲染？"><a href="#问题-32：如何避免组件的重新渲染？" class="headerlink" title="问题 32：如何避免组件的重新渲染？"></a>问题 32：如何避免组件的重新渲染？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐</p>
+</blockquote>
+<p>React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：</p>
+<ul>
+<li><code>React.memo()</code>:这可以防止不必要地重新渲染函数组件</li>
+<li><code>PureComponent</code>:这可以防止不必要地重新渲染类组件</li>
+</ul>
+<p>这两种方法都依赖于对传递给组件的<code>props</code>的浅比较，如果 <code>props</code> 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。</p>
+<p>通过使用 <strong>React Profiler</strong>，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。</p>
+<h3 id="问题-33：什么是纯函数？"><a href="#问题-33：什么是纯函数？" class="headerlink" title="问题 33：什么是纯函数？"></a>问题 33：什么是纯函数？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐⭐</p>
+</blockquote>
+<p>纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。</p>
+<h3 id="问题-34：当调用setState时，React-render-是如何工作的？"><a href="#问题-34：当调用setState时，React-render-是如何工作的？" class="headerlink" title="问题 34：当调用setState时，React render 是如何工作的？"></a>问题 34：当调用<code>setState</code>时，React <code>render</code> 是如何工作的？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐⭐</p>
+</blockquote>
+<p>咱们可以将”<code>render</code>“分为两个步骤：</p>
+<ol>
+<li>虚拟 DOM 渲染:当<code>render</code>方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用<code>setState()</code>时，<code>render</code>会被再次调用，因为默认情况下<code>shouldComponentUpdate</code>总是返回<code>true</code>，所以默认情况下 React 是没有优化的。</li>
+<li>原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。</li>
+</ol>
+<h3 id="问题-35：如何避免在React重新绑定实例？"><a href="#问题-35：如何避免在React重新绑定实例？" class="headerlink" title="问题 35：如何避免在React重新绑定实例？"></a>问题 35：如何避免在React重新绑定实例？</h3><blockquote>
+<p>主题: React<br>难度: ⭐⭐⭐⭐⭐</p>
+</blockquote>
+<p>有几种常用方法可以避免在 React 中绑定方法：</p>
+<p>1.将事件处理程序定义为内联箭头函数</p>
+<pre><code>class SubmitButton extends React.Component &#123;
+  constructor(props) &#123;
+    super(props);
+    this.state = &#123;
+      isFormSubmitted: false
+    &#125;;
+  &#125;
+  render() &#123;
+    return (
+      &lt;button onClick=&#123;() =&gt; &#123;
+        this.setState(&#123; isFormSubmitted: true &#125;);
+      &#125; &#125;&gt;Submit&lt;/button&gt;
+    )
+  &#125;
+&#125;
+</code></pre>
+<p>2.使用箭头函数来定义方法：</p>
+<pre><code>class SubmitButton extends React.Component &#123;
+  state = &#123;
+    isFormSubmitted: false
+  &#125;
+  handleSubmit = () =&gt; &#123;
+    this.setState(&#123;
+      isFormSubmitted: true
+    &#125;);
+  &#125;
+  render() &#123;
+    return (
+      &lt;button onClick=&#123;this.handleSubmit&#125;&gt;Submit&lt;/button&gt;
+    )
+  &#125;
+&#125;
+</code></pre>
+<p>3.使用带有 Hooks 的函数组件</p>
+<pre><code>const SubmitButton = () =&gt; &#123;
+  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+  return (
+    &lt;button onClick=&#123;() =&gt; &#123;
+        setIsFormSubmitted(true);
+    &#125; &#125;&gt;Submit&lt;/button&gt;
+  )
+&#125;;
+</code></pre>
+<blockquote>
+<p>作者：Alex<br>来源：dev.to</p>
+</blockquote>
+<p>本文来自HTML中文网 <a target="_blank" rel="noopener" href="https://www.html.cn/interview/">前端面试题</a> 栏目！！</p>
+<p>以上就是35道值得收藏的React面试题的详细内容，更多请关注html中文网其它相关文章！</p>
+</div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/3154.html">https://xuehuayu.cn/article/3154.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/54258.html">50个最简单的JavaScript面试题</a><a class="next" href="/article/35397.html">React 开发人员应该掌握的 22 种神奇工具</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
+const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
+const locale = {
+  placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
+  sofa: '沙发空缺中，还不快抢~',
+};
+Waline.init({
+  el: '#vcomment',
+  serverURL: serverURL,
+  pageSize: '20',
+  visitor: true, // 阅读量统计
+  requiredMeta: ['nick', 'mail'],
+  emoji: [
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
+    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
+  ],
+  locale,
+  pageview: true
+})
+</script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
+  var val = $(this).val()
+  var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
+  var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
+  var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
+  if (val === 'self') {
+      $('#search').html(self)
+      var search_path = 'search.xml';
+      if (search_path.length == 0) {
+        search_path = 'search.xml';
+      }
+      var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
+      searchFunc(path, 'local-search-input', 'local-search-result');
+  } else if (val === 'baidu') {
+      $('#search').html(baidu)
+  } else if (val === 'google') {
+      $('#search').html(google)
+  }
+})</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
+  var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
+  if (cnb) {
+    var gxba =document.getElementById('gxba')
+    var gaba =document.getElementById('gaba')
+    var gabaLink =document.getElementById('gaba-link')
+    gxba.innerText ='京ICP备20007647号-1'
+    gaba.innerText ='京公网安备 11010802031254号'
+    gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
+  }
+})()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>