译文

React 是一个 JavaScript 库，它是当今最流行和行业领先的前端开发库。 JavaScript 是一种松散的类型化语言，因此，它捕获了运行时。这样做的结果就是 JavaScript 错误被捕获得非常晚，这可能导致严重的 bug。 当然 React 作为一个 JavaScript 库，也继承了这个问题。 干净代码(Clean code)是一种一致的编程风格，它使代码更容易编写、读取和维护。任何人都可以编写计算机可以理解的代码，但是优秀的开发人员可以编写人类可以理解的干净的代码。 干净的代码是一种以读者为中心的开发风格，它提高了我们的软件质量和可维护性。 编写干净代码需要编写具有清晰和简单的设计模式的代码，这使得人们可以轻松地阅读、测试和维护代码。因此，干净的代码可以降低软件开发的成本。这是因为编写干净的代码所涉及的原则，消除了技术债务。 在本文中，我们将介绍一些在使用 React 和 TypeScript 时使用的有用模式。 💡 为了让您的团队更容易地保持代码健康并优先处理技术债务工作，请尝试使用 Stepsize 的 VS Code 和 JetBrains 扩展。它们帮助工程师创建技术问题，将它们添加到迭代 中，并持续解决技术债务——而不离开编辑器。 现在让我们来了解一下在使用 React 和 Typescript 时应用的 10 个有用模式: 1. 使用默认导入来导入 React 考虑下面的代码: import * as React from "react"; 虽然上面的代码可以工作，但是如果我们不使用 React 的所有内容，那么导入它们是令人困惑的，也不是一个好的做法。一个更好的模式是使用如下所示的默认导出: import React, {useContext, useState} from "react"; 使用这种方法，我们可以从 React 模块中解构我们需要的东西，而不是导入所有的内容。 注意: 要使用这个选项，我们需要配置 tsconfig.json 文件，如下所示: { "compilerOptions": { "esModuleInterop": true" } } 在上面的代码中，通过将 esModuleInterop 设置为 true，我们启用了 allowSyntheticDefaultImports ，这对于 TypeScript 支持我们的语法非常重要。...

SOLID 是一套原则。它们主要是关心代码质量和可维护性的软件专业人员的指导方针。 React 不是面向对象，但这些原则背后的主要思想可能是有帮助的。在本文中，我将尝试演示如何应用这些原则来编写更好的代码。 在前一篇文章中，我们讨论了单一责任原则。今天，我们将讨论 SOLID 的第二个原则: 开闭原则。 本系列其他文章 如何应用 SOLID 原则在 React 中整理代码之单一原则 什么是开闭原则？ Robert c. Martin 认为这个原则是面向对象设计最重要的原则。但他不是第一个定义这个概念的人。Bertrand Meyer 于1988年在他的《面向对象软件构造》一书中写到了这一点。他解释了开放/封闭原则: 软件实体(类、模块、功能等)应该对扩展开放，但对修改关闭。 这个原则告诉您以这样一种方式来编写代码，即您能够在不更改现有代码的情况下添加其他功能。 让我们看看我们在哪里可以应用这个原则。 让我们从一个例子开始 假设我们有一个 User 组件，其中我们传递用户的详细信息，这个类的主要目的是显示该特定用户的详细信息。 这是一个很简单的开始。但是我们的生活并不是那么简单。几天后，我们的经理告诉我们系统中有三种类型的用户: SuperAdmin、 Admin 等等。 它们每个都有不同的信息和功能。 一个糟糕的解决方案 第一个也是显而易见的解决方案：在组件中包含一个条件，并根据不同的用户类型呈现不同的信息。 import React from 'react'; export const User = ({user}) => { return <> <div> Name: {user.name}</div> <div> Email: {user.email}</div> { user.type === 'SUPER_ADMIN' && <div> Details about super admin</div> } { user.type === 'ADMIN' && <div> Details about admin</div> } </> } 你知道这里出了什么问题吗？...

译者序 最近在研究 JavaScript 基础性的东西，但是看到对于执行上下文的解释我发现有两种，一种是执行上下文包含：scope(作用域)、variable object(变量对象)、this value(this 值)，另外一个种是包含：lexical environment(词法环境)、variable environment(变量环境)、this value(this 值)。 后面我查阅了不少博客以及 ES3 和 ES5 的规范才了解到，第一种是 ES3 的规范，经典书籍《JavaScript高级程序设计》第三版就是这样解释的，也是网上广为流传的一种，另一种是 ES5 的规范。 然后我接着又去翻了 ES2018 中的，发现又有变化了，已经增加了更多的内容了，考虑到这部分内容颇为复杂，准备后面再进行总结分享，查资料的时候看到这篇讲执行上下文(ES5 )的还不错，所以就翻译出来先分享给大家。 以后看到变量对象、活动对象知道是 ES3 里面的内容，而如果是词法环境、变量环境这种词就是 ES5 以后的内容。 以下是正文： 什么是执行上下文？ 简而言之，执行上下文是计算和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。 执行上下文的类型 JavaScript 中有三种执行上下文类型。 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。 Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。 执行栈 执行栈，也就是在其它编程语言中所说的“调用栈”，是一种拥有 LIFO（后进先出）的数据结构，被用来存储代码运行时创建的所有执行上下文。 当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。 引擎会执行处于栈顶的执行上下文的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。 让我们通过下面的代码示例来理解： let a = 'Hello World!...

0. 作者以及原文介绍 作者是 Dr. Axel Rauschmayer，号称”德国阮一峰“，本文原文来自于他的博客：https://2ality.com/2020-02/understanding-types-typescript.html，不熟悉他的可以关注一下他的博客。 1. 每个角度都从这三个问题来解释 以下三个问题对于理解类型是如何工作的非常重要，需要从这两个角度中的每一个角度来回答。 myVariable 的类型 MyType 意味着什么？ let myVariable: MyType = /*...*/; Sourcetype 可以分配给 TargetType 吗? let source: SourceType = /*...*/; let target: TargetType = source; TypeUnion 是如何从 Type1、 Type2 和 Type3 衍生而来的？ type TypeUnion = Type1 | Type2 | Type3; 2. 角度 1： 类型是一组值 从这个角度来看，类型是一组值： 如果 myVariable 具有 MyType 类型，这意味着可以分配给 myVariable 的所有值都必须是集合 MyType 的元素。 如果 Sourcetype 可以分配给 TargetType，那么 Sourcetype 是 TargetType 的子集。 因此，TargetType 也允许 SourceType 所允许的所有值。...

本文是译文，原文地址是：https://medium.com/@sdolidze/the-iceberg-of-react-hooks-af0b588f43fb React Hooks 与类组件不同，它提供了用于优化和组合应用程序的简单方式，并且使用了最少的样板文件。 如果没有深入的知识，由于微妙的 bug 和抽象层漏洞，可能会出现性能问题，代码复杂性也会增加。 我已经创建了12个案例研究来演示常见的问题以及解决它们的方法。 我还编写了 React Hooks Radar 和 React Hooks Checklist，来推荐和快速参考。 案例研究： 实现 Interval 目标是实现计数器，从 0 开始，每 500 毫秒增加一次。 应提供三个控制按钮: 启动、停止和清除。 Level 0：Hello World export default function Level00() { console.log('renderLevel00'); const [count, setCount] = useState(0); return ( <div> count => {count} <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(count - 1)}>-</button> </div> ); } 这是一个简单的、正确实现的计数器，用户单击时计数器的增加或减少。 Level 1：setInterval export default function Level01() { console....