Blog
Blog copied to clipboard
NieZhuZhu
Keep Refurbishing 🔨
# 如何使用 useRef 修复 React 性能问题  Refs 是 React 中很少会使用到的特性。如果你已经读过了官方的 [React Ref Guide](https://reactjs.org/docs/refs-and-the-dom.html)，你会从中了解到 Refs 被描述为重要的 React 数据流的 “逃生舱门”，需谨慎使用。Refs 被视为访问组件的基础 DOM 元素的正确方法。 伴随着 React Hooks 的到来，React 团队引入了...
# 5 种有趣的 useEffect 无限循环类型 一般来说，无限循环被认为是不好的做法。但在[一些边界 case](https://stackoverflow.com/questions/224204/why-use-infinite-loops) 中，你没有任何选择，只能选择无限循环。了解 React 的无限循环模式是件好事。  当无限循环没有无法停止时，最终浏览器会杀死你的代码正在运行的标签。所以不要使用没有任何断点的 “无限循环”。 # useEffect useEffect hook 允许我们在一个组件中表现出副作用。当 hooks 被引入 react 16 时，`useEffect` hooks 比其他 hooks 更有吸引力。因为它提供了 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`...
# 无密码认证，安全更有保障  密码是网络应用中最常用的认证机制之一。但是在实践中使用它们会带来安全风险和复杂问题。 因此，在这篇文章中，我将讨论 SRP，一种无密码认证机制，帮助你解决密码认证中的一些主要安全挑战。 ## 什么是 SRP？ [[SRP(Secure Remote Password) protocol]](http://srp.stanford.edu/index.html) 是一个增强的密码认证的密钥交换协议。 > 它是一个[零知识证明](https://baike.baidu.com/item/%E9%9B%B6%E7%9F%A5%E8%AF%86%E8%AF%81%E6%98%8E/8804311)的认证协议，这意味着服务器和客户端都不需要传输或存储与密码有关的信息。但是，他们仍然可以安全地验证对方的身份。 SRP 减轻了传统认证的复杂性，因为你不需要担心在服务器内或在客户与服务器通信之间保护与密码有关的信息。 因此，让我们看看 SRP 是如何工作的以及是如何解决一些与密码有关的核心安全挑战。 ## SRP 工作原理 让我们看看 SRP 是如何实现无密码认证的目标的。为了便于理解，我将该协议分为三个步骤进行描述。如需更深入的了解，请参考[官方文档](http://srp.stanford.edu/design.html)。 ### 第 1：注册...
> 译：[An Introduction to React Fiber - The Algorithm Behind React](https://www.velotio.com/engineering-blog/react-fiber-algorithm) 在这篇文章中，我们将了解 React Fiber —— React 背后的核心算法。React Fiber 是 React 16 中新的协调算法。你很可能听说过 React 15 中的 _virtualDOM_，这是旧的协调算法（因为它在内部使用堆栈也被称为堆栈协调器）。不同的渲染器，如 DOM、Native 和 Android 视图，都会共享同一个协调器，所以称它为...
## 前言  前段时间秋招面哔哩哔哩的时候，面试官问：如何实现 `flat` 方法？当时手写的并不完美，后来回盘复习，发现面试要求手写数组拍平（扁平化） `flat` 方法的面试官不在少数。其中包括：拼多多、小米、美团、滴滴、shopee、有赞等。手写 `flat` 方法是一道非常基础的面试题，通常出现在笔试或者第一轮面试当中，主要考察基本的手写代码的能力。今天就从了解 `flat` 特性到实现 `flat` 再到接住面试官的连环追问重新学习一遍数组拍平（扁平化） `flat` 方法吧。 ## 一段代码总结 `Array.prototype.flat()` 特性 > 注：数组拍平方法 `Array.prototype.flat()` 也叫数组扁平化、数组拉平、数组降维。本文统一叫：数组拍平 ```javascript const animals = ["🐷", ["🐶",...
# React 18 中新的 Suspense SSR 架构 ## 概述 React 18 将包括对 React 服务器端渲染（SSR）性能的架构改进。这些改进是实质性的，并且是几年来工作的结晶。这些改进大多是在幕后进行的，但有一些选择性机制你需要注意，特别是如果你**不使用**框架的话。 主要的新 API 是 `pipeToNodeWritable`，你可以在 [Upgrading to React 18 on the Server](https://github.com/reactwg/react-18/discussions/22) 中了解到。我们计划在细节上做更多的实现，因为这不是最终版本，并且还有一些事情需要解决。 现有的主要的 API 是 ``....
# 解构标志性的 Apple Watch Bubble UI  on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/10944/0*N-GwBFwqZbDSNOYy) 当第一款 [**Apple Watch**](https://en.wikipedia.org/wiki/Apple_Watch) 在 2015 年推出的时候，我对 [**WatchOS**](https://en.wikipedia.org/wiki/WatchOS) 的主屏幕设计感到震惊。它的布局不同于标准的网格式布局，而是提出了一种原始的视觉动态界面。 五年后，当我打开这款具有光滑又时尚 UI 的手表时，仍然感到敬畏。但是，从工程学的角度来看，我仍然对这种布局的底层原理感到困惑。 作为一名经验丰富的应用程序开发人员，我知道构造导航流程和布局对于任何应用程序的基础都至关重要。Apple 全部都做到了，并且还具有一定的灵活性，用户的满意度和好奇心。 当然，我喜欢使用 [**CSS Grid**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)、 **[Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)** 以及其他...
# 为什么要让你的代码尽可能简单  编程很像写作 —— 你应该从一个能用的“[不完美的初稿](https://medium.com/@jeffgoins/dont-waste-your-words-how-to-write-a-first-draft-that-is-crappy-but-usable-c5dbf977f5a5)”开始，再通过两三次修改，逐个解决初稿中存在的问题。 工程师们肯定会嘲笑自己居然被轻率地比作了”作家“—— 但是今天早上的文档又是谁写的呢？你不是在“写代码”吗? 软件开发人员从事着最具创意的工程类型的工作。毕竟，与构建桥梁的土木工程师相比，软件工程师在构建应用程序时可以发挥更多自己的创意。 在具有创意性的行业中工作意味着你可以向那些写文章的作者身上学习到很多的东西。那些常常被推荐用于解决写作困难的方法也是最好的写作建议之一。 下面让我来向你推荐“不完美初稿”的技巧 —— 因为它让你成为效率更高的 “coder”。 ## ”不完美初稿”的诀窍 “不完美初稿”的诀窍非常普遍，即使没读过网上那些各式各样的关于写作的博客，那你也可能早在英语课堂上就听说过。 “不完美的初稿”的关键就是，即使你的初稿写的非常的糟糕，但是你也只需完成初稿就够了 —— 因为任何初稿都比什么都没有的空白页强。 编辑修整自己的作品要比从头开始编写要容易的多，所以，你应该立即尝试地编写一些内容（不管是什么内容都可以）只要能让自己的代码可以正常的工作。 换句话说，你今天要在午饭前写完 100 行（有效）的不完美的代码还是 0 行的完美代码呢？ 当然，最后的结果都是，你会用以上任何一种方式完成 50 行完美的代码。但是编写“不完美的初稿”能带来心理上的优势：**你将在承受较少压力的情况下获得更大的成就感。** **你将会享受编码的快乐！**难道还有什么比这个更重要？...
# 理解 JavaScript 中模块的导入和导出  ## 简介 早期的 Web 网站主要由 [HTML](https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 和 [CSS](https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css) 组成。如果有任何 JavaScript 的代码需要在页面中执行，通常是以小的代码片段的形式来提供功能和交互性。结果就是通常 JavaScript 的代码都会被编写在一个文件中，然后通过 `script` 标签加载到页面中。开发人员可以将 JavaScript 代码拆分成多个 js 文件，但是所有 JavaScript 变量和[函数]()都会被添加到全局[作用域](https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript)中。 但是随着 [Angular](https://www.digitalocean.com/community/tags/angularjs)、[React](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js) 以及 [Vue](https://www.digitalocean.com/community/tags/vue-js)...
# 了解 React Portals（传送门）  on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/10368/0*FjXAcqaJwbGxRLfV) React Portal 提供了一种将子节点渲染到父组件以外的 DOM 节点的优秀解决方案。Portal 的最常见用例是子组件需要从视觉上脱离父容器，如下所示。 - 模态对话框 - 工具提示 - 悬浮卡 - 加载动画 可以使用 `ReactDOM.createPortal(child,container)` 创建一个 Portal。这里的 **child** 是一个...