React

使用 React 组件构建交互且可复用的元素

React 组件 是在文档中创建交互式、可复用元素的强大方式。

​

使用 React 组件

你可以在 MDX 文件中直接使用 React hooks 来构建 React 组件。

​

示例

此示例先声明一个 Counter 组件，然后通过 <Counter /> 调用它。

export const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return (
  <div className="flex items-center justify-center">
      <div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
        <button
          onClick={decrement}
          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
          aria-label="减少"
        >
          -
        </button>

        <div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
          {count}
        </div>

        <button
          onClick={increment}
          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
          aria-label="增加"
        >
          +
        </button>
      </div>
    </div>
  )
}

<Counter />

计数器会以可交互的 React 组件形式渲染。

​

导入组件

你可以从 snippets 文件夹导入组件。与常规 React 不同，你不能从任意 MDX 文件导入组件。可复用组件必须引用自 snippets 文件夹内的文件。了解更多：可复用代码片段。

​

示例

此示例声明了一个使用多个 React Hook 的 ColorGenerator 组件，并在一个 MDX 文件中使用它。

在 snippets 文件夹中创建 color-generator.jsx 文件：

/snippets/color-generator.jsx

export const ColorGenerator = () => {
  const [hue, setHue] = useState(180)
  const [saturation, setSaturation] = useState(50)
  const [lightness, setLightness] = useState(50)
  const [colors, setColors] = useState([])

  useEffect(() => {
    const newColors = []
    for (let i = 0; i < 5; i++) {
      const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
      newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
    }
    setColors(newColors)
  }, [hue, saturation, lightness])

  const copyToClipboard = (color) => {
    navigator.clipboard
      .writeText(color)
      .then(() => {
        console.log(`已复制 ${color} 到剪贴板！`)
      })
      .catch((err) => {
        console.error("复制失败：", err)
      })
  }

  return (
    <div className="p-4 border dark:border-zinc-950/80 rounded-xl not-prose">
      <div className="space-y-4">
        <div className="space-y-2">
          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            色相：{hue}°
            <input
              type="range"
              min="0"
              max="360"
              value={hue}
              onChange={(e) => setHue(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(0, ${saturation}%, ${lightness}%), 
                  hsl(60, ${saturation}%, ${lightness}%), 
                  hsl(120, ${saturation}%, ${lightness}%), 
                  hsl(180, ${saturation}%, ${lightness}%), 
                  hsl(240, ${saturation}%, ${lightness}%), 
                  hsl(300, ${saturation}%, ${lightness}%), 
                  hsl(360, ${saturation}%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            饱和度：{saturation}%
            <input
              type="range"
              min="0"
              max="100"
              value={saturation}
              onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, 0%, ${lightness}%), 
                  hsl(${hue}, 50%, ${lightness}%), 
                  hsl(${hue}, 100%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            明度：{lightness}%
            <input
              type="range"
              min="0"
              max="100"
              value={lightness}
              onChange={(e) => setLightness(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, ${saturation}%, 0%), 
                  hsl(${hue}, ${saturation}%, 50%), 
                  hsl(${hue}, ${saturation}%, 100%))`,
              }}
            />
          </label>
        </div>

        <div className="flex space-x-1">
          {colors.map((color, idx) => (
            <div
              key={idx}
              className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
              style={{ backgroundColor: color }}
              title={`点击复制：${color}`}
              onClick={() => copyToClipboard(color)}
            />
          ))}
        </div>

        <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
          <p>
            基础颜色：hsl({hue}, {saturation}%, {lightness}%)
          </p>
        </div>
      </div>
    </div>
  )
}

导入 ColorGenerator 组件，并在 MDX 文件中使用它：

import { ColorGenerator } from "/snippets/color-generator.jsx"

<ColorGenerator />

颜色生成器会以交互式 React 组件的形式呈现。

​

注意事项

客户端渲染的影响

React Hook 组件在客户端渲染，这带来以下影响：

• SEO（搜索引擎优化）：搜索引擎可能无法完整索引动态内容。
• 初始加载：在组件渲染前，访客可能会看到内容加载的闪烁。
• 无障碍：确保动态内容的变化能够被屏幕阅读器正确播报。

性能最佳实践

• 优化依赖数组：在 useEffect 的依赖数组中仅包含必要的依赖。
• 记忆化复杂计算：对开销较大的操作使用 useMemo 或 useCallback。
• 减少重复渲染：将大型组件拆分为更小的组件以避免级联式重复渲染。
• 懒加载：考虑对复杂组件进行懒加载，以改善页面的初始加载时间。