xiaoT

每次实现一个新的 UI 组件时，我都是先实现布局，然后，mock 数据用于 defaultProps，并提供一个空的点击监听模拟用户交互。然后，用真实的数据替换掉 mock 的函数和 props。 为了实现那些需要从服务端获取数据数据的组件，我一次次的重复着相同的操作。使用和配…

最近，我采用了一种新的理念编写 React 组件。它不一定是必要的，但，是一种新的思维方式。 同样，描述很简短，你或许认为自己已经遵守了相同法则，但是，它很容易让你背道而驰。 非常直截了当，看一下它需要什么功能，你只是需要一个 name，job title 和 picture …

提升你对 TypeScript 的理解，并学这些高级的技术，可以帮助你掌握该语言并且可以更好的在 React 中使用 TypeScript。 去年冬天，我开始使用 TypeScript，我已经从一个使用 any 的新手逐渐成长为一个习惯使用高级内置类型和自定义类型的老手。通过在…

最近，我学到了一个非常有用的 TypeScript 的操作符：非空断言操作符。它会排除掉变量中的 null 和 undefeind。 在这篇文章中，我将会介绍如何、何时使用这个操作符，并提供一些样式，希望可以对你们有帮助。 TL;DR：在变量后面添加一个 ! 就会忽略 unde…

你是否好奇 Medium 是如何加载图片的？或许，你已经注意到图片是分多个步骤加载渲染的。首先，显示一张模糊版本的图片，然后，用全尺寸的图片替换掉。 我们可以把图片加载技术分为两个不同的功能。 1. 懒加载 懒加载是一种非常好的技术，它可以明显提升网站的性能。 想象一下，你写了…

好消息 - ES2020 新功能已经落地！这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。 BigInt，Javascript 中最期待的新功能终于落地。它允许开发者在 JS 中使用更大的整数进行数据处理。 …

对于我们这些有 Redux 使用经验的人来说，useReducer 看起来更加复杂和没必要。在 useState 和 context 之间，很容易掉进思维陷阱中，这是，因为对于大多简单的使用场景 reducer 增加了不必要的复杂度；然而，事实证明 useReducer 可以让…

先前，我们已经知道如何设置 Jest 和 Enzyme，并且，顺便了解了 Jest 中如何模拟 ES 和 CommonJS 模块。 在这篇文章中，我们将会看到更多的示例：如何通过 Enzyme 创建特殊的测试场景模拟组件中用户的交互。 如本系列第一篇文章所述，我们将会用 Enz…

这篇文章将会介绍如何设置并使用 Jest 和 Enzyme 测试通过 Create React App (CRA) 创建的 React 应用。对于那些从头开始的人我们会给出一些建议。但是，不会涉及太多有关 React 的知识。 Jest 和 Enzyme 是两个不同，但又相互相…