
在现代前端开发中，组件库已经成为提升开发效率和保证代码一致性的重要工具。本文将分享我在构建React组件库过程中的经验和思考。

## 为什么需要组件库？

组件库不仅仅是代码复用，更是设计系统的载体：

1. **一致性保证**：统一的视觉风格和交互体验
2. **开发效率**：减少重复代码，提升开发速度  
3. **维护性**：集中管理和更新，降低维护成本
4. **团队协作**：为设计师和开发者提供共同语言

## 核心设计原则

### 1. 原子化设计

采用原子化设计方法论，将界面元素分解为：

- **原子**：按钮、输入框等基础元素
- **分子**：搜索框、卡片等组合元素  
- **组织**：表单、导航栏等复杂组件

### 2. TypeScript优先

完整的类型定义带来更好的开发体验：

```typescript
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  loading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  loading = false,
  disabled = false,
  children,
  onClick,
  ...props
}) => {
  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700'
  };
  const sizeClasses = {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2',
    large: 'px-6 py-3 text-lg'
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
      disabled={disabled || loading}
      onClick={onClick}
      {...props}
    >
      {loading && <Spinner className="mr-2" />}
      {children}
    </button>
  );
};
```

### 3. 主题系统

设计灵活的主题系统支持多样化需求：

```javascript
const theme = {
  colors: {
    primary: {
      50: '#eff6ff',
      100: '#dbeafe',
      500: '#3b82f6',
      600: '#2563eb',
      900: '#1e3a8a'
    },
    gray: {
      50: '#f9fafb',
      100: '#f3f4f6',
      500: '#6b7280',
      900: '#111827'
    }
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem'
  },
  borderRadius: {
    sm: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem'
  }
};
```

## 技术实现要点

### 构建配置

使用Rollup构建多种格式的包：

```javascript
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      exports: 'named',
      sourcemap: true
    },
    {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'MyComponentLibrary',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    terser()
  ],
  external: ['react', 'react-dom']
};
```

### 测试策略

#### 单元测试

```javascript
// Button.test.tsx
import { render, fireEvent, screen } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  test('renders button with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });

  test('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    
    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('disables button when loading', () => {
    render(<Button loading>Loading</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  test('applies correct variant classes', () => {
    render(<Button variant="danger">Delete</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-red-600');
  });
});
```

#### 视觉回归测试

```javascript
// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-docs'
  ]
};

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: '基础按钮组件，支持多种样式和状态'
      }
    }
  },
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'danger']
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large']
    }
  }
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Primary Button'
  }
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Secondary Button'
  }
};

export const Loading: Story = {
  args: {
    loading: true,
    children: 'Loading...'
  }
};
```

### 文档和Demo

良好的文档是组件库成功的关键：

```markdown
# Button 组件

基础按钮组件，支持多种样式、大小和状态。

## 基本使用

\`\`\`jsx
import { Button } from 'my-component-library';

function App() {
  return (
    <Button onClick={() => console.log('clicked')}>
      点击我
    </Button>
  );
}
\`\`\`

## API 参考

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | 按钮样式变体 |
| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮大小 |
| loading | boolean | false | 是否显示加载状态 |
| disabled | boolean | false | 是否禁用按钮 |
| onClick | (event: MouseEvent) => void | - | 点击事件处理函数 |
```

## 最佳实践总结

### 1. 渐进式开发
从核心组件开始，逐步扩展：
- 先实现Button、Input等基础组件
- 再构建Card、Modal等复合组件
- 最后开发业务相关的高级组件

### 2. 版本管理
- 使用语义化版本（Semantic Versioning）
- 维护详细的变更日志（CHANGELOG.md）
- 为重大更新提供迁移指南

### 3. 性能优化
- 支持Tree shaking，允许按需引入
- 使用React.memo优化组件渲染
- 合理使用CSS-in-JS或CSS Modules

```javascript
// 按需引入示例
import Button from 'my-library/Button';
import Input from 'my-library/Input';

// 而不是
import { Button, Input } from 'my-library'; // 可能导致整个库被打包
```

### 4. 可访问性
- 遵循WCAG指南
- 提供适当的ARIA属性
- 支持键盘导航

```jsx
const Modal = ({ isOpen, onClose, children }) => {
  useEffect(() => {
    if (isOpen) {
      // 锁定焦点在模态框内
      const focusableElements = modal.current.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      focusableElements[0]?.focus();
    }
  }, [isOpen]);

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
    >
      {children}
    </div>
  );
};
```

