人机交互爱好者的随笔

0%

上文中,笔者介绍了 Monorepo 这一项目组织方式、Lerna 这个用于便捷管理 monorepo 项目的工具以及它们在开源项目中的应用。那这一次就来聊聊 Monorepo 如何在 WebApp 中落地。

阅读全文 »

2020 年 4 月 16 日,前端业内最知名的框架之一——vue——发布了大版本 3.0 的第一个 beta 版本,增加了许多新特性、新功能,并进一步对性能进行了优化,让我们来看看都有哪些激动人心的变化

阅读全文 »

上文中提到了一种基于 mobx 的 React 组件设计方案:它将状态与逻辑剥离到 mobx 中,并通过工厂函数将它们与组件进行关联、注入,通过分层解决了前端组件基于UI进行测试的脆弱性组件生命周期被自动调用影响测试结果的问题。但这种设计模式同样产生了一些新的问题,在本篇中,我们将逐一尝试解决。

阅读全文 »

About

Monorepo

Monorepo 是一种项目的组织方式,许多开源项目均采用这种组织方式,如create-react-appreact-routerbabel,基本的项目结构如下

1
2
3
4
5
6
├── packages
| ├── pkg1
| | ├── package.json
| ├── pkg2
| | ├── package.json
├── package.json
阅读全文 »

React 是目前最流行的 Web 前端 UI 框架之一,借助其创造的 JSX 语法,可以将前端项目以组件为单位进行构建。而蓬勃发展的社区也对如何设计 React 下的组件进行了大量的讨论与实践,甚至还有专门的参考书。今天,笔者将列举自己接触到的 React 组件设计模式。

主流的 React 组件设计模式

在 React v16.7 之前,大多数 React 组件都是基于 Class 的。典型的 React Class 组件结构如下:

阅读全文 »