{"pageContext":{"index":95,"total":367,"name":"2021-02-28","items":[{"node":{"frontmatter":{"title":"React Native性能调优 - 该做的和不该做的","publish":true,"cover":"https://miro.medium.com/max/1400/1*l1LA9yCAkMQiHZYNpcHIZQ.png","showCover":true,"date":"2021-02-28","category":"mobile","url":"https://medium.com/crowdbotics/react-native-performance-do-and-dont-88424e873bbd","author":"Aman Mittal","translator":"","tags":["react native"],"priority":1},"html":"<ul>\n<li>使用图像缓存解决方案(推荐<a href=\"https://github.com/DylanVann/react-native-fast-image\">react-native-fast-image</a>)</li>\n<li>使用PNG格式而不是JPG</li>\n<li>使用较小尺寸的图像</li>\n<li>对图像使用WEBP格式。它可以帮助将iOS和Android上的二进制文件大小减少29％。</li>\n<li>使用<a href=\"https://fbflipper.com/docs/features/react-native/\">Flipper（支持layout调试）,expo不支持</a>调试\n<img src=\"https://fbflipper.com/img/network.png\"></li>\n<li>启用<a href=\"https://reactnative.dev/docs/hermes\">Hermes</a></li>\n<li>不要将控制台语句保留在源代码中</li>\n<li>\n<p>不要使用Scrollview渲染大量数据项</p>\n<blockquote>\n<p>ScrollView组件一次渲染所有子级,处理大量数据会直接影响应用程序的性能。为了处理大量项目，React Native提供了一个名为的组件FlatList。此组件可确保项目被延迟加载，以使应用程序不会消耗不一致的内存。</p>\n</blockquote>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"cron-parser - cron规则解析工具","publish":true,"cover":"","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://github.com/harrisiirak/cron-parser","author":"Harri Siirak","translator":"","tags":["nodejs"],"priority":1},"html":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> parser <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'cron-parser'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> interval <span class=\"token operator\">=</span> parser<span class=\"token punctuation\">.</span><span class=\"token function\">parseExpression</span><span class=\"token punctuation\">(</span><span class=\"token string\">'*/2 * * * *'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Date: '</span><span class=\"token punctuation\">,</span> interval<span class=\"token punctuation\">.</span><span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Sat Dec 29 2012 00:42:00 GMT+0200 (EET)</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Date: '</span><span class=\"token punctuation\">,</span> interval<span class=\"token punctuation\">.</span><span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Sat Dec 29 2012 00:44:00 GMT+0200 (EET)</span>\n\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Date: '</span><span class=\"token punctuation\">,</span> interval<span class=\"token punctuation\">.</span><span class=\"token function\">prev</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Sat Dec 29 2012 00:42:00 GMT+0200 (EET)</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Date: '</span><span class=\"token punctuation\">,</span> interval<span class=\"token punctuation\">.</span><span class=\"token function\">prev</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Sat Dec 29 2012 00:40:00 GMT+0200 (EET)</span>\n<span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">err</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Error: '</span> <span class=\"token operator\">+</span> err<span class=\"token punctuation\">.</span>message<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>"}},{"node":{"frontmatter":{"title":"rclone - 同步云端存储命令行工具,支持多种云服务","publish":true,"cover":"https://camo.githubusercontent.com/486e96833b074a96dff53dfa6bd1d2d4eb9d08629ea07e48bdd38a9f3e13e622/68747470733a2f2f72636c6f6e652e6f72672f696d672f6c6f676f5f6f6e5f6c696768745f5f686f72697a6f6e74616c5f636f6c6f722e737667","showCover":true,"date":"2021-02-28","category":"devops","url":"https://github.com/rclone/rclone","author":"rclone","translator":"","tags":["cloud"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"free-for-dev 免费开发资源汇总","publish":true,"cover":"","showCover":true,"date":"2021-02-28","category":"devops","url":"https://github.com/ripienaar/free-for-dev","author":"R.I.Pienaar","translator":"","tags":["free"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-currency-input-field react货币输入组件","publish":true,"cover":"https://github.com/cchanxzy/react-currency-input-field/raw/master/demo/demo.gif","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://github.com/cchanxzy/react-currency-input-field","author":"Chun","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-native-calendars - 支持expo的react native日历组件","publish":true,"cover":"https://github.com/wix-private/wix-react-native-calendar/raw/master/demo/calendar.gif?raw=true","showCover":true,"date":"2021-02-28","category":"mobile","url":"https://github.com/wix/react-native-calendars","author":"wix","translator":"","tags":["calendar"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"下一代图片解码技术比较-推荐JPEG XL,AVIF","publish":true,"cover":"https://res.cloudinary.com/cloudinary-marketing/image/upload/w_700,c_fill,f_auto,q_auto,dpr_2.0/Web_Assets/blog/Battle-of-the-Codecs_fnl.png","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg","author":"Jon Sneyers","translator":"","tags":["picture"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"simple-keyboard 虚拟键盘组件","publish":true,"cover":"https://camo.githubusercontent.com/1312665154d06bc770c158fa652e3fcdfd175362820524c3d23dd86fa2f82305/68747470733a2f2f692e696d6775722e636f6d2f506f363635396e2e676966","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://github.com/hodgef/simple-keyboard","author":"Francisco Hodge","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"全漫画讲解字节码的历史","publish":true,"cover":"https://miro.medium.com/max/1400/1*Mohx3waXVkIh-jmIytYiCQ.png","showCover":true,"date":"2021-02-28","category":"other","url":"https://onlyliuxin.medium.com/long-live-byte-code-1bec3b33ac02","author":"Andy","translator":"","tags":["compile"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"在React使用中避免竞争条件和内存泄漏","publish":true,"cover":"","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://www.wisdomgeek.com/development/web-development/react/avoiding-race-conditions-memory-leaks-react-useeffect/","author":"SARANSH KATARIA","translator":"","tags":["react"],"priority":1},"html":"<ul>\n<li>\n<p>使用变量判断</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n<span class=\"token keyword\">let</span> isComponentMounted <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> fetchData <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://jsonplaceholder.typicode.com/todos/1'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> newData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>isComponentMounted<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">setTodo</span><span class=\"token punctuation\">(</span>newData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">fetchData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  isComponentMounted <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n</li>\n<li>\n<p>推荐方案:对于http请求使用DOM标准中的AbortController取消</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n<span class=\"token keyword\">let</span> abortController <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">AbortController</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> fetchData <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://jsonplaceholder.typicode.com/todos/1'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n        signal<span class=\"token punctuation\">:</span> abortController<span class=\"token punctuation\">.</span>signal<span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> newData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token function\">setTodo</span><span class=\"token punctuation\">(</span>newData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">catch</span><span class=\"token punctuation\">(</span>error<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n     <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>error<span class=\"token punctuation\">.</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'AbortError'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// Handling error thrown by aborting request</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">fetchData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  abortController<span class=\"token punctuation\">.</span><span class=\"token function\">abort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"教程 - 使用CSS渐变创建响应图像效果并保持长宽比","publish":true,"cover":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/160bb074-97fa-4675-bdb1-3812da69d9de/gradient-overlay-css-gradients-aspect-ratio.png","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/","author":"Stephanie Eckles","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"教程 - 详解shadow特效","publish":true,"cover":"https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/02/shadow-types.jpg?w=1914&ssl=1","showCover":true,"date":"2021-02-28","category":"frontend","url":"https://css-tricks.com/getting-deep-into-shadows/","author":"rclone","translator":"","tags":["cloud"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"用不可见字符创建短链接 - 支持heroku自部署","publish":true,"cover":"","showCover":true,"date":"2021-02-28","category":"devops","url":"https://github.com/zws-im/","author":"zws.im","translator":"","tags":["url"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"5亿美元的教训-花旗银行学到了UI设计的重要性","publish":true,"cover":"https://cdn.arstechnica.net/wp-content/uploads/2021/02/Screen-Shot-2021-02-17-at-11.35.28-AM.png","showCover":true,"date":"2021-02-28","category":"other","url":"https://arstechnica.com/tech-policy/2021/02/citibank-just-got-a-500-million-lesson-in-the-importance-of-ui-design/","author":"TIMOTHY B. LEE","translator":"","tags":["fun"],"priority":1},"html":"<p>财务软件Flexcube令人困惑的界面，导致银行意外地偿还了全部贷款的本金-其中大部分要到2023年才到期。</p>"}},{"node":{"frontmatter":{"title":"近3万台Mac设备感染了新型Silver Sparrow恶意软件","publish":true,"cover":"https://pics1.baidu.com/feed/b58f8c5494eef01f8a4cbf9ddac8802dbd317dc8.jpeg?token=2fbc7bec485395b8b41c4c4d13042896&s=7AA7A944C3B285CA447E90830300E0CB","showCover":true,"date":"2021-02-28","category":"security","url":"https://baijiahao.baidu.com/s?id=1692530519049327993&wfr=spider&for=pc","author":"E安全","translator":"","tags":["free"],"priority":1},"html":""}}]}}