## 社区建设

### 1. 贡献指南
创建清晰的贡献指南，包括：
- 代码规范和提交规范
- 开发环境搭建步骤  
- PR模板和Issue模板
- 组件开发流程

### 2. 反馈收集
- 建立用户反馈渠道
- 定期收集使用数据
- 举办用户调研活动

### 3. 持续改进
- 根据用户反馈优化API设计
- 跟进前端技术发展趋势
- 定期重构和优化性能

## 结语

构建组件库是一个长期的过程，需要在功能性、易用性和扩展性之间找到平衡。关键在于：

1. **以用户为中心**：始终考虑开发者的使用体验
2. **保持简单**：API设计要直观易懂
3. **注重质量**：完善的测试和文档
4. **拥抱变化**：适应技术发展和用户需求

希望这些经验能对你构建自己的组件库有所帮助。记住，最好的组件库是那些能够真正解决问题，让开发者工作更高效的库！

构建现代化的React组件库：从设计到实现


Node.js的事件循环是其高性能的核心所在。理解事件循环机制对于编写高效的Node.js应用至关重要。

## 事件循环基础

### 什么是事件循环？

事件循环是一个执行模型，它使得Node.js能够执行非阻塞I/O操作。尽管JavaScript是单线程的，但通过将操作卸载到系统内核，Node.js可以实现高并发。

```javascript
console.log('开始');

setTimeout(() => {
  console.log('setTimeout 回调');
}, 0);

setImmediate(() => {
  console.log('setImmediate 回调');
});

console.log('结束');

// 输出顺序在不同环境下可能不同
```

### 事件循环的六个阶段

事件循环的每一轮称为一个"tick"，每个tick分为六个阶段：

```
   ┌───────────────────────────┐
┌─>│           timers          │  <-- 执行setTimeout()和setInterval()的回调
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │  <-- 执行延迟到下一个循环迭代的I/O回调
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │  <-- 仅系统内部使用
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           poll            │  <-- 获取新的I/O事件;执行与I/O相关的回调
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           check           │  <-- setImmediate()回调函数在这里执行
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │  <-- 一些准备关闭的回调函数
   └───────────────────────────┘
```

#### 1. Timers 阶段
执行`setTimeout()`和`setInterval()`的回调函数。

```javascript
console.log('start');

setTimeout(() => {
  console.log('timer1');
}, 0);

setTimeout(() => {
  console.log('timer2');
}, 0);

console.log('end');

// 输出: start -> end -> timer1 -> timer2
```

#### 2. Pending callbacks 阶段
执行延迟到下一个循环迭代的I/O回调。

#### 3. Idle, prepare 阶段
仅供系统内部使用。

#### 4. Poll 阶段（轮询阶段）
这是最重要的阶段：
- 获取新的I/O事件
- 执行与I/O相关的回调
- 在适当的时候阻塞在此阶段

```javascript
const fs = require('fs');

console.log('开始');

// I/O操作
fs.readFile('./package.json', () => {
  console.log('文件读取完成');
});

console.log('结束');

// 输出: 开始 -> 结束 -> 文件读取完成
```

#### 5. Check 阶段
执行`setImmediate()`回调函数。

#### 6. Close callbacks 阶段
执行一些关闭的回调函数，如`socket.on('close', ...)`。

## 宏任务与微任务

### 宏任务 (Macrotask)
- `setTimeout`
- `setInterval`  
- `setImmediate`
- I/O操作
- UI渲染（浏览器环境）

### 微任务 (Microtask)
- `Promise.then/catch/finally`
- `process.nextTick`
- `queueMicrotask`

### 执行优先级

```javascript
console.log('1'); // 同步代码

setTimeout(() => console.log('2'), 0); // 宏任务

Promise.resolve().then(() => console.log('3')); // 微任务

process.nextTick(() => console.log('4')); // 最高优先级微任务

console.log('5'); // 同步代码

// 输出顺序: 1 -> 5 -> 4 -> 3 -> 2
```

**重要规则**：
1. 同步代码最先执行
2. 每个阶段结束后，都会执行微任务队列
3. `process.nextTick` 优先级最高
4. Promise 微任务次之
5. 宏任务最后执行

## 深入理解执行顺序

### 复杂示例

