鲨叔
前端工程师/架构
寂静
获得徽章 17
从antd 的 pro-component 和 shadcn-ui 的技术实现现状和趋势可以看到东西方在软件技术演变上的差异性：中国偏向于打造「大而全」的东西，而西人则偏向于打造「小而美」的东西。这两种思维模式可以概括为「入口」思维和「接口」思维。而这背后恰恰折射出双方后面的文明特征 - 「大一统」思想从两千多年前就根植于中华文明的内核，此后，我们以此为美，以此为要，演绎了多少荡气回肠的历史故事啊。
展开
评论
点赞
前天 rspack 宣布发布了 1.0.0 版本。这真的是里程碑级别的事件。用过 rsbuild ，你就知道 rspack 套餐是有多香了，我真想为他唱一首颂歌。因为：
- rspack 几乎 100% 兼容 webpack 生态，包括所有的 plugin 和 loader；
- 基于 rsbuild 来把项目从 webpack 迁移到 rspack 真的就是一个小时的事情，异常轻松；
- 收益真的肉眼可见 - 无论是冷启动场景还是生产构建的场景；
总结：用了 rspack ，生活幸福感倍增。
- rspack 几乎 100% 兼容 webpack 生态，包括所有的 plugin 和 loader；
- 基于 rsbuild 来把项目从 webpack 迁移到 rspack 真的就是一个小时的事情，异常轻松；
- 收益真的肉眼可见 - 无论是冷启动场景还是生产构建的场景；
总结：用了 rspack ，生活幸福感倍增。
展开
1
4
其实积极地去跟进业界的每一个细小的改进还是有意义的。因为说不定这些都是前端工业生态里面的一次「扇动翅膀」。所有的东西累计到一起，当到达一个临界值的时候，前端届的「蝴蝶效应」就会出现。假如，你不提前跟进的话，当 breaking change 发生的时候，你就不会理解它的出现的背后逻辑是什么。
评论
点赞
分享一个 typescript 小技巧：当字符串 union 类型跟 string 交叉的时候
1. type color = 'primary' | 'secondry' | string , 这么写不会有精确的自动补全提示；
2. type color2 = 'primary' | 'secondry' | (string & {})，这么写会有精确的自动补全提示；
1. type color = 'primary' | 'secondry' | string , 这么写不会有精确的自动补全提示；
2. type color2 = 'primary' | 'secondry' | (string & {})，这么写会有精确的自动补全提示；
展开
4
2
大事件！nodejs 在 v22.6.0 初步尝试对 typescript 进行原生支持。当前有以下的限制：
1. 只是支持普通的类型注解，不支持即可以是值又可以是类型的特性，比如 enum 和 namespace；
2. 必须显式指定导入文件的后缀；
3. 从外部导入类型的的时候，必须使用「import type」的语法；
4. 默认对从 node_modules 导入的文件不做任何处理。
1. 只是支持普通的类型注解，不支持即可以是值又可以是类型的特性，比如 enum 和 namespace；
2. 必须显式指定导入文件的后缀；
3. 从外部导入类型的的时候，必须使用「import type」的语法；
4. 默认对从 node_modules 导入的文件不做任何处理。
展开
评论
4
大事件！nodejs 在 v22.6.0 初步尝试对 typescript 进行原生支持。当前有以下的限制：
1. 只是支持普通的类型注解，不支持即可以是值又可以是类型的特性，比如 enum 和 namespace；
2. 必须显式指定导入文件的后缀；
3. 从外部导入类型的的时候，必须使用「import type」的语法；
4. 默认对从 node_modules 导入的文件不做任何处理。
1. 只是支持普通的类型注解，不支持即可以是值又可以是类型的特性，比如 enum 和 namespace；
2. 必须显式指定导入文件的后缀；
3. 从外部导入类型的的时候，必须使用「import type」的语法；
4. 默认对从 node_modules 导入的文件不做任何处理。
展开
评论
点赞
deno.com 听说谁能够准确说出下面的打印结果并且知道为什么，谁就是 react 大师级人物，match 阿里 P7 。大家不妨试一试。
========================================
import { useEffect } from "react";
import { createRoot } from "react-dom/client";
export const App = ({ name }) => {
console.log("log:", 5);
Promise.resolve().then(() => {
console.log("log:", 6);
});
useEffect(() => {
console.trace();
console.log("log:", 7);
});
return (
<div>
<h1>Hello {name}!</h1>
<p>Start editing to see some magic happen :)</p>
</div>
);
};
const root = createRoot(document.getElementById("root"));
console.log("log:", 2);
root.render(<App name="StackBlitz" />);
console.log("log:", 3);
Promise.resolve().then(() => {
console.log("log:", 4);
});
setTimeout(() => {
console.log("log:", 1);
}, 0);
========================================
import { useEffect } from "react";
import { createRoot } from "react-dom/client";
export const App = ({ name }) => {
console.log("log:", 5);
Promise.resolve().then(() => {
console.log("log:", 6);
});
useEffect(() => {
console.trace();
console.log("log:", 7);
});
return (
<div>
<h1>Hello {name}!</h1>
<p>Start editing to see some magic happen :)</p>
</div>
);
};
const root = createRoot(document.getElementById("root"));
console.log("log:", 2);
root.render(<App name="StackBlitz" />);
console.log("log:", 3);
Promise.resolve().then(() => {
console.log("log:", 4);
});
setTimeout(() => {
console.log("log:", 1);
}, 0);
展开
10
4
看了 Evan You 在 ViteConf 2023 上的演讲，vite 的内部实现看来要变天了。他们推出了 rolldown 项目 - 一个与 rollup api 兼容但是底层实现是用 rust 来编写的 bundler。在 Evan 的四步走规划里面，他还提出了一个「Rustify Vite」的理念。简单来解释这个理念就是「一切能用 rust 重构的东西（主要是指 plugin）都用 rust来实现」。这里「能用 rust 重构」的标准是什么？标准是「能对性能的提升有帮助」。
前有 turbopack，中有 rspack，后有 vite。用 rust 来重建前端基础设施的趋势正在发生，未来也会一直延续。Keep eyes on it!
前有 turbopack，中有 rspack，后有 vite。用 rust 来重建前端基础设施的趋势正在发生，未来也会一直延续。Keep eyes on it!
展开
评论
2
偶然看到这个沸点问怎么封装一个全局公共组件。那让鲨叔来说道说道吧。遵循以下几点就可以做到：
1. 全局组件挂载放在 react 应用的根组件上；
2. 与此同时，向全局组件传入一个「函数类型」的 ref 属性值（不要忘记，function component 是默认不接受 ref 属性的，所以记得用 `forwardRef()` 包裹一下），这个函数要实现的就是把全局组件回传给我们的 instance 挂载在 window 对象上。
3. 最后，作为配合，在全局组件内部中需要使用 `useImperativeHandle` 来将内部的想要暴露出去的方法暴露出去。
根据上面的步骤，我们可以封装出一个全局的公共组件。比如说，比较合适的使用场景是全局的 <GlobalLoading> 组件。假设现在我们的 ref 属性值是 `(instance)=> window._globalLoading_ = instance`，那么你在项目的任何地方就可以无需预先导入，直接以命令式的方式去使用<GlobalLoading> 组件，例如：`_globalLoading_.show()` 或者 `_globalLoading_.hide()`等等。
我是鲨叔，reactjs 资深用户。我写了一个关于一个专栏《All about React》。关注我，可以让你的 react 能力更上一层楼。
1. 全局组件挂载放在 react 应用的根组件上；
2. 与此同时，向全局组件传入一个「函数类型」的 ref 属性值（不要忘记，function component 是默认不接受 ref 属性的，所以记得用 `forwardRef()` 包裹一下），这个函数要实现的就是把全局组件回传给我们的 instance 挂载在 window 对象上。
3. 最后，作为配合，在全局组件内部中需要使用 `useImperativeHandle` 来将内部的想要暴露出去的方法暴露出去。
根据上面的步骤，我们可以封装出一个全局的公共组件。比如说，比较合适的使用场景是全局的 <GlobalLoading> 组件。假设现在我们的 ref 属性值是 `(instance)=> window._globalLoading_ = instance`，那么你在项目的任何地方就可以无需预先导入，直接以命令式的方式去使用<GlobalLoading> 组件，例如：`_globalLoading_.show()` 或者 `_globalLoading_.hide()`等等。
我是鲨叔，reactjs 资深用户。我写了一个关于一个专栏《All about React》。关注我，可以让你的 react 能力更上一层楼。
展开
1
16