```javascript
console.log('=== 开始 ===');

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => {
    console.log('promise1');
  });
}, 0);

setTimeout(() => {
  console.log('timer2');
  Promise.resolve().then(() => {
    console.log('promise2');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('promise3');
  process.nextTick(() => {
    console.log('nextTick1');
  });
});

process.nextTick(() => {
  console.log('nextTick2');
  Promise.resolve().then(() => {
    console.log('promise4');
  });
});

console.log('=== 结束 ===');

// 输出分析:
// === 开始 ===
// === 结束 ===
// nextTick2        (process.nextTick优先级最高)
// promise3         (Promise微任务)
// promise4         (nextTick2中的Promise)
// nextTick1        (promise3中的nextTick)
// timer1           (第一个setTimeout)
// promise1         (timer1中的Promise)
// timer2           (第二个setTimeout)
// promise2         (timer2中的Promise)
```

### setImmediate vs setTimeout

```javascript
// 在I/O回调中
const fs = require('fs');

fs.readFile('./package.json', () => {
  setTimeout(() => {
    console.log('setTimeout');
  }, 0);
  
  setImmediate(() => {
    console.log('setImmediate');
  });
});

// 在I/O回调中，setImmediate总是优先于setTimeout
// 输出: setImmediate -> setTimeout
```

```javascript
// 在主线程中
setTimeout(() => {
  console.log('setTimeout');
}, 0);

setImmediate(() => {
  console.log('setImmediate');
});

// 在主线程中，执行顺序不确定，取决于系统性能
```

## 实际应用场景

### 1. 避免阻塞主线程

```javascript
// 不好的做法 - 阻塞主线程
function heavyComputation() {
  let result = 0;
  for (let i = 0; i < 10000000; i++) {
    result += i;
  }
  return result;
}

console.log('开始');
const result = heavyComputation();
console.log('结果:', result);
console.log('结束');

// 更好的做法 - 使用setImmediate分片处理
function heavyComputationAsync(max, callback) {
  let i = 0;
  let result = 0;
  
  function chunk() {
    let count = 0;
    while (count < 100000 && i < max) {
      result += i++;
      count++;
    }
    
    if (i < max) {
      setImmediate(chunk); // 让出控制权
    } else {
      callback(result);
    }
  }
  
  chunk();
}

console.log('开始');
heavyComputationAsync(10000000, (result) => {
  console.log('结果:', result);
  console.log('结束');
});
console.log('继续执行其他任务...');
```

### 2. 优化I/O操作

```javascript
const fs = require('fs').promises;

// 串行读取文件（慢）
async function readFilesSequentially(files) {
  const results = [];
  for (const file of files) {
    try {
      const content = await fs.readFile(file, 'utf8');
      results.push(content);
    } catch (error) {
      console.error(`读取文件 ${file} 失败:`, error.message);
      results.push(null);
    }
  }
  return results;
}

// 并行读取文件（快）
async function readFilesConcurrently(files) {
  const promises = files.map(file => 
    fs.readFile(file, 'utf8').catch(error => {
      console.error(`读取文件 ${file} 失败:`, error.message);
      return null;
    })
  );
  
  return await Promise.all(promises);
}

// 使用示例
const files = ['file1.txt', 'file2.txt', 'file3.txt'];

console.time('串行读取');
readFilesSequentially(files).then(() => {
  console.timeEnd('串行读取');
});

console.time('并行读取');
readFilesConcurrently(files).then(() => {
  console.timeEnd('并行读取');
});
```

### 3. 实现简单的任务调度器

```javascript
class TaskScheduler {
  constructor() {
    this.tasks = [];
    this.running = false;
  }
  
  addTask(task) {
    this.tasks.push(task);
    if (!this.running) {
      this.runTasks();
    }
  }
  
  runTasks() {
    this.running = true;
    
    const runNext = () => {
      if (this.tasks.length === 0) {
        this.running = false;
        return;
      }
      
      const task = this.tasks.shift();
      
      try {
        const result = task();
        
        // 如果任务返回Promise，等待完成
        if (result && typeof result.then === 'function') {
          result
            .then(() => setImmediate(runNext))
            .catch((error) => {
              console.error('任务执行失败:', error);
              setImmediate(runNext);
            });
        } else {
          setImmediate(runNext);
        }
      } catch (error) {
        console.error('任务执行失败:', error);
        setImmediate(runNext);
      }
    };
    
    setImmediate(runNext);
  }
}

// 使用示例
const scheduler = new TaskScheduler();

scheduler.addTask(() => {
  console.log('任务1: 同步任务');
});

scheduler.addTask(async () => {
  console.log('任务2: 异步任务开始');
  await new Promise(resolve => setTimeout(resolve, 100));
  console.log('任务2: 异步任务完成');
});

scheduler.addTask(() => {
  console.log('任务3: 另一个同步任务');
});
```

## 性能监控和调试

### 1. 监控事件循环延迟

```javascript
const { performance } = require('perf_hooks');

function measureEventLoopLag() {
  const start = performance.now();
  
  setImmediate(() => {
    const lag = performance.now() - start;
    console.log(`事件循环延迟: ${lag.toFixed(2)}ms`);
  });
}

// 定期监控
setInterval(measureEventLoopLag, 1000);

// 模拟CPU密集任务
function cpuIntensiveTask() {
  const start = Date.now();
  while (Date.now() - start < 100) {
    // 占用CPU 100ms
  }
}

// 每2秒执行一次CPU密集任务
setInterval(cpuIntensiveTask, 2000);
```

### 2. 检测长时间运行的任务

```javascript
function wrapFunction(fn, name) {
  return function(...args) {
    const start = process.hrtime.bigint();
    
    const result = fn.apply(this, args);
    
    const end = process.hrtime.bigint();
    const duration = Number(end - start) / 1000000; // 转换为毫秒
    
    if (duration > 10) { // 如果执行时间超过10ms
      console.warn(`⚠️  函数 ${name} 执行时间过长: ${duration.toFixed(2)}ms`);
    }
    
    return result;
  };
}

// 使用示例
const slowFunction = wrapFunction(function() {
  let sum = 0;
  for (let i = 0; i < 1000000; i++) {
    sum += i;
  }
  return sum;
}, 'slowFunction');

slowFunction(); // 会输出警告
```

## 最佳实践

### 1. 合理使用异步操作
```javascript
// ❌ 错误：阻塞事件循环
function processLargeArray(arr) {
  return arr.map(item => heavyOperation(item));
}

// ✅ 正确：分批处理
async function processLargeArrayAsync(arr, batchSize = 100) {
  const results = [];
  
  for (let i = 0; i < arr.length; i += batchSize) {
    const batch = arr.slice(i, i + batchSize);
    const batchResults = batch.map(item => heavyOperation(item));
    results.push(...batchResults);
    
    // 让出控制权，允许其他任务执行
    await new Promise(resolve => setImmediate(resolve));
  }
  
  return results;
}
```

### 2. 避免深层回调嵌套
```javascript
// ❌ 回调地狱
fs.readFile('file1.txt', (err1, data1) => {
  if (err1) throw err1;
  fs.readFile('file2.txt', (err2, data2) => {
    if (err2) throw err2;
    fs.writeFile('output.txt', data1 + data2, (err3) => {
      if (err3) throw err3;
      console.log('完成');
    });
  });
});

// ✅ 使用async/await
async function processFiles() {
  try {
    const data1 = await fs.readFile('file1.txt', 'utf8');
    const data2 = await fs.readFile('file2.txt', 'utf8');
    await fs.writeFile('output.txt', data1 + data2);
    console.log('完成');
  } catch (error) {
    console.error('处理文件失败:', error);
  }
}
```

### 3. 使用流处理大文件
```javascript
const fs = require('fs');
const { pipeline } = require('stream');
const { Transform } = require('stream');

// 处理大文件而不阻塞事件循环
function processLargeFile(inputPath, outputPath) {
  const transformStream = new Transform({
    transform(chunk, encoding, callback) {
      // 处理数据块
      const processed = chunk.toString().toUpperCase();
      callback(null, processed);
    }
  });
  
  return new Promise((resolve, reject) => {
    pipeline(
      fs.createReadStream(inputPath),
      transformStream,
      fs.createWriteStream(outputPath),
      (error) => {
        if (error) {
          reject(error);
        } else {
          resolve();
        }
      }
    );
  });
}
```

## 总结

理解Node.js事件循环机制的关键点：

1. **单线程特性**：JavaScript运行在单线程中，通过事件循环实现并发
2. **六个阶段**：每个事件循环包含六个不同的阶段
3. **任务优先级**：微任务优先于宏任务，`process.nextTick`优先级最高
4. **非阻塞I/O**：通过异步操作避免阻塞主线程
5. **性能监控**：定期监控事件循环延迟，及时发现性能问题

掌握这些概念，你就能够：
- 编写更高效的异步代码
- 避免常见的性能陷阱
- 更好地调试异步问题
- 构建高性能的Node.js应用

记住：**异步不等于并发，理解执行顺序是关键！**

技术博客

构建现代化的React组件库：从设计到实现

深入理解Node.js事件循环机制

保持